/* ==========================================================================
   PokeWonder — shared stylesheet
   Performance note: no backdrop-filter / no animated blur layers.
   Only opacity + transform are animated (cheap, GPU-composited).
   ========================================================================== */

:root {
  --red: #ef3b47;
  --red-light: #ff6b74;
  --red-dark: #b91d29;
  --ink: #f6f6f8;
  --muted: #a8a8b3;
  --muted-2: #7d7d88;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.18);
  --surface: #19191d;
  --surface-2: #202024;
  --background: #0c0c0e;
  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --ease-slow: cubic-bezier(.16, 1, .3, 1);
  --dur-slow: 700ms;
  --dur-med: 380ms;
  --shell-max: 1180px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: "Inter", "Segoe UI", Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* static background — two soft radial gradients, painted once, no filter/animation */
  background:
    radial-gradient(1100px 620px at 14% -8%, rgba(239, 59, 71, 0.16), transparent 60%),
    radial-gradient(900px 560px at 100% 8%, rgba(107, 59, 239, 0.10), transparent 55%),
    var(--background);
  background-attachment: fixed;
}

/* ---------- floating particles (background ambience) ----------
   transform + opacity only, generated once and left running — no layout
   thrash, no filter/blur, cheap even with a couple dozen on screen. */

.particles {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.particle {
  position: absolute;
  bottom: -5vh;
  left: var(--x, 50%);
  width: var(--size, 4px);
  height: var(--size, 4px);
  border-radius: 50%;
  background: var(--color, #fff);
  opacity: 0;
  animation: particle-float var(--dur, 22s) linear infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform, opacity;
}

@keyframes particle-float {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  8%   { opacity: var(--op, .5); }
  85%  { opacity: var(--op, .5); }
  100% { transform: translate3d(var(--drift, 0px), -115vh, 0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .particles { display: none; }
}

/* ---------- reveal-on-scroll (transform + opacity only = cheap) ---------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-slow),
              transform var(--dur-slow) var(--ease-slow);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- layout shell ---------- */

.page {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: clamp(24px, 4vw, 56px) 18px 40px;
}

.shell {
  width: 100%;
  max-width: var(--shell-max);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.4vw, 22px);
}

.shell.narrow {
  max-width: 860px;
}

/* ---------- card ---------- */

.card {
  position: relative;
  padding: clamp(28px, 4.5vw, 46px);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

/* Neon corner brackets echoing the logo's own red-over-white colouring:
   a red strip runs across the top edge and down each side, a white strip
   runs across the bottom edge and up each side. Instead of a hard cutoff
   at the midpoint, each strip's mask fades out over a band straddling the
   middle (35%–65%), so the two overlap there — semi-transparent red over
   semi-transparent white — and blend into a soft glow instead of visibly
   meeting. Built as real borders (so they follow the card's own rounded
   corners perfectly, no distortion) with a static drop-shadow glow on
   top — one paint cost, not a per-frame one, so it costs nothing on
   scroll. */
.neon-edge {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2.5px solid transparent;
  pointer-events: none;
}

.neon-edge.neon-top {
  border-top-color: var(--red-light);
  border-left-color: var(--red-light);
  border-right-color: var(--red-light);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 65%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 65%, transparent 100%);
  filter:
    drop-shadow(0 0 4px rgba(255, 107, 116, 0.85))
    drop-shadow(0 0 12px rgba(239, 59, 71, 0.45))
    drop-shadow(0 0 24px rgba(239, 59, 71, 0.2));
}

.neon-edge.neon-bottom {
  border-bottom-color: #fff;
  border-left-color: #fff;
  border-right-color: #fff;
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 35%, transparent 65%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, #000 35%, transparent 65%, transparent 100%);
  filter:
    drop-shadow(0 0 4px rgba(255, 255, 255, 0.8))
    drop-shadow(0 0 12px rgba(255, 255, 255, 0.35))
    drop-shadow(0 0 22px rgba(255, 255, 255, 0.15));
}

/* ---------- single hero card (logo → text → CTA → Instagram → social) ---------- */

.hero-single { display: flex; flex-direction: column; }

.hero-divider {
  height: 1px;
  margin: clamp(26px, 4vw, 34px) 0;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

.insta-block { display: flex; flex-direction: column; }

.section-head.centered { text-align: center; }

.brand {
  text-align: left;
}

.logo-link {
  display: inline-block;
  text-decoration: none;
}

.logo {
  display: block;
  width: min(62%, 260px);
  height: auto;
  margin: 0 0 22px;
}

.brand.centered,
.legal-card {
  text-align: center;
}

.brand.centered .logo,
.legal-card .logo {
  margin: 0 auto 22px;
}

h1 {
  margin: 0 0 14px;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.12;
  letter-spacing: -.03em;
  font-weight: 800;
}

h1 .accent {
  background: linear-gradient(100deg, var(--red-light), var(--red) 60%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.message {
  margin: 0;
  max-width: 48ch;
  color: var(--muted);
  font-size: clamp(15.5px, 1.6vw, 17px);
  line-height: 1.65;
}

.brand.centered .message,
.legal-card .lede {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- actions ---------- */

.actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 26px;
}

/* ---------- Cardmarket rating (manually maintained — see admin/rating.php) ---------- */

.cardmarket-rating {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

/* Same equal-specificity gotcha caught before: "display: flex" above would
   otherwise beat the browser's built-in "[hidden] { display: none }" rule. */
.cardmarket-rating[hidden] { display: none; }

/* Not a link — the Cardmarket button right above it already covers that —
   just a small static pill, with a subtle hover for a bit of life. */
.cardmarket-rating-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line-strong);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  transition: border-color var(--dur-med) var(--ease-slow),
              background var(--dur-med) var(--ease-slow),
              color var(--dur-med) var(--ease-slow);
}

.cardmarket-rating-link:hover {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.075);
  color: var(--ink);
}

.cardmarket-stars { display: inline-flex; gap: 1px; flex: 0 0 auto; }
.cardmarket-stars svg { width: 13px; height: 13px; }
.cardmarket-stars svg.is-filled { color: var(--red-light); }
.cardmarket-stars svg.is-empty { color: var(--line-strong); }

.button {
  position: relative;
  min-height: 54px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.045);
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-med) var(--ease-slow),
              border-color var(--dur-med) var(--ease-slow),
              background var(--dur-med) var(--ease-slow);
}

.button:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.075);
}

.button:active { transform: translateY(0); }

.button:focus-visible {
  outline: 3px solid rgba(239, 59, 71, 0.35);
  outline-offset: 3px;
}

.button.primary {
  color: #fff;
  background: linear-gradient(135deg, var(--red-light), var(--red) 55%, var(--red-dark));
  border-color: transparent;
  box-shadow: 0 14px 30px rgba(239, 59, 71, 0.25);
}

.button.primary:hover {
  box-shadow: 0 18px 38px rgba(239, 59, 71, 0.34);
}

/* Subtle white sheen that sweeps across the button every few seconds, then
   sits idle off-screen the rest of the time — kept slow/soft/rare on
   purpose so it reads as a quiet detail, not a distracting loop. */
.button.shine {
  overflow: hidden;
}

.button.shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  animation: button-shine 7s ease-in-out infinite;
}

@keyframes button-shine {
  0% { left: -60%; }
  55% { left: 130%; }
  100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
  .button.shine::after { animation: none; }
}

.button-mark {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  flex: 0 0 auto;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}

.button-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Only one button in this row (Instagram now sits right under its own
   widget instead of sharing a row with WhatsApp) — center it and keep its
   footprint the same size a button had when there were two side by side,
   instead of letting it stretch across the whole row. */
.button-row.single {
  display: flex;
  justify-content: center;
}
.button-row.single > * {
  flex: 0 1 calc(50% - 6px);
}

/* Brand-tinted background + glow per network, badge icon carries the brand
   colour so the buttons read as "Instagram" / "WhatsApp" at a glance. */
.button.insta {
  background: linear-gradient(135deg, rgba(214, 41, 118, 0.12), rgba(150, 47, 191, 0.1));
}
.button.insta:hover {
  border-color: rgba(240, 92, 130, 0.55);
  box-shadow: 0 14px 28px rgba(191, 47, 150, 0.22);
}

.button.whatsapp {
  background: rgba(37, 211, 102, 0.1);
}
.button.whatsapp:hover {
  border-color: rgba(70, 200, 130, 0.55);
  box-shadow: 0 14px 28px rgba(37, 211, 102, 0.2);
}

.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  flex: 0 0 auto;
  color: #fff;
}

.insta-badge {
  background: radial-gradient(circle at 30% 110%, #feda75, #fa7e1e 25%, #d62976 55%, #962fbf 75%, #4f5bd5 100%);
}

.whatsapp-badge { background: #25d366; }

.icon-badge .icon { width: 15px; height: 15px; }

.icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

@media (max-width: 420px) {
  .button-row { grid-template-columns: 1fr; }
  .button-row.single > * { flex-basis: 100%; }
}

/* ---------- WhatsApp: choose-a-topic dropdown ----------
   wa.me links only ever carry one fixed message, so the choice has to
   happen on our own page before WhatsApp opens at all — a small popover
   under the button rather than a second click-through page. */

.whatsapp-wrap { position: relative; }

/* Our own "display: flex" below has the same specificity as the browser's
   built-in "[hidden] { display: none }" rule, and author styles win ties
   — so without this line the menu ignored the hidden attribute entirely
   and rendered open from the start. */
.whatsapp-menu[hidden] { display: none; }

.button.whatsapp[aria-expanded="true"] {
  border-color: rgba(70, 200, 130, 0.55);
  background: rgba(37, 211, 102, 0.1);
}

.whatsapp-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 10px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
  transform-origin: top center;
  animation: whatsapp-menu-in var(--dur-med) var(--ease-slow);
}

.whatsapp-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 13px;
  border-radius: 9px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
  text-decoration: none;
  transition: background var(--dur-med) var(--ease-slow);
}

.whatsapp-menu a svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--muted-2);
  transition: color var(--dur-med) var(--ease-slow), transform var(--dur-med) var(--ease-slow);
}

.whatsapp-menu a:hover,
.whatsapp-menu a:focus-visible {
  background: rgba(37, 211, 102, 0.12);
}

.whatsapp-menu a:hover svg,
.whatsapp-menu a:focus-visible svg {
  color: #25d366;
  transform: translateX(3px);
}

.whatsapp-menu a:focus-visible {
  outline: 2px solid rgba(37, 211, 102, 0.5);
  outline-offset: -2px;
}

@keyframes whatsapp-menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-menu { animation: none; }
}

/* ---------- instagram widget ---------- */

.section-head {
  margin-bottom: 16px;
}

.section-head h2 {
  margin: 0 0 4px;
  font-size: clamp(18px, 2vw, 21px);
  font-weight: 800;
  letter-spacing: -.02em;
}

.section-head p {
  margin: 0;
  color: var(--muted-2);
  font-size: 13.5px;
}

.insta-frame {
  border-radius: var(--radius-md);
  overflow-x: hidden;
  border: 1px solid var(--line);
  background: #0f0f11;
  line-height: 0;
  /* Found the actual root cause of the "black box under the widget" bug:
     this used to carry a fixed min-height (340px on phones) as a
     loading-state placeholder. LightWidget sets its OWN iframe's height
     via inline style once it has real content, and on narrower screens
     that real height is often well under 340px (fewer photos fit before
     it needs to grow). The container's dark background (#0f0f11) then
     showed through in the leftover gap below the actual widget — reading
     exactly like a broken empty box, even though the widget itself was
     fine. No min-height at all: the frame now sizes purely to the real
     widget content, so there's nothing for the background to show
     through. It briefly has zero height before the widget's script sets
     one, instead of a wrong, too-tall placeholder.
     A max-height (with overflow-y: auto, not hidden) is kept as a safety
     net for the opposite, genuinely-seen failure mode — LightWidget
     reporting a wildly oversized height while stuck loading. If the feed
     really is taller than this, it's still all there, just scrollable. */
  max-height: 640px;
  overflow-y: auto;
}

.insta-frame .lightwidget-widget,
.insta-frame iframe {
  width: 100% !important;
  border: 0;
  display: block;
}

/* ---------- "sell your cards" static block ---------- */

.sell-block { text-align: center; }

.sell-block .section-head { margin-bottom: 10px; }

.sell-text {
  margin: 0 auto;
  max-width: 46ch;
  color: var(--muted);
  font-size: clamp(14.5px, 1.5vw, 16px);
  line-height: 1.65;
}

/* ---------- latest posts (featured + slider) ---------- */

.posts-section .section-head { margin-bottom: 20px; }

.posts-featured {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 22px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

@media (min-width: 680px) {
  .posts-featured {
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    padding: 22px;
  }
}

.posts-featured-media {
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #0f0f11;
  /* Always this fixed ratio, regardless of the actual photo's own shape —
     a very tall/narrow "Beitragsbild" used to inflate this whole card to
     its own proportions (aspect-ratio was previously set inline per post
     in script.js). object-fit: cover below then center-crops to fill this
     box; the admin's crop tool lets a tall/unusually-shaped photo be
     reframed by hand if that automatic centering isn't ideal. The full,
     uncropped photo is always still shown on the post's own detail page. */
  aspect-ratio: 16 / 11;
  /* .posts-featured is a grid container, and grid items get the same
     implicit min-height:auto as flex items — same fix as .posts-slide-media
     below, and for the same reason. */
  min-height: 0;
  display: grid;
  place-items: center;
}

/* Same equal-specificity gotcha as the WhatsApp popover and the admin
   role dropdown: our own "display: grid" above would otherwise beat the
   browser's built-in "[hidden] { display: none }" rule (used by the
   admin post-preview when there's no image yet). */
.posts-featured-media[hidden] { display: none; }

.posts-featured-media a {
  display: block;
  width: 100%;
  height: 100%;
}

.posts-featured-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.posts-featured-body { display: flex; flex-direction: column; gap: 8px; }

.posts-tag {
  align-self: flex-start;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--red-light);
}

.posts-featured-body h3 {
  margin: 0;
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.25;
}

.posts-featured-body p {
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}

.posts-date {
  color: var(--muted-2);
  font-size: 12.5px;
}

.post-views {
  color: var(--muted-2);
}

/* ---------- "Jetzt weiterlesen" readmore link ----------
   Red by default, wipes to white left-to-right on hover (a second white
   copy of the label is clipped behind the red one and its width grows
   0% → 100%), with a faint neon glow that fades in on hover. Only
   width/filter/transform are transitioned — no layout thrash. */

.readmore {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.005em;
  filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
  transition: filter var(--dur-med) var(--ease-slow);
}

.readmore-text {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.readmore-base {
  color: var(--red-light);
}

.readmore-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  overflow: hidden;
  color: #fff;
  white-space: nowrap;
  transition: width var(--dur-med) var(--ease-slow);
}

.readmore-arrow {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--red-light);
  transition: transform var(--dur-med) var(--ease-slow), color var(--dur-med) var(--ease-slow);
}

.readmore:hover .readmore-fill,
.readmore:focus-visible .readmore-fill {
  width: 100%;
}

.readmore:hover .readmore-arrow,
.readmore:focus-visible .readmore-arrow {
  color: #fff;
  transform: translateX(4px);
}

.readmore:hover,
.readmore:focus-visible {
  filter:
    drop-shadow(0 0 3px rgba(255, 255, 255, 0.55))
    drop-shadow(0 0 8px rgba(239, 59, 71, 0.3));
}

.readmore:focus-visible {
  outline: 2px solid rgba(239, 59, 71, 0.4);
  outline-offset: 4px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .readmore, .readmore-fill, .readmore-arrow { transition: none; }
}

.posts-slider-wrap { position: relative; }

.posts-slider {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  margin: 0 -2px;
  -webkit-overflow-scrolling: touch;
}

.posts-slider::-webkit-scrollbar { height: 6px; }
.posts-slider::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }

.posts-slide {
  flex: 0 0 auto;
  width: min(78vw, 240px);
  scroll-snap-align: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.posts-slide-media {
  display: block;
  aspect-ratio: 4 / 3;
  background: #0f0f11;
  /* .posts-slide is a column flex container, and flex items get an implicit
     min-height:auto — without overriding it, a very tall/narrow photo's own
     natural size (via the 100%-height img inside) can win over this fixed
     aspect-ratio and stretch the card way taller than every other card. */
  min-height: 0;
  overflow: hidden;
}

.posts-slide-media img {
  width: 100%;
  height: 100%;
  /* cover, not contain — this box's ratio is fixed (above) regardless of
     the photo's own shape, so every card in the row stays the same size;
     cover centers and fills it instead of leaving big empty letterbox
     bars for a differently-shaped photo. The admin's crop tool lets a
     photo be reframed by hand if the automatic centering isn't ideal,
     and the full, uncropped photo is always still shown on the post's
     own detail page. */
  object-fit: cover;
  display: block;
}

.posts-slide-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 5px; }
.posts-slide-body strong { font-size: 14px; font-weight: 700; line-height: 1.3; }

.posts-nav {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}

.posts-nav button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-med) var(--ease-slow), border-color var(--dur-med) var(--ease-slow);
}

.posts-nav button:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--line-strong); }
.posts-nav button:disabled { opacity: .35; cursor: default; }
.posts-nav svg { width: 17px; height: 17px; }

/* ---------- footer ---------- */

footer {
  text-align: center;
  padding-top: 8px;
  color: var(--muted-2);
  font-size: 13px;
  line-height: 1.7;
}

footer a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-med) var(--ease-slow), border-color var(--dur-med) var(--ease-slow);
}

footer a:hover {
  color: var(--ink);
  border-color: var(--line-strong);
}

.legal-links { display: block; margin-top: 6px; }
.legal-links span { margin: 0 8px; color: var(--line-strong); }

/* ---------- legal pages ---------- */

.legal-card h1 { margin-bottom: 6px; }

.legal-card .lede {
  margin: 0 0 30px;
  color: var(--muted-2);
  font-size: 14px;
}

.legal-card h2 {
  margin: 30px 0 8px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.legal-card h2:first-of-type { margin-top: 8px; }

.legal-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
  font-size: 15px;
}

.legal-card a { color: #fff; text-underline-offset: 3px; }

/* ---------- rich text content ("Über uns", edited in admin/about.php) ----------
   Only ever printed after pw_sanitize_html() has run on it — see that
   function's own comment for the exact allowlist this matches. */

.about-content { text-align: left; }

.about-content > *:first-child { margin-top: 0; }

.about-content h2 {
  margin: 28px 0 10px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
}

.about-content h3 {
  margin: 24px 0 8px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
}

.about-content h4 {
  margin: 20px 0 6px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
}

.about-content p {
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.75;
  font-size: 15px;
}

.about-content ul,
.about-content ol {
  margin: 0 0 14px;
  padding-left: 22px;
  color: var(--muted);
  line-height: 1.75;
  font-size: 15px;
}

.about-content li { margin-bottom: 4px; }

.about-content blockquote {
  margin: 0 0 14px;
  padding: 4px 0 4px 16px;
  border-left: 3px solid var(--red-light);
  color: var(--muted-2);
  font-style: italic;
}

.about-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 18px auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}

.about-content strong { color: var(--ink); }

/* Quill's own formatting classes (kept as-is by the sanitizer) */
.about-content .ql-size-small { font-size: 12.5px; }
.about-content .ql-size-large { font-size: 19px; }
.about-content .ql-size-huge { font-size: 24px; }
.about-content .ql-align-center { text-align: center; }
.about-content .ql-align-right { text-align: right; }
.about-content .ql-align-justify { text-align: justify; }

.back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 38px;
  color: #fff;
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
  transition: gap var(--dur-med) var(--ease-slow), color var(--dur-med) var(--ease-slow);
}

.back:hover { color: var(--red-light); gap: 12px; }

/* ---------- post detail page (beitrag.php) ---------- */

.back-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  color: var(--muted);
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
  transition: color var(--dur-med) var(--ease-slow), gap var(--dur-med) var(--ease-slow);
}

.back-top svg { width: 16px; height: 16px; flex: 0 0 auto; }

.back-top:hover { color: var(--ink); gap: 11px; }

.post-detail .posts-date { display: block; margin-bottom: 8px; }

.post-detail h1 {
  font-size: clamp(24px, 3.4vw, 34px);
  margin-bottom: 20px;
}

.post-detail-media {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #0f0f11;
  /* max-height caps a tall/portrait image, which then shrinks the box's
     own width to keep its aspect-ratio — without auto side margins that
     narrower box just sits flush-left instead of centred in the card. */
  margin: 0 auto 24px;
  max-height: 70vh;
  max-width: 100%;
  display: grid;
  place-items: center;
}

.post-detail-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  cursor: zoom-in;
}

.post-detail-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.75;
}

.post-detail-body p { margin: 0; }

.post-detail-body h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
}

.post-detail-body h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
}

.post-detail-body h4 {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
}

.post-detail-body ul,
.post-detail-body ol {
  margin: 0;
  padding-left: 22px;
}

.post-detail-body li { margin-bottom: 4px; }

.post-detail-body blockquote {
  margin: 0;
  padding: 4px 0 4px 16px;
  border-left: 3px solid var(--red-light);
  color: var(--muted-2);
  font-style: italic;
}

.post-detail-body strong { color: var(--ink); }

/* Quill's own alignment classes (kept as-is by the sanitizer) */
.post-detail-body .ql-align-center { text-align: center; }
.post-detail-body .ql-align-right { text-align: right; }
.post-detail-body .ql-align-justify { text-align: justify; }

/* ---------- post detail: previous/next navigation ---------- */

.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 34px;
}

.post-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.045);
  color: var(--ink);
  text-decoration: none;
  transition: transform var(--dur-med) var(--ease-slow),
              border-color var(--dur-med) var(--ease-slow),
              background var(--dur-med) var(--ease-slow);
}

.post-nav-link:hover,
.post-nav-link:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.075);
}

.post-nav-link:focus-visible {
  outline: 2px solid rgba(239, 59, 71, 0.4);
  outline-offset: 2px;
}

.post-nav-next { grid-column: 2; justify-content: flex-end; text-align: right; }

.post-nav-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.post-nav-text small {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.post-nav-text strong {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-nav-link svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--red-light);
  transition: transform var(--dur-med) var(--ease-slow);
}

.post-nav-prev:hover svg,
.post-nav-prev:focus-visible svg { transform: translateX(-3px); }
.post-nav-next:hover svg,
.post-nav-next:focus-visible svg { transform: translateX(3px); }

@media (max-width: 560px) {
  .post-nav { grid-template-columns: 1fr; }
  .post-nav-next { grid-column: 1; justify-content: flex-start; text-align: left; }
}

/* ---------- mobile / tablet refinements ---------- */

@media (max-width: 768px) {
  .posts-featured-media { aspect-ratio: 4 / 3; }
  .post-detail-media { max-height: 55vh; }
}

@media (max-width: 480px) {
  .posts-slide { width: min(84vw, 240px); }
  .readmore { font-size: 13.5px; }
}

/* ---------- lightbox: click a post image to see it large ----------
   One overlay, reused for every post image (homepage cards, detail page,
   admin preview) — created once by JS and toggled via the [hidden]
   attribute rather than added/removed from the DOM each time. */

.pw-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  background: rgba(6, 6, 8, 0.92);
  backdrop-filter: blur(3px);
  cursor: zoom-out;
  animation: pw-lightbox-in 0.18s ease-out;
}

.pw-lightbox[hidden] { display: none; }

@keyframes pw-lightbox-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.pw-lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  cursor: default;
}

.pw-lightbox-close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  transition: background var(--dur-med) var(--ease-slow);
}

.pw-lightbox-close:hover,
.pw-lightbox-close:focus-visible { background: rgba(255, 255, 255, 0.18); }

.pw-lightbox-close svg { width: 20px; height: 20px; }