/* ==========================================================================
   premium.css — Design-Elevation-Layer für frauenarztpraxis-fiege.de
   Wird NACH der bestehenden Tailwind-Datei geladen und verfeinert Tokens,
   Typografie, Header, Karten, Footer und Micro-Interactions.
   Rein additiv: kein bestehendes Markup wird vorausgesetzt außer den
   dokumentierten Utility-Klassen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — wärmere Bühne, satteres Aubergine, Rosé-Flächen, Champagner
   -------------------------------------------------------------------------- */
:root {
  /* Bestehende Markenwerte verfeinern (gleiche Namen -> greifen überall) */
  --color-buehne: oklch(98.2% 0.007 355);       /* warmes Papierweiß, Hauch Rosé */
  --color-chip: oklch(95.6% 0.014 351);          /* weiche Rosé-Oberfläche */
  --color-aubergine: oklch(25.5% 0.088 350.5);   /* tiefer, satter */
  --color-plum: oklch(44% 0.15 349.5);
  --color-magenta: oklch(58.5% 0.24 358.2);
  --color-magenta-hover: oklch(51.5% 0.215 359.2);
  --color-ink: oklch(32.5% 0.03 347);
  --color-muted: oklch(52% 0.035 347);

  /* Neue Premium-Tokens */
  --pv-gold: oklch(76% 0.085 82);                /* Champagner-Akzent */
  --pv-gold-soft: oklch(88% 0.05 85);
  --pv-rose: oklch(93.5% 0.03 353);              /* Rosé-Band */
  --pv-hairline: oklch(27% 0.084 352.8 / 0.12);
  --pv-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pv-shadow-card:
    0 1px 2px oklch(25.5% 0.088 350.5 / 0.05),
    0 10px 30px -14px oklch(25.5% 0.088 350.5 / 0.16);
  --pv-shadow-card-hover:
    0 2px 4px oklch(25.5% 0.088 350.5 / 0.06),
    0 20px 44px -16px oklch(25.5% 0.088 350.5 / 0.26);
  --pv-shadow-cta:
    0 1px 2px oklch(40% 0.2 358 / 0.25),
    0 10px 24px -10px oklch(58.5% 0.24 358.2 / 0.5);
}

/* --------------------------------------------------------------------------
   2. Basis — Auswahl, Fokus, Scroll, TextRendering
   -------------------------------------------------------------------------- */
::selection {
  background: color-mix(in oklch, var(--color-magenta), white 78%);
  color: var(--color-aubergine);
}

:focus-visible {
  outline: 2px solid var(--color-magenta);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Dezente Papier-Textur auf der Bühne (Vignette, kein Bild nötig) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(120% 60% at 50% -10%, oklch(96% 0.02 353 / 0.9), transparent 60%),
    radial-gradient(90% 50% at 100% 110%, oklch(94% 0.03 353 / 0.5), transparent 55%);
}

/* --------------------------------------------------------------------------
   3. Editorial-Typografie — Fraunces, fluid, eng gesperrt
   -------------------------------------------------------------------------- */
main h1, main h2, main h3, main h4 {
  font-family: var(--font-serif);
  font-weight: 390;
  letter-spacing: -0.018em;
  color: var(--color-aubergine);
  text-wrap: balance;
}

main h1[class] {
  font-size: clamp(2.2rem, 1.55rem + 3vw, 3.9rem);
  line-height: 1.05;
  letter-spacing: -0.022em;
  font-variation-settings: "opsz" 100, "SOFT" 40, "wght" 390;
}

main h2[class] {
  font-size: clamp(1.6rem, 1.35rem + 1.15vw, 2.2rem);
  line-height: 1.14;
  font-variation-settings: "opsz" 60, "SOFT" 35, "wght" 400;
}

main h3[class] {
  font-size: clamp(1.18rem, 1.08rem + 0.45vw, 1.4rem);
  line-height: 1.25;
  font-variation-settings: "opsz" 40, "SOFT" 30, "wght" 430;
}

main p { max-inline-size: 65ch; }

/* Lede: erster größerer Absatz nach h1 */
main p[class*="text-lg"] {
  font-size: clamp(1.08rem, 1rem + 0.35vw, 1.22rem);
  line-height: 1.6;
  color: oklch(38% 0.04 349);
}

/* Serifen-Zitatzeile (große p mit font-serif auf der Startseite) */
main p[class*="font-serif"] {
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.35;
  text-wrap: balance;
}

/* Feine Champagner-Linie über h2-Blöcken im Fließtext (nur Desktop, subtil) */
@media (min-width: 1024px) {
  main h2[class*="mt-10"] { margin-top: 3.4rem; }
}

/* --------------------------------------------------------------------------
   4. Header — Glas auf Scroll, Nav-Underline, CTA-Upgrade
   -------------------------------------------------------------------------- */
header.sticky {
  transition:
    background-color 260ms var(--pv-ease),
    box-shadow 260ms var(--pv-ease),
    border-color 260ms var(--pv-ease);
}

header.sticky.is-scrolled {
  background: color-mix(in oklch, var(--color-buehne), transparent 18%);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border-bottom-color: var(--pv-hairline);
  box-shadow: 0 1px 0 oklch(100% 0 0 / 0.6) inset,
    0 12px 32px -18px oklch(25.5% 0.088 350.5 / 0.28);
}

/* Logo-Typo im Header etwas edler */
header .font-serif { letter-spacing: -0.01em; }

/* Desktop-Nav: animierte Unterstreichung */
header nav[aria-label="Hauptnavigation"] > a {
  position: relative;
  padding-block: 4px;
}

header nav[aria-label="Hauptnavigation"] > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-magenta), color-mix(in oklch, var(--color-magenta), var(--pv-gold) 35%));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 240ms var(--pv-ease);
}

header nav[aria-label="Hauptnavigation"] > a:hover::after,
header nav[aria-label="Hauptnavigation"] > a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Telefon-Link: kein Underline-Balken */
header nav[aria-label="Hauptnavigation"] > a[href^="tel:"]::after { content: none; }

/* Header-CTA „Termin": zarter Verlauf, Schatten, Hover-Lift */
header nav[aria-label="Hauptnavigation"] > a[class*="bg-[var(--color-magenta)]"] {
  background: linear-gradient(160deg,
    color-mix(in oklch, var(--color-magenta), white 10%),
    var(--color-magenta) 55%,
    color-mix(in oklch, var(--color-magenta), black 10%));
  box-shadow: var(--pv-shadow-cta);
  padding-inline: 1.05rem;
  transition: transform 200ms var(--pv-ease), box-shadow 200ms var(--pv-ease), filter 200ms var(--pv-ease);
}

header nav[aria-label="Hauptnavigation"] > a[class*="bg-[var(--color-magenta)]"]:hover {
  transform: translateY(-1.5px);
  filter: brightness(1.04);
  box-shadow:
    0 2px 4px oklch(40% 0.2 358 / 0.25),
    0 16px 32px -12px oklch(58.5% 0.24 358.2 / 0.55);
}

header nav[aria-label="Hauptnavigation"] > a[class*="bg-[var(--color-magenta)]"]::after { content: none; }

/* Mobiles Dropdown etwas wertiger */
header details nav {
  border-color: var(--pv-hairline) !important;
  box-shadow: var(--pv-shadow-card-hover);
}

/* --------------------------------------------------------------------------
   5. Buttons & Links — konsistente Micro-Interactions
   -------------------------------------------------------------------------- */
main a[class*="bg-[var(--color-magenta)]"] {
  background: linear-gradient(165deg,
    color-mix(in oklch, var(--color-magenta), white 9%),
    var(--color-magenta) 55%,
    color-mix(in oklch, var(--color-magenta), black 12%));
  box-shadow: var(--pv-shadow-cta);
  letter-spacing: 0.005em;
  transition: transform 200ms var(--pv-ease), box-shadow 200ms var(--pv-ease), filter 200ms var(--pv-ease);
}

main a[class*="bg-[var(--color-magenta)]"]:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow:
    0 2px 5px oklch(40% 0.2 358 / 0.28),
    0 18px 36px -12px oklch(58.5% 0.24 358.2 / 0.55);
}

main a[class*="bg-[var(--color-magenta)]"]:active { transform: translateY(0); }

/* Text-Links im Fließtext: ruhige Magenta-Unterstreichung */
main p a:not([class]), main li a:not([class]) {
  color: var(--color-plum);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--color-magenta), transparent 55%);
  text-underline-offset: 3px;
  transition: text-decoration-color 180ms ease, color 180ms ease;
}

main p a:not([class]):hover, main li a:not([class]):hover {
  color: var(--color-magenta);
  text-decoration-color: var(--color-magenta);
}

/* --------------------------------------------------------------------------
   6. Karten — Hairline, Schichtschatten, Hover-Lift, Magenta-Kante
   -------------------------------------------------------------------------- */
main a[class*="rounded-xl"][class*="border"],
main article[class*="rounded-xl"],
main div[class*="rounded-xl"][class*="border"],
main section.fakten {
  position: relative;
  border-color: var(--pv-hairline);
  background: color-mix(in oklch, white, var(--color-buehne) 30%);
  box-shadow: var(--pv-shadow-card);
  transition:
    transform 240ms var(--pv-ease),
    box-shadow 240ms var(--pv-ease),
    border-color 240ms var(--pv-ease),
    background-color 240ms var(--pv-ease);
  overflow: hidden;
}

/* 2px-Akzentlinie oben, erscheint beim Hover */
main a[class*="rounded-xl"][class*="border"]::before,
main article[class*="rounded-xl"]::before,
main div[class*="rounded-xl"][class*="border"]::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--color-magenta),
    color-mix(in oklch, var(--color-magenta), var(--pv-gold) 45%));
  opacity: 0;
  transform: scaleX(0.4);
  transform-origin: left center;
  transition: opacity 260ms var(--pv-ease), transform 340ms var(--pv-ease);
}

@media (hover: hover) {
  main a[class*="rounded-xl"][class*="border"]:hover,
  main article[class*="rounded-xl"]:hover,
  main div[class*="rounded-xl"][class*="border"]:hover {
    transform: translateY(-3px);
    box-shadow: var(--pv-shadow-card-hover);
    border-color: color-mix(in oklch, var(--color-magenta), transparent 62%);
    background: white;
  }

  main a[class*="rounded-xl"][class*="border"]:hover::before,
  main article[class*="rounded-xl"]:hover::before,
  main div[class*="rounded-xl"][class*="border"]:hover::before {
    opacity: 1;
    transform: scaleX(1);
  }
}

/* Ausnahme: Infoboxen mit Chip-Hintergrund (kein weißer Sprung nötig) */
main div[class*="rounded-xl"][class*="bg-[var(--color-chip)]"] {
  background: var(--color-chip);
}

/* Transparente Schleife: kein rechteckiger Bildschatten um die PNG/WebP-Fläche */
main img[src*="schleife."] {
  box-shadow: none;
}

/* Aubergine-Panel (Hero-Box): reicherer Verlauf + feiner Innenrand */
main div[class*="bg-[var(--color-aubergine)]"] {
  background:
    radial-gradient(130% 90% at 85% -10%, oklch(36% 0.11 352 / 0.85), transparent 55%),
    linear-gradient(160deg,
      color-mix(in oklch, var(--color-aubergine), white 6%),
      var(--color-aubergine) 60%,
      color-mix(in oklch, var(--color-aubergine), black 14%));
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.07),
    0 24px 48px -20px oklch(25.5% 0.088 350.5 / 0.55);
}

/* Karten-Links: Pfeil-Affordanz für Titelzeilen */
main a[class*="rounded-xl"][class*="border"] > span:first-child::after {
  content: "→";
  display: inline-block;
  margin-left: 0.4em;
  color: var(--color-magenta);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 220ms var(--pv-ease), transform 220ms var(--pv-ease);
}

main a[class*="rounded-xl"][class*="border"]:hover > span:first-child::after {
  opacity: 1;
  transform: translateX(0);
}

/* --------------------------------------------------------------------------
   7. Bilder — weiche Rahmen, Zoom im Frame
   -------------------------------------------------------------------------- */
main img[class*="rounded-2xl"], main img[class*="rounded-xl"] {
  box-shadow:
    0 1px 2px oklch(25.5% 0.088 350.5 / 0.08),
    0 24px 48px -24px oklch(25.5% 0.088 350.5 / 0.28);
}

/* Hero-Foto-Frame (wird per HTML-Edit um das Teamfoto gelegt) */
.pv-hero-frame {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  margin-top: 3rem;
  box-shadow:
    0 2px 4px oklch(25.5% 0.088 350.5 / 0.07),
    0 32px 64px -28px oklch(25.5% 0.088 350.5 / 0.4);
}

.pv-hero-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0 !important;
  margin-top: 0 !important;
  box-shadow: none !important;
  transition: transform 900ms var(--pv-ease);
  will-change: transform;
}

@media (hover: hover) {
  .pv-hero-frame:hover img { transform: scale(1.02); }
}

.pv-hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(180deg, transparent 62%, oklch(25.5% 0.088 350.5 / 0.22)),
    radial-gradient(120% 80% at 50% 120%, oklch(58.5% 0.24 358.2 / 0.10), transparent 60%);
  box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.18);
}

/* Trust-Chips unter den Hero-CTAs */
.pv-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.625rem;
  margin-top: 1.4rem;
}

.pv-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 12.5px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--color-plum);
  background: color-mix(in oklch, white, var(--color-chip) 55%);
  border: 1px solid var(--pv-hairline);
  border-radius: 999px;
  padding: 0.4rem 0.8rem 0.4rem 0.55rem;
  box-shadow: 0 1px 2px oklch(25.5% 0.088 350.5 / 0.06);
}

.pv-chip svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--color-magenta);
}

.pv-chip > div { display: inline; }

/* --------------------------------------------------------------------------
   8. Sektions-Rhythmus
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  main[class*="py-10"] { padding-block: 4.5rem; }
  main section[class*="mt-16"] { margin-top: clamp(4.5rem, 7vw, 6.5rem); }
  main > p[class*="mt-16"] { margin-top: clamp(4.5rem, 7vw, 6rem); }
}

/* Feine Trennlinie unter dem Hero (nur wenn Grid-Sektion vorhanden) */
main section[class*="lg:grid-cols-12"] {
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* --------------------------------------------------------------------------
   9. Footer — Aubergine mit Glow, feine Links
   -------------------------------------------------------------------------- */
footer {
  position: relative;
  background:
    radial-gradient(90% 120% at 12% -20%, oklch(38% 0.11 352 / 0.6), transparent 55%),
    radial-gradient(70% 100% at 95% 120%, oklch(58.5% 0.24 358.2 / 0.14), transparent 60%),
    linear-gradient(175deg,
      color-mix(in oklch, var(--color-aubergine), white 4%),
      var(--color-aubergine) 55%,
      color-mix(in oklch, var(--color-aubergine), black 16%));
}

footer > div:first-child {
  /* Hairline oben: Magenta → Champagner Verlauf */
  background: linear-gradient(90deg,
    transparent,
    var(--color-magenta) 30%,
    color-mix(in oklch, var(--color-magenta), var(--pv-gold) 40%) 60%,
    transparent) !important;
  opacity: 0.85;
}

footer p[class*="font-serif"] {
  font-weight: 380;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

footer a {
  position: relative;
  transition: color 180ms ease;
  text-decoration: none;
}

footer a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0.5);
  transform-origin: left center;
  transition: opacity 200ms var(--pv-ease), transform 200ms var(--pv-ease);
}

footer a:hover::after { opacity: 0.6; transform: scaleX(1); }

/* --------------------------------------------------------------------------
   10. Details/Summary (FAQ) — ruhigere Flächen
   -------------------------------------------------------------------------- */
details {
  border-bottom: 1px solid var(--pv-hairline);
}

details > summary {
  font-weight: 500;
  color: var(--color-aubergine);
  transition: color 180ms ease;
}

details > summary:hover { color: var(--color-magenta); }

details[open] {
  background: color-mix(in oklch, var(--color-chip), white 55%);
  border-radius: 0.75rem;
}

/* Tabellen (Sprechzeiten etc.) feiner */
main table td, main table th {
  border-bottom: 1px solid var(--pv-hairline);
  padding-block: 0.55rem;
}

main table tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   11. Scroll-Reveal (nur mit JS; Reduced-Motion komplett aus)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .pv-js .pv-reveal {
    opacity: 0;
    transform: translateY(22px);
  }

  .pv-js .pv-reveal.pv-in {
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity 640ms var(--pv-ease),
      transform 640ms var(--pv-ease);
  }
}

/* --------------------------------------------------------------------------
   12. Mobile Aktionsleiste (per JS eingefügt)
   -------------------------------------------------------------------------- */
.pv-actionbar {
  position: fixed;
  left: 0.875rem;
  right: 0.875rem;
  bottom: calc(0.875rem + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  gap: 0.625rem;
  padding: 0.625rem;
  border-radius: 1.1rem;
  background: color-mix(in oklch, var(--color-aubergine), transparent 6%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow:
    inset 0 1px 0 oklch(100% 0 0 / 0.08),
    0 18px 40px -12px oklch(20% 0.08 350 / 0.55);
  transform: translateY(0);
  opacity: 1;
  transition: transform 320ms var(--pv-ease), opacity 320ms var(--pv-ease);
}

.pv-actionbar.pv-hidden {
  transform: translateY(calc(100% + 1.5rem));
  opacity: 0;
  pointer-events: none;
}

.pv-actionbar a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 0.5rem;
  border-radius: 0.8rem;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.01em;
}

.pv-actionbar a svg { width: 17px; height: 17px; }

.pv-actionbar .pv-ab-call {
  color: oklch(92% 0.03 352);
  background: oklch(100% 0 0 / 0.08);
  border: 1px solid oklch(100% 0 0 / 0.14);
}

.pv-actionbar .pv-ab-termin {
  color: #fff;
  background: linear-gradient(165deg,
    color-mix(in oklch, var(--color-magenta), white 10%),
    var(--color-magenta) 60%,
    color-mix(in oklch, var(--color-magenta), black 10%));
  box-shadow: 0 8px 20px -8px oklch(58.5% 0.24 358.2 / 0.6);
}

@media (min-width: 1024px) {
  .pv-actionbar { display: none; }
}

/* Platz, damit die Leiste nichts verdeckt */
@media (max-width: 1023.98px) {
  .pv-js body { padding-bottom: 5.25rem; }
}

/* --------------------------------------------------------------------------
   13. Print — saubere Typografie, ohne Chrome
   -------------------------------------------------------------------------- */
@media print {
  header, footer, .pv-actionbar, .skip-link, body::before { display: none !important; }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
  }

  main { max-width: none !important; padding: 0 !important; }

  main h1, main h2, main h3 { color: #000 !important; letter-spacing: 0; }

  a { color: #000 !important; text-decoration: underline; }

  main a[class*="rounded-xl"], main article, main div[class*="rounded-xl"] {
    box-shadow: none !important;
    border: 1px solid #999 !important;
    break-inside: avoid;
  }

  img { max-width: 100% !important; }

  section, article, .fakten { break-inside: avoid; }
}

/* --------------------------------------------------------------------------
   14. Next-Level-Mikroanimationen — ruhig, seriös, thematisch passend
   -------------------------------------------------------------------------- */

/* 14.1 Seiten-Fade-in (nur Opazität — kein transform, damit position:fixed
   der Aktionsleiste/Top-Button nicht bricht) */
@media (prefers-reduced-motion: no-preference) {
  .pv-js body { animation: pv-page-in 480ms var(--pv-ease) both; }
  @keyframes pv-page-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

/* 14.2 Primär-CTA „atmet" — sehr subtiler Schattenpuls, pausiert bei Hover */
@media (prefers-reduced-motion: no-preference) {
  .pv-cta-breathe { animation: pv-breathe 5.5s ease-in-out 2.2s infinite; }
  .pv-cta-breathe:hover { animation-play-state: paused; }
  @keyframes pv-breathe {
    0%, 100% { box-shadow: 0 10px 24px -10px oklch(58.5% 0.24 358.2 / 0.5); }
    50%      { box-shadow: 0 15px 36px -10px oklch(58.5% 0.24 358.2 / 0.85); }
  }
}

/* 14.3 Ambient-Drift im Aubergine-Panel — langsam wandernder Glanz */
@media (prefers-reduced-motion: no-preference) {
  main div[class*="bg-[var(--color-aubergine)]"] {
    animation: pv-ambient 18s ease-in-out infinite alternate;
  }
  @keyframes pv-ambient {
    from { background-position: 0% 0%, 0% 0%; }
    to   { background-position: 9% 7%, 0% 0%; }
  }
}

/* 14.5 FAQ-Akkordeon — Chevron + weiches Auf-/Zuklappen (Höhe via JS) */
main details summary { position: relative; padding-right: 2rem; }
main details summary::after {
  content: "";
  position: absolute;
  right: 0.45rem;
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 1.6px solid var(--color-magenta);
  border-bottom: 1.6px solid var(--color-magenta);
  transform: translateY(-65%) rotate(45deg);
  transition: transform 300ms var(--pv-ease);
}
main details[open] summary::after {
  transform: translateY(-30%) rotate(225deg);
}
main details > *:not(summary) {
  animation: pv-detail-in 340ms var(--pv-ease);
}
@media (prefers-reduced-motion: reduce) {
  main details > *:not(summary) { animation: none; }
}
@keyframes pv-detail-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* 14.6 „Nach oben"-Button (von premium.js injiziert) */
.pv-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 60;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(67, 16, 42, 0.14);
  background: oklch(100% 0 0 / 0.85);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  color: var(--color-aubergine);
  cursor: pointer;
  box-shadow: 0 10px 24px -12px oklch(25.5% 0.088 350.5 / 0.35);
  opacity: 1;
  transform: none;
  transition: opacity 300ms var(--pv-ease), transform 300ms var(--pv-ease),
              color 200ms var(--pv-ease), border-color 200ms var(--pv-ease);
}
.pv-top:hover {
  color: var(--color-magenta);
  border-color: color-mix(in oklch, var(--color-magenta), transparent 55%);
  transform: translateY(-2px);
}
.pv-top.pv-hidden {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}
.pv-top svg { width: 17px; height: 17px; display: block; }
@media (max-width: 1023.98px) {
  .pv-top { bottom: 6rem; right: 1rem; } /* oberhalb der Aktionsleiste */
}
@media print {
  .pv-top { display: none !important; }
}