/* ============================================================
   Sonoma — LinkStack Theme  (Mobile First)
   Aufbau: Profilbild | Name | Bio | Socials | Links | Kontakt | Seiten
   ============================================================ */

:root {
  /* Akzentfarben — aus dem Profilbild */
  --pk-c1: #ff3b6b;
  --pk-c2: #ff8a3d;
  --pk-c3: #a855ff;

  --pk-bg:          #fbfbfd;
  --pk-card:        #ffffff;
  --pk-card-hover:  #f5f5f7;
  --pk-hairline:    rgba(0, 0, 0, 0.08);
  --pk-chip:        rgba(0, 0, 0, 0.05);
  --pk-chip-hover:  rgba(0, 0, 0, 0.09);
  --pk-shadow:      0 1px 2px rgba(0,0,0,.04), 0 5px 16px rgba(0,0,0,.06);
  --pk-shadow-hi:   0 2px 6px rgba(0,0,0,.06), 0 10px 26px rgba(0,0,0,.11);

  --pk-text:        #1d1d1f;
  --pk-text-dim:    #6e6e73;
  --pk-text-legal:  #57575c;
  --pk-accent:      #0071e3;

  --pk-width:       360px;
  --pk-radius:      980px;

  --pk-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
             "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --pk-ease: cubic-bezier(.25, .1, .25, 1);

  /* Ein Satz Werte fuer JEDE Interaktion auf der Seite — dadurch fuehlen
     sich Links, Icons, Teilen und Kontakt exakt gleich an.
     Die weiche Kurve laeuft schnell an und bremst lange aus. */
  --pk-ease-soft:    cubic-bezier(.22, 1, .36, 1);
  --pk-dur:          .45s;
  --pk-dur-press:    .13s;
  --pk-hover-scale:  1.035;
  --pk-press-scale:  .985;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Nahezu Schwarz, wie es TikTok und Instagram fuer OLED nutzen —
       dort bleiben die Pixel wirklich aus, statt dunkelgrau zu leuchten. */
    --pk-bg:         #060608;
    --pk-card:       #141519;
    --pk-card-hover: #1c1d22;
    --pk-hairline:   rgba(255,255,255,.115);
    --pk-chip:       rgba(255,255,255,.065);
    --pk-chip-hover: rgba(255,255,255,.105);
    --pk-shadow:     none;
    --pk-shadow-hi:  none;
    --pk-text:       #f5f5f7;
    --pk-text-dim:   #adadb4;
    --pk-text-legal: #8f8f96;
    --pk-accent:     #2997ff;
  }
}

/* ---------- Basis ---------- */
/* Beides noetig: iOS Safari ignoriert overflow-x allein auf body */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
  position: relative;
  display: flex;              /* Sticky-Footer-Technik */
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--pk-bg);
  color: var(--pk-text);
  font-family: var(--pk-font);
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: -.021em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Farbhalo — keine Ueberbreite mehr, Zentrum auf Hoehe des Profilbilds */
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Volle Breite, aber die Verlaeufe sind feste Ovale in Pixelmassen.
     Dadurch laufen sie von selbst aus und es entstehen keine sichtbaren
     Kanten — eine begrenzte Box haette links und rechts harte Raender. */
  height: 400px;
  z-index: 0;
  pointer-events: none;
  opacity: .30;
  background:
    radial-gradient(440px 240px at calc(50% - 120px) 48%, rgba(255,  59, 107, .38) 0%, transparent 74%),
    radial-gradient(440px 240px at calc(50% + 120px) 42%, rgba(168,  85, 255, .34) 0%, transparent 74%),
    radial-gradient(540px 280px at 50% 24%,              rgba(255, 138,  61, .26) 0%, transparent 76%);
  /* Oben weich einblenden, sonst entsteht am Viewport-Rand eine harte Kante */
  /* Viele Stuetzpunkte statt eines harten Knicks: auf OLED-Displays wird
     ein abrupter Uebergang in dunklen Farbwerten sonst als Streifen sichtbar. */
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%, rgba(0,0,0,.35) 8%, rgba(0,0,0,.75) 18%, #000 30%,
    rgba(0,0,0,.82) 52%, rgba(0,0,0,.5) 70%, rgba(0,0,0,.2) 86%, transparent 100%);
          mask-image: linear-gradient(180deg,
    transparent 0%, rgba(0,0,0,.35) 8%, rgba(0,0,0,.75) 18%, #000 30%,
    rgba(0,0,0,.82) 52%, rgba(0,0,0,.5) 70%, rgba(0,0,0,.2) 86%, transparent 100%);
}

/* Auf dem Handy ist die Flaeche klein — dieselbe Farbmenge wirkt dort
   deutlich massiver als auf dem Desktop. Deshalb hier zurueckhaltender. */
@media (prefers-color-scheme: dark) { body::before { opacity: .32; } }

/* Schwacher Gegenschein unten, damit die untere Seitenhaelfte nicht
   in flaches Schwarz kippt. Deutlich zurueckhaltender als oben. */
body::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 260px;
  z-index: 0;
  pointer-events: none;
  opacity: .09;
  background:
    radial-gradient(420px 240px at calc(50% - 120px) 100%, rgba(168,  85, 255, .40) 0%, transparent 74%),
    radial-gradient(420px 240px at calc(50% + 120px) 100%, rgba(255,  59, 107, .34) 0%, transparent 74%);
  -webkit-mask-image: linear-gradient(0deg, #000 0%, transparent 100%);
          mask-image: linear-gradient(0deg, #000 0%, transparent 100%);
}

/* ---------- Teilen-Button: aus dem Textfluss nehmen ---------- */
/* Sonst schiebt er den gesamten Inhalt nach unten. */
.sharediv {
  position: fixed !important;
  top: 14px;
  right: 14px;
  left: auto;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 50;
}

/* Beim Herunterscrollen schrumpft der Button zum Kreis.
   Animiert wird nur die Breite des Textes plus ein transform —
   Breite/Padding des Buttons selbst zu animieren ruckelt, weil der
   Browser dabei in jedem Bild das Layout neu berechnen muss. */
.sharediv .sharebutton,
.sharediv sharebutton {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0 !important;
  width: auto !important;
  height: 44px !important;
  line-height: 1 !important;
  padding: 0 14px !important;
  white-space: nowrap;
  transform: scale(1);
  transition: transform .34s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

.sharediv .sharebutton-mb {
  display: inline-block !important;
  overflow: hidden;
  max-width: 90px;
  opacity: 1;
  margin-left: 7px;
  vertical-align: middle;
  transition: max-width  .38s cubic-bezier(.22, 1, .36, 1),
              opacity    .22s linear,
              margin-left .38s cubic-bezier(.22, 1, .36, 1);
  will-change: max-width, opacity;
}

.sharediv.pk-compact .sharebutton-mb {
  max-width: 0;
  opacity: 0;
  margin-left: 0;
}

.sharediv.pk-compact .sharebutton,
.sharediv.pk-compact sharebutton { transform: scale(.94); }

.sharediv .share-icon { padding: 0 !important; margin: 0 !important; }

/* ---------- Container ---------- */
.container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;   /* bei wenig Inhalt optisch mittig statt oben klebend */
  width: 100%;
  max-width: 440px;
  /* dvh = tatsaechlich sichtbare Hoehe. Nur damit trifft die optische
     Mitte auch die Bildschirmmitte — mit lvh (Hoehe ohne Browserleiste)
     rutscht der Inhalt nach unten und oben entsteht zu viel Luft.
     Dass die Fusszeile trotzdem verdeckt bleibt, regelt ihr fester
     Abstand von 170px weiter unten. */
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  /* Unten mehr Polster als oben: bei zentriertem Inhalt verschiebt das
     den Block nach oben, hier um (120-24)/2 = 48px. Ein exakt mittig
     gesetzter Block wirkt optisch immer etwas zu tief. */
  padding: 24px 20px 120px;
  box-sizing: border-box;
  text-align: center;
}

/* LinkStack verschachtelt: .container > .row > .column > Inhalt.
   Die aeussere .row wird transparent gemacht, damit .column die
   eigentliche Layoutebene wird. Die Social-Reihe ist ebenfalls eine
   .row und darf davon nicht betroffen sein. */
.container > .row { display: contents; }

.container > .row > .column,
.container > .row > .column.columns {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 0 !important;   /* schlaegt das inline gesetzte margin-top: 5% */
}

/* Der verschachtelte zweite .container enthaelt nur den LinkStack-Hinweis,
   erbt aber meine Container-Polsterung und erzeugt 108px Leerraum. */
.container .container { display: none !important; }

/* LinkStack setzt per inline <style>: .description-parent { padding-bottom: 30px } */
.description-parent { padding-bottom: 0 !important; }
.description-parent * { margin-bottom: 0 !important; }
center { display: block; width: 100%; }

/* Abstaende zentral steuern: erst ALLE Nachfahren auf null, dann gezielt setzen.
   Noetig, weil LinkStack mehrfach verschachtelte Wrapper mit eigenen
   Abstaenden mitbringt, die ich nicht kenne. */
.container * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Leere Wrapper, die nur Luft erzeugen.
   Wichtig: Trennstriche sind absichtlich leer und muessen bleiben. */
.container > br { display: none !important; }

.container > div:empty:not(.pk-divider),
.container > p:empty:not(.pk-divider),
.container > span:empty:not(.pk-divider) { display: none !important; }

.column, .columns { width: 100%; box-sizing: border-box; }
.container > * { width: 100%; }

/* .column ist ein Flex-Container — ohne diese Regel schrumpfen die Kinder
   auf ihre Inhaltsbreite und die Buttons werden schmaler als die Linien. */
.container .column > *:not(img),
.container .column > .button-entrance,
.container .column > center { width: 100%; }

.button-entrance { width: 100%; display: block; }

/* ---------- Profilbild ---------- */
img.avatar, .avatar,
img#avatar, img.rounded-avatar,
img[alt="avatar"], img[class*="rounded-circle"],
.container .column > img,
.container img[alt="avatar"] {
  display: block;
  width: 104px !important;
  height: 104px !important;
  max-width: 104px !important;
  aspect-ratio: 1 / 1;
  margin: 0 auto 16px !important;
  border-radius: 50%;
  object-fit: cover;
  border: none;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .34);
}

/* ---------- Name & Bio ---------- */
.container h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* Groesse 25 / Zeilenhoehe 1.2 / enge Laufweite — je groesser die
     Schrift, desto enger darf sie stehen. Die Bio macht es umgekehrt. */
  font-size: 25px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.028em;
  color: var(--pk-text);
  margin: 0 0 6px !important;
}

@media (min-width: 600px) { .container h1 { font-size: 28px; } }

/* LinkStack bringt seinen eigenen Verifiziert-Haken mit */
.container h1 img, .container h1 svg {
  width: .7em !important; height: .7em !important;
  margin: 0 !important; vertical-align: middle;
}

.container p {
  /* Kleiner Text braucht mehr Zeilenhoehe und weniger enge Laufweite,
     sonst wird er schlechter lesbar als die Ueberschrift. */
  font-size: 15px;
  line-height: 1.47;
  letter-spacing: -.008em;
  color: var(--pk-text-dim);
  max-width: 320px;
  margin: 0 auto 3px !important;
}

a { color: var(--pk-accent); text-decoration: none; }

.spacing { padding: 0 3px; }

/* ---------- Social-Icons ----------
   In dieser LinkStack-Version ist die Reihe .social-icon-div und
   der einzelne Link .social-link. */
.social-icon-div,
.pk-socials {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  /* 26px zur Bio (gleicher Bereich), 52px zu den Links (neuer Bereich) */
  margin: 24px auto 52px !important;
  padding: 0 !important;
}

.social-link,
.social-icon-div > a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--pk-chip);
  border: none;
  border-radius: 50%;
  box-shadow: none;
  color: var(--pk-text) !important;
  opacity: .78;
  transition: background-color .22s var(--pk-ease), opacity .22s var(--pk-ease);
}

.social-link:hover,
.social-icon-div > a:hover { background: var(--pk-chip-hover); opacity: 1; }

.social-link:focus-visible,
.pk-contact-mail:focus-visible {
  outline: 2px solid var(--pk-c1);
  outline-offset: 3px;
}

/* Akzentfarbe aus dem Profilbild als Rueckmeldung beim Antippen */
.social-link:active,
.social-icon-div > a:active {
  background: color-mix(in srgb, var(--pk-c1) 22%, var(--pk-chip));
}

/* LinkStack nutzt hier Font-Awesome-Zeichen (<i>), keine Grafiken.
   Bei Schriftzeichen bringt es nichts, die Box zu zentrieren — die
   Grundlinie muss stimmen. Deshalb fuellt das <i> den ganzen Kreis
   und zentriert das Zeichen selbst per Flex bei line-height 1. */
.social-link > i,
.social-link i,
.social-icon-div > a > i {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 19px !important;
  line-height: 1 !important;
  font-style: normal;
  background: none !important;
  border-radius: 0 !important;
}

/* Falls in anderen Versionen doch Grafiken kommen */
.social-link > svg,
.social-link > img,
.social-link > div {
  width: 19px !important;
  height: 19px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border-radius: 0 !important;
  display: block;
}

/* ---------- Trennlinien ----------
   Bewusst deaktiviert: Gliederung laeuft ueber gestaffelte Abstaende.
   24px innerhalb eines Bereichs, 52px zwischen Bereichen. */
.pk-divider { display: none !important; }

.pk-divider-unused,
.container .pk-divider-unused {
  width: 100%;
  max-width: var(--pk-width);
  height: 1px;
  margin: 26px auto 24px !important;
  border: 0;
  background: linear-gradient(90deg,
    transparent, var(--pk-hairline) 20%, var(--pk-hairline) 80%, transparent);
}

.pk-divider-soft,
.container .pk-divider-soft,
.container > .pk-divider-soft {
  max-width: 190px;
  margin: 22px auto 20px !important;
  opacity: .55;
}

/* ---------- Kontaktbereich ---------- */
.pk-contact,
.container > .pk-contact {
  width: 100%;
  max-width: var(--pk-width);
  margin: 40px auto 0 !important;
  text-align: center;
}

/* Das Label ueber dem Button sagte dasselbe wie der Button — entfaellt. */
.pk-contact-title { display: none !important; }

/* Gleiche Breite wie die Link-Buttons, damit er sichtbar zur Familie
   gehoert — aber ohne Fuellung, damit er ihnen nicht die Show stiehlt. */
.pk-contact-mail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-height: 40px;
  padding: 0 18px;
  box-sizing: border-box;
  border-radius: 980px;
  background: transparent;
  border: 1px solid var(--pk-hairline);
  color: var(--pk-text-dim) !important;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -.021em;
  transition: background-color .22s var(--pk-ease),
              color .22s var(--pk-ease),
              border-color .22s var(--pk-ease);
}

.pk-contact-mail svg { color: inherit; width: 15px; height: 15px; }
.pk-contact-mail:hover,
.pk-contact-mail:focus-visible {
  background: var(--pk-chip);
  color: var(--pk-text) !important;
}

.pk-contact-mail:active {
  background: color-mix(in srgb, var(--pk-c1) 18%, var(--pk-chip));
  color: var(--pk-text) !important;
}

/* ---------- Seitenlinks (Impressum, Datenschutz) ---------- */
/* Rechtliches: haengt am Inhalt, rutscht bei kurzer Seite an den unteren Rand.
   Ueberlappt dadurch nie etwas. */
.pk-pagelinks {
  position: static;
  z-index: 40;
  width: 100%;
  flex: 0 0 auto;
  /* Fester Abstand statt Viewport-Rechnung: schiebt die Fusszeile
     zuverlaessig unter die Bildschirmkante, egal wie hoch die
     Browserleiste gerade ist. */
  margin: 0 !important;
  margin-top: 170px !important;
  padding: 14px 12px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  box-sizing: border-box;
  font-size: 13.5px;
  line-height: 1.6;
  text-align: center;
  background: rgba(15, 15, 18, .78);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
          backdrop-filter: saturate(180%) blur(16px);
}

@media (prefers-color-scheme: light) {
  .pk-pagelinks { background: rgba(251, 251, 253, .82); }
}

/* Inhalt schiebt den Footer nach unten */
.container { flex: 1 0 auto; }

.pk-pagelinks a {
  color: var(--pk-text-legal) !important;
  font-size: 13.5px;
  margin: 0 11px;
  transition: color .2s var(--pk-ease);
}

.pk-pagelinks a:hover { color: var(--pk-text) !important; text-decoration: underline; }

/* ---------- LinkStack-Credit ausblenden ---------- */
.credit-footer, .credit-txt, .credit-icon, .credit-txt-clr,
a[href*="linkstack.org"], a[href*="littlelink"],
.pk-hide { display: none !important; }

/* ---------- Reste ---------- */
hr { margin: 1.4rem 0; border: 0; border-top: 1px solid var(--pk-hairline); }

::selection { background: rgba(255, 59, 107, .22); }
* { scrollbar-width: thin; scrollbar-color: rgba(140,140,145,.5) transparent; }
*::-webkit-scrollbar { width: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(140,140,145,.45); border-radius: 999px; }

/* ---------- Niedrige Fenster ----------
   In-App-Browser wie TikTok oder Instagram blenden oben eine eigene
   Leiste ein. Dadurch bleibt spuerbar weniger Hoehe uebrig als in Safari. */
@media (max-height: 720px) {
  .container { padding-top: 16px; padding-bottom: 80px; }

  img.avatar, .avatar, img[alt="avatar"],
  .container .column > img {
    width: 88px !important;
    height: 88px !important;
    max-width: 88px !important;
    margin-bottom: 12px !important;
  }

  .container h1 { font-size: 23px; }

  .container .pk-socials,
  .container .social-icon-div { margin: 20px auto 40px !important; }

  .pk-contact, .container > .pk-contact { margin-top: 32px !important; }
}

/* ---------- Tablet ---------- */
@media (min-width: 600px) {
  .container { max-width: 460px; padding: 32px 20px 130px; }
  .sharediv { top: 20px; right: 20px; }
}

/* ---------- Desktop ----------
   Auf grossen Schirmen wirkt die Handy-Groesse verloren. Alles waechst
   um etwa 15 Prozent mit, die Proportionen bleiben dabei gleich. */
@media (min-width: 900px) {
  :root { --pk-width: 400px; }

  .container { max-width: 520px; padding: 48px 24px 150px; }

  body::before {
    height: 640px;
    opacity: .5;
    background:
      radial-gradient(620px 360px at calc(50% - 180px) 44%, rgba(255,  59, 107, .55) 0%, transparent 72%),
      radial-gradient(620px 360px at calc(50% + 180px) 38%, rgba(168,  85, 255, .50) 0%, transparent 72%),
      radial-gradient(760px 420px at 50% 20%,              rgba(255, 138,  61, .40) 0%, transparent 74%);
  }

  body::after {
    height: 420px;
    opacity: .17;
    background:
      radial-gradient(560px 320px at calc(50% - 160px) 100%, rgba(168,  85, 255, .40) 0%, transparent 74%),
      radial-gradient(560px 320px at calc(50% + 160px) 100%, rgba(255,  59, 107, .34) 0%, transparent 74%);
  }

  img.avatar, .avatar, img[alt="avatar"],
  .container .column > img {
    width: 120px !important;
    height: 120px !important;
    max-width: 120px !important;
    margin-bottom: 20px !important;
  }

  .container h1 { font-size: 30px; margin-bottom: 8px !important; }
  .container p  { font-size: 16.5px; max-width: 400px; }

  .container .pk-socials,
  .container .social-icon-div { margin: 28px auto 56px !important; gap: 12px; }

  .social-link, .social-icon-div > a { width: 46px !important; height: 46px !important; }
  .social-link > i, .social-link i { font-size: 21px !important; }

  .button, a.button, .container > .button { min-height: 56px; font-size: 17px !important; }

  .pk-contact, .container > .pk-contact { margin-top: 44px !important; }
  .pk-contact-mail { min-height: 44px; font-size: 15px; }

  .pk-pagelinks { padding: 20px 12px !important; }
  .pk-pagelinks a { font-size: 14px; margin: 0 14px; }

  .sharediv { top: 22px; right: 22px; }
}


/* ============================================================
   Einheitliches Verhalten aller anklickbaren Elemente
   Steht bewusst am Ende, damit es alle vorherigen Regeln
   ueberschreibt. Anpassen laesst sich alles ueber die vier
   Variablen --pk-dur, --pk-hover-scale, --pk-press-scale
   und --pk-ease-soft ganz oben in dieser Datei.
   ============================================================ */

.button,
a.button,
.container > .button,
.social-link,
.social-icon-div > a,
.pk-contact-mail,
.sharediv .sharebutton,
.sharediv sharebutton,
.pk-pagelinks a {
  transform: scale(1);
  transform-origin: center;
  backface-visibility: hidden;          /* verhindert Flimmern beim Skalieren */
  will-change: transform;
  transition:
    transform        var(--pk-dur) var(--pk-ease-soft),
    background-color var(--pk-dur) var(--pk-ease-soft),
    border-color     var(--pk-dur) var(--pk-ease-soft),
    color            var(--pk-dur) var(--pk-ease-soft),
    opacity          var(--pk-dur) var(--pk-ease-soft),
    box-shadow       var(--pk-dur) var(--pk-ease-soft) !important;
}

/* Nur auf Geraeten mit echtem Mauszeiger — auf dem Handy gibt es
   kein Hover, dort bliebe der Zustand sonst nach dem Tippen haengen. */
@media (hover: hover) and (pointer: fine) {
  .button:hover,
  a.button:hover,
  .social-link:hover,
  .social-icon-div > a:hover,
  .pk-contact-mail:hover,
  .sharediv .sharebutton:hover,
  .sharediv sharebutton:hover,
  .pk-pagelinks a:hover {
    transform: scale(var(--pk-hover-scale)) !important;
  }
}

.button:active,
a.button:active,
.social-link:active,
.social-icon-div > a:active,
.pk-contact-mail:active,
.sharediv .sharebutton:active,
.sharediv sharebutton:active,
.pk-pagelinks a:active {
  transform: scale(var(--pk-press-scale)) !important;
  transition-duration: var(--pk-dur-press) !important;
}

/* Fusszeilen-Links brauchen eine Box, damit transform greift —
   und keine Unterstreichung mehr, die hatte sonst nur dieses Element. */
.pk-pagelinks a { display: inline-block; }
.pk-pagelinks a:hover { text-decoration: none !important; }

@media (prefers-reduced-motion: reduce) {
  .button, .social-link, .pk-contact-mail,
  .sharediv .sharebutton, .pk-pagelinks a {
    transition: none !important;
  }
  .button:hover, .social-link:hover, .pk-contact-mail:hover,
  .sharediv .sharebutton:hover, .pk-pagelinks a:hover {
    transform: none !important;
  }
}