/* ═══════════════════════════════════════════════════════════════════════
   DUDENE DIGITAL — Teilen, Kopieren, Rückmeldung

   Der Teilen-Knopf sitzt oben rechts über dem Avatar. Er ist Werkzeug,
   nicht Angebot — deshalb bekommt er keine Fläche, sondern nur einen
   Umriss: dieselbe Rolle wie `.surface-outline` auf der Webseite.

   Der Umriss ist --dd-border-strong und nicht die Haarlinie. Das ist eine
   Norm, keine Vorliebe: der Umriss eines Bedienelements braucht 3:1
   Kontrast zu seinem Grund (WCAG 1.4.11). Die Haarlinie schafft das
   nicht, sie ist fürs Raster gedacht.
   ═══════════════════════════════════════════════════════════════════════ */

.sharediv {
  position: relative;
  top: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  padding: 1.25rem 1.5rem 0 1.5rem;
  max-width: calc(34rem + 3rem);
  margin: 0 auto;
  box-sizing: border-box;
}

/* Ist der Teilen-Knopf im Panel abgeschaltet, setzt LinkStack
   `visibility: hidden` direkt ans Element. Verborgen ist er damit, aber
   seinen Platz behält er — oben blieb ein totes Feld von gut 60 px, und
   der Avatar rutschte entsprechend tiefer. `display: none` nimmt ihm auch
   den Platz. Der Selektor greift genau dann, wenn LinkStack selbst
   ausgeblendet hat, und fasst den sichtbaren Knopf nicht an. */
.sharediv[style*="hidden"] {
  display: none;
}

.sharebutton,
sharebutton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 44px;
  width: 44px;
  padding: 0;
  box-sizing: border-box;

  background-color: transparent;
  color: var(--dd-text-secondary);
  border: 1px solid var(--dd-border-strong);
  border-radius: var(--dd-radius-control);

  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--dd-base) var(--dd-ease-out),
    border-color var(--dd-base) var(--dd-ease-out),
    color var(--dd-base) var(--dd-ease-out),
    transform var(--dd-base) var(--dd-ease-out);
}

/* Ab Tablet trägt der Knopf auch das Wort. Auf dem Handy bleibt er
   quadratisch — dort ist der Platz oben rechts knapp. */
@media screen and (min-width: 600px) {
  .sharebutton,
  sharebutton {
    width: auto;
    min-width: 116px;
    padding: 0 1rem;
  }
}

@media screen and (max-width: 599px) {
  .sharebutton-mb {
    display: none;
  }
}

@media (hover: hover) {
  .sharebutton:hover,
  sharebutton:hover {
    background-color: var(--dd-surface);
    border-color: var(--dd-accent);
    color: var(--dd-accent);
    transform: translateY(-1px);
  }
}

.sharebutton:active,
sharebutton:active {
  transform: translateY(0) scale(0.97);
}

/* Das Teilen-Zeichen ist ein Font-Awesome-Zeichen, kein Bild. Das
   Ausgangstheme legte `filter: invert(100%)` darauf — gedacht für ein
   weißes Zeichen auf dunklem Grund. Auf Weiß macht dieselbe Regel das
   dunkle Zeichen weiß, also unsichtbar. Wird zurückgenommen.

   Das Markup setzt zusätzlich `style="color: black"` direkt am Element.
   Ein Inline-Stil schlägt jede Regel aus einer Datei — außer sie trägt
   !important. Deshalb steht es hier. */
.share-icon,
.sharebutton-img {
  position: static;
  left: auto;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  filter: none !important;
  color: inherit !important;
  font-size: 16px;
  transition: color var(--dd-base) var(--dd-ease-out);
}

.sharebutton:hover .share-icon {
  filter: none !important;
  color: inherit !important;
}

/* Das Kopier-Zeichen daneben, sofern eingeblendet.

   Es steht im Markup als leeres <span> AUSSERHALB der Teilen-Leiste und
   wird erst gefüllt, wenn die Funktion aktiv ist. Ohne die erste Regel
   hier stand oben links ein leerer, umrandeter Kasten — genau das war im
   ersten Probelauf zu sehen. */
.copy-icon:empty {
  display: none;
}

.copy-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  margin-right: 1.5rem;
  box-sizing: border-box;
  color: var(--dd-text-secondary);
  border: 1px solid var(--dd-border-strong);
  border-radius: var(--dd-radius-control);
  cursor: pointer;
  transition:
    border-color var(--dd-base) var(--dd-ease-out),
    color var(--dd-base) var(--dd-ease-out);
}

@media (hover: hover) {
  .copy-icon:hover {
    border-color: var(--dd-accent);
    color: var(--dd-accent);
  }
}


/* ─── Rückmeldung nach dem Kopieren ────────────────────────────────────
   Die kleine Meldung, die von unten hereinfährt. Sie ist die einzige
   dunkle Fläche im hellen Entwurf — und das zu Recht: eine Meldung soll
   sich vom Grund lösen, nicht in ihm aufgehen. Der Ton ist das Ink der
   Webseite, nicht Schwarz.
   ──────────────────────────────────────────────────────────────────── */

.toastdiv {
  display: flex;
  align-items: center;
  justify-content: center;
}

.toastbox {
  position: fixed;
  top: 105%;
  z-index: 40;
  width: auto;
  min-width: 240px;
  max-width: calc(100vw - 3rem);
  padding: 0.875rem 1.25rem;
  box-sizing: border-box;

  background-color: #0F1214;
  color: #F4F6F7;
  border-radius: var(--dd-radius-control);
  box-shadow: 0 4px 10px -4px rgba(15, 18, 20, 0.25),
              0 28px 56px -20px rgba(15, 18, 20, 0.45);

  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.4;
  text-align: center;

  transition: transform var(--dd-slow) var(--dd-ease-inout);
}

.toastbox.toast-tox--active {
  transform: translateY(-150px);
}

@media (prefers-reduced-motion: reduce) {
  .toastbox {
    transition: none;
  }
}


/* Sind beide sichtbar, sollen sie nebeneinander stehen und nicht
   untereinander. Das Kopier-Zeichen ist ein Geschwister der Teilen-Leiste
   und hat keinen gemeinsamen Kasten mit ihr, deshalb wird es um seine
   eigene Höhe hochgezogen und um die Breite des Teilen-Knopfes nach links
   gerückt. Die Breite ist dieselbe, die oben gesetzt ist — wer sie dort
   ändert, ändert sie hier mit. */
.sharediv:not([style*="hidden"]) ~ .copy-icon {
  margin-top: -44px;
  margin-right: calc(1.5rem + 44px + 0.5rem);
}

@media screen and (min-width: 600px) {
  .sharediv:not([style*="hidden"]) ~ .copy-icon {
    margin-right: calc(1.5rem + 116px + 0.5rem);
  }
}