/* ═══════════════════════════════════════════════════════════════════════
   DUDENE DIGITAL — Avatar, Knöpfe, Symbole

   Diese Datei ERSETZT die brands.css des Kerns, sie überschreibt sie
   nicht: LinkStack lädt entweder die eine oder die andere. Damit sind
   auch die rund hundert Markenfarben weg, die dort für GitHub, Instagram
   und den Rest stehen. Genau so ist es gewollt — die Seite hat eine
   Leitfarbe, nicht hundert.

   Deshalb steht hier fast nirgends !important. Theme-CSS lädt nach dem
   Kern-CSS, und eine konkurrierende Markenregel gibt es nicht mehr. Wo es
   doch steht, geht es gegen einen Inline-Stil im Markup — dagegen hilft
   nichts anderes — und ist an Ort und Stelle begründet.
   ═══════════════════════════════════════════════════════════════════════ */


/* ─── Avatar ───────────────────────────────────────────────────────────
   Kein Kreis, sondern eine Karte: weißer Grund, Haarlinie, getönter
   Schatten, 16 px Radius — dieselbe Form wie jede Karte auf der Webseite.
   Das ist eine bewusste Entscheidung: das Bild ist ein Wortzeichen, keine
   Person. Ein rundes Fenster schneidet ein Logo an, eine Karte rahmt es.

   Der Innenabstand gibt dem Zeichen Luft und lässt es nicht an die Kante
   stoßen. `box-sizing: border-box` sorgt dafür, dass der Abstand nach
   innen geht und der Rahmen seine Maße behält.

   ── Lieber doch rund? Dann diesen Block ersetzen durch:
        #avatar, .rounded-avatar {
          border-radius: 50%; padding: 0; border: 1px solid var(--dd-rule);
          box-shadow: var(--dd-shadow-2); width: 132px; height: 132px;
        }
   ──────────────────────────────────────────────────────────────────── */

#avatar,
.rounded-avatar {
  display: block;
  /* Alle drei mit Nachdruck: das Markup kennt drei Avatar-Fälle, und im
     dritten (LinkStack-Logo statt eigenem Bild) steht
     `style="width:auto;min-width:128px"` direkt am Element. Ohne
     !important gewinnt dieser Inline-Stil und der Rahmen wird schief.
     Aus demselben Grund hängt die Gestaltung an #avatar und nicht an
     .rounded-avatar: die Klasse gibt es nur, wenn wirklich ein eigenes
     Bild hochgeladen wurde. */
  width: 132px !important;
  height: 132px !important;
  min-width: 0 !important;
  margin: 0 auto 1.5rem auto;
  padding: 14px;
  box-sizing: border-box;
  background: var(--dd-background);
  border: 1px solid var(--dd-rule);
  border-radius: var(--dd-radius-card);
  box-shadow: var(--dd-shadow-2);

  /* Das Markup setzt `object-fit: cover` als Inline-Stil. Für ein
     Wortzeichen ist das falsch — cover schneidet an, sobald das Bild
     nicht quadratisch ist. `contain` zeigt es vollständig. Ein Inline-Stil
     lässt sich nur mit !important überstimmen. */
  object-fit: contain !important;
}

@media (min-width: 420px) {
  #avatar,
  .rounded-avatar {
    width: 148px !important;
    height: 148px !important;
    padding: 16px;
  }
}


/* ─── Netzwerk-Symbole ─────────────────────────────────────────────────
   Auf der Webseite sitzen Symbole in Kacheln: 44 px, 12 px Radius, ein
   Hauch Amber als Fläche, eine amberfarbene Kante, das Zeichen in der
   dunklen Amber-Stufe. Genau das hier.

   44 px sind kein Zufall, sondern die kleinste Fläche, die sich auf einem
   Touchscreen zuverlässig treffen lässt (WCAG 2.5.5).
   ──────────────────────────────────────────────────────────────────── */

.social-icon-div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem;
  padding-bottom: 0 !important;
  margin-top: 1.75rem;
  margin-bottom: clamp(1.75rem, 5vh, 2.5rem);
}

.social-link {
  display: inline-flex;
  line-height: 0;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 19px;
  box-sizing: border-box;
  background: var(--dd-accent-muted);
  border: 1px solid var(--dd-border-accent);
  border-radius: var(--dd-radius-control);
  color: var(--dd-accent);
  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);
}

@media (hover: hover) {
  .social-link:hover .social-icon {
    background: var(--dd-accent-fill);
    border-color: var(--dd-accent-fill);
    color: var(--dd-accent-on);
    transform: translateY(-2px);
  }
}

.social-link:active .social-icon {
  transform: translateY(0) scale(0.96);
}


/* ─── Knöpfe ───────────────────────────────────────────────────────────
   Der Kern des Themes. Ein Link ist hier keine Pille mit Umriss, sondern
   eine Karte, die auf dem Grund aufliegt: weiß, Haarlinie, getönter
   Schatten. Beim Überfahren wächst der Schatten und die Karte hebt sich
   um zwei Pixel — derselbe Griff wie `.surface-card:hover` auf der
   Webseite.

   Das Ausgangstheme setzt `display: block !important` auf .button. Nur
   mit einem eigenen !important lässt sich daraus ein Flex-Container
   machen, und den brauchen wir, damit Symbol und Beschriftung sauber
   nebeneinander mittig sitzen statt auf der Grundlinie zu schwimmen.
   ──────────────────────────────────────────────────────────────────── */

.button-entrance {
  margin-bottom: 0.75rem;
}

.button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  min-height: 58px;
  margin: 0 0 0.75rem 0;
  padding: 0.9375rem 1.25rem;
  box-sizing: border-box;

  background-color: var(--dd-background);
  color: var(--dd-text-primary);
  border: 1px solid var(--dd-border-control);
  border-radius: var(--dd-radius-card);
  box-shadow: var(--dd-shadow-1);

  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
  text-align: center;
  text-decoration: none;

  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition:
    border-color var(--dd-base) var(--dd-ease-out),
    box-shadow var(--dd-base) var(--dd-ease-out),
    background-color var(--dd-base) var(--dd-ease-out),
    transform var(--dd-base) var(--dd-ease-out);
}

/* Der Amber-Anschnitt. Er liegt als eigene Lage über der Karte, damit die
   Fläche selbst unangetastet bleibt, und zieht beim Überfahren von links
   ein. Auf der Webseite kennzeichnet derselbe Anflug die Karte, die etwas
   anbietet. */
.button::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to right, var(--dd-accent-glow), transparent 55%);
  opacity: 0;
  transition: opacity var(--dd-base) var(--dd-ease-out);
}

@media (hover: hover) {
  .button:hover {
    border-color: var(--dd-accent);
    box-shadow: var(--dd-shadow-2);
    transform: translateY(-2px);
  }

  .button:hover::before {
    opacity: 1;
  }
}

.button:active {
  transform: translateY(0) scale(0.985);
  box-shadow: var(--dd-shadow-1);
}


/* ─── Der oberste Knopf trägt die Fläche ───────────────────────────────
   Die Webseite hat pro Abschnitt genau einen gefüllten Knopf; alles
   andere bleibt ruhig. Dieselbe Rangordnung hier: der erste Link steht
   als Amber-Fläche, der Rest als Karte. Sortiert wird im Panel — was
   oben steht, ist das Angebot.

   Wie das ohne :first-child funktioniert: die erste Regel färbt ALLE
   Knöpfe amber, die zweite nimmt es allen wieder weg, die einen
   .button-entrance-Geschwister VOR sich haben. Übrig bleibt genau der
   erste. Ein `:first-child` ginge hier nicht, weil vor den Knöpfen noch
   Avatar, Name, Beschreibung und Symbolreihe im selben Kasten stehen.

   ── Alle Knöpfe gleich haben wollen? Dann diesen ganzen Abschnitt
      löschen. Sonst nichts.
   ──────────────────────────────────────────────────────────────────── */

.button-entrance .button {
  background-color: var(--dd-accent-fill);
  color: var(--dd-accent-on);
  border-color: var(--dd-accent-fill);
  font-weight: 600;
  box-shadow: var(--dd-shadow-2);
}

.button-entrance .button::before {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.18), transparent 55%);
}

@media (hover: hover) {
  .button-entrance .button:hover {
    background-color: var(--dd-accent-fill-hover);
    border-color: var(--dd-accent-fill-hover);
    box-shadow: var(--dd-shadow-3);
  }
}

/* Und hier wird es allen außer dem ersten wieder abgenommen. */
.button-entrance ~ .button-entrance .button {
  background-color: var(--dd-background);
  color: var(--dd-text-primary);
  border-color: var(--dd-border-control);
  font-weight: 500;
  box-shadow: var(--dd-shadow-1);
}

.button-entrance ~ .button-entrance .button::before {
  background: linear-gradient(to right, var(--dd-accent-glow), transparent 55%);
}

@media (hover: hover) {
  .button-entrance ~ .button-entrance .button:hover {
    background-color: var(--dd-background);
    border-color: var(--dd-accent);
    box-shadow: var(--dd-shadow-2);
  }
}


/* ─── Symbole in den Knöpfen ───────────────────────────────────────────
   Graustufen im Ruhezustand, Farbe beim Überfahren. Das ist dieselbe
   Entscheidung wie zuletzt bei den Referenzkacheln der Webseite: eine
   ruhige weiße Seite verträgt keine acht bunten Logos nebeneinander, aber
   sie darf sie zeigen, sobald jemand hinsieht.

   Das Ausgangstheme kehrte die Symbole beim Überfahren um
   (invert + grayscale). Auf weißem Grund macht das aus einem dunklen
   Symbol ein weißes — also unsichtbar. Wird hier zurückgenommen.
   ──────────────────────────────────────────────────────────────────── */

.button .icon,
.icon {
  position: relative;
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;
  vertical-align: middle;
  flex-shrink: 0;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.72;
  transition:
    filter var(--dd-base) var(--dd-ease-out),
    opacity var(--dd-base) var(--dd-ease-out),
    transform var(--dd-base) var(--dd-ease-out);
}

@media (hover: hover) {
  .button:hover .icon {
    filter: none;
    opacity: 1;
    transform: translateX(-1px);
  }
}

/* Auf der Amber-Fläche bleibt das Symbol dunkel und ruhig — dort wäre ein
   buntes Logo eine dritte Farbe auf engstem Raum. */
.button-entrance .button .icon {
  filter: grayscale(100%) brightness(0.25);
  opacity: 0.9;
}

@media (hover: hover) {
  .button-entrance .button:hover .icon {
    filter: grayscale(100%) brightness(0.25);
    opacity: 1;
  }
}

.button-entrance ~ .button-entrance .button .icon {
  filter: grayscale(100%);
  opacity: 0.72;
}

@media (hover: hover) {
  .button-entrance ~ .button-entrance .button:hover .icon {
    filter: none;
    opacity: 1;
  }
}

/* In der dunklen Fassung würde ein dunkles Symbol im Grund verschwinden.
   Dort werden Graustufen-Symbole aufgehellt statt abgedunkelt. */
@media (prefers-color-scheme: dark) {
  .button .icon,
  .button-entrance ~ .button-entrance .button .icon {
    filter: grayscale(100%) invert(1) brightness(1.6);
    opacity: 0.75;
  }

  .button-entrance .button .icon {
    filter: grayscale(100%) brightness(0.25);
    opacity: 0.9;
  }
}

@media (prefers-color-scheme: dark) and (hover: hover) {
  .button:hover .icon,
  .button-entrance ~ .button-entrance .button:hover .icon {
    filter: grayscale(100%) invert(1) brightness(1.9);
    opacity: 1;
  }

  .button-entrance .button:hover .icon {
    filter: grayscale(100%) brightness(0.25);
    opacity: 1;
  }
}