/* ═══════════════════════════════════════════════════════════════════════
   DUDENE DIGITAL — Grundgerüst, Farbe, Schrift

   Diese Datei ersetzt das Skeleton-Grundgerüst des Ausgangsthemes
   vollständig. Sie bringt mit: die Farbtoken, die Schriften, das Raster
   und die Typografie. Alles Weitere (Avatar, Knöpfe, Symbole) steht in
   brands.css, der Teilen-Knopf in share.button.css, die Bewegung in
   animations.css.

   Die Werte sind nicht neu erfunden, sondern eins zu eins aus
   dudene-digital.de übernommen (src/app/globals.css). Wer dort etwas
   ändert, ändert es hier mit — sonst laufen Webseite und Linkseite
   auseinander.

   Die Zahl hinter einer Farbe ist ihr Kontrast zum Grund, auf dem sie
   wirklich sitzt. Keine davon liegt unter der Norm (WCAG AA: 4,5:1 für
   Text, 3:1 für die Umrisse von Bedienelementen).
   ═══════════════════════════════════════════════════════════════════════ */


/* ─── Schriften ────────────────────────────────────────────────────────
   Alle drei liegen im Ordner `fonts/` neben dieser Datei und werden vom
   eigenen Server ausgeliefert, nicht von Google. Das ist kein Geschmack,
   sondern Datenschutz: ein Aufruf bei fonts.gstatic.com überträgt die
   IP-Adresse des Besuchers an Google, und genau dafür hat das LG München
   2022 einen Websitebetreiber verurteilt. Eine Linkseite mit Impressum
   sollte diesen Fehler nicht machen.

   Es sind Variable Fonts: eine Datei deckt den ganzen Gewichtsbereich ab,
   deshalb genügen sechs Dateien für drei Familien in zwei Zeichensätzen.
   Alle drei stehen unter der SIL Open Font License, die das Mitliefern
   ausdrücklich erlaubt — die Lizenz liegt als OFL.txt bei.
   ──────────────────────────────────────────────────────────────────── */

/* Syne — Überschriften. Der Name auf der Seite. */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('fonts/syne-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('fonts/syne-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Outfit — Fließtext, Knöpfe, alles Gelesene. */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JetBrains Mono — nur für kleine Etiketten in Versalien. */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jetbrainsmono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jetbrainsmono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ─── Farbe, Form, Zeit ────────────────────────────────────────────────
   Genau eine Leitfarbe: das Amber aus dem Logo, zweistufig. Voll als
   Fläche, abgedunkelt als Text — gleicher Farbton (38°), beide geprüft.
   Auf Weiß trägt das volle Amber als Text nur 2,08:1 und ist damit
   unbrauchbar; deshalb die zweite Stufe.

   --accentColor, --bgColor, --bgColor2, --font und --delay sind die
   Namen, die LinkStack selbst kennt und an einigen Stellen einsetzt.
   Sie bleiben stehen und zeigen auf die Werte der Marke.
   ──────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  /* Grund & Flächen */
  --dd-background: #FFFFFF;
  --dd-surface: #F4F6F7;
  --dd-surface-hover: #EAEEF0;

  /* Leitfarbe */
  --dd-accent: #8E6010;              /* Text, Symbole, Kanten – 5,48:1 auf Weiß */
  --dd-accent-hover: #724E0D;
  --dd-accent-fill: #E8A838;         /* Volles Logo-Amber – nur als Fläche */
  --dd-accent-fill-hover: #D89A28;
  --dd-accent-muted: rgba(232, 168, 56, 0.14);
  --dd-accent-on: #0F1214;           /* Schrift auf Amber-Fläche – 9,03:1 */
  --dd-accent-glow: rgba(232, 168, 56, 0.10);

  /* Textstufen */
  --dd-text-primary: #0F1214;        /* 18,80:1 */
  --dd-text-secondary: #59636A;      /* 6,14:1 */
  --dd-text-tertiary: #656F76;       /* 5,14:1 */

  /* Kanten */
  --dd-rule: #E2E7EA;                /* Haarlinie fürs Raster */
  --dd-border: #D2D9DD;
  --dd-border-strong: #7C828A;       /* 3,88:1 – Umriss von Bedienelementen */
  /* Die Kante der Knopf-Karten. Sie ist ein eigener Wert und nicht
     --dd-border (#D2D9DD, 1,43:1), weil ein Knopf, dessen Fläche dieselbe
     Farbe hat wie der Grund, allein über seine Kante als Bedienelement zu
     erkennen ist — und dafür verlangt WCAG 1.4.11 mindestens 3:1. Gemessen
     sind es 3,06:1: der leichteste Ton, der die Norm noch hält. */
  --dd-border-control: #8A959B;      /* 3,06:1 auf Weiß */
  --dd-border-accent: rgba(142, 96, 16, 0.4);

  /* Tiefe: ein Licht von oben, Schatten in der Farbe des Grundes statt in
     Schwarz. Reines Schwarz auf Weiß wirkt schmutzig, nicht erhaben. */
  --dd-shadow-1: 0 1px 2px -1px rgba(15, 18, 20, 0.06),
                 0 2px 8px -4px rgba(15, 18, 20, 0.06);
  --dd-shadow-2: 0 2px 4px -2px rgba(15, 18, 20, 0.06),
                 0 12px 28px -12px rgba(15, 18, 20, 0.14);
  --dd-shadow-3: 0 4px 10px -4px rgba(15, 18, 20, 0.08),
                 0 28px 56px -20px rgba(15, 18, 20, 0.18);

  /* Form: drei Radien, mehr nicht.
       Karte, Bild, große Fläche  → --dd-radius-card
       Bedienelement, Symbolfeld  → --dd-radius-control
       Chip, Punkt                → 9999px */
  --dd-radius-control: 12px;
  --dd-radius-card: 16px;

  /* Zeit: ein Satz Kurven für die ganze Seite. `ease` aus dem Browser
     wirkt mechanisch, diese beiden haben Masse. */
  --dd-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dd-ease-inout: cubic-bezier(0.32, 0.72, 0, 1);
  --dd-fast: 0.18s;
  --dd-base: 0.28s;
  --dd-slow: 0.55s;

  /* Breite der Spalte. Die Webseite rechnet mit 68rem für Fließtext;
     eine Linkliste braucht deutlich weniger, sonst laufen die Knöpfe
     auseinander und der Blick findet keine Kante. */
  --dd-column: 34rem;                /* 544 px */

  /* Namen, die LinkStack selbst benutzt */
  --bgColor: #FFFFFF;
  --bgColor2: #FFFFFF;
  /* Das Panel schreibt `--accentColor: #ffffff !important` in den Kopf der
     Seite. Dieses Theme benutzt die Variable selbst nirgends — es rechnet
     durchweg mit den eigenen --dd-Token. Sie wird hier trotzdem auf den
     Markenwert gezwungen, damit nichts, was LinkStack künftig an sie
     hängt, in Weiß auf Weiß endet. */
  --accentColor: #8E6010 !important;
  --font: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --delay: .3s;
}


/* ─── Dunkle Fassung ───────────────────────────────────────────────────
   Diese Datei heißt „auto", also folgt sie der Einstellung des Geräts.
   Die dunklen Werte sind nicht ausgedacht: es sind die Token der dunklen
   Gegenfläche der Webseite (Fußbereich, Fallstudien-Kopf). Auf Dunkel
   darf das volle Logo-Amber auch als Text stehen — dort trägt es 9,03:1.

   Wer die Seite immer hell haben will, löscht diesen ganzen Block oder
   trägt im Panel das Theme „hell" ein (skeleton-light.css).
   ──────────────────────────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --dd-background: #0F1214;
    --dd-surface: #191D21;
    --dd-surface-hover: #22272C;

    --dd-accent: #E8A838;            /* 9,03:1 auf #0F1214 */
    --dd-accent-hover: #F2BA5A;
    --dd-accent-fill: #E8A838;
    --dd-accent-fill-hover: #F2BA5A;
    --dd-accent-muted: rgba(232, 168, 56, 0.12);
    --dd-accent-on: #0F1214;
    --dd-accent-glow: rgba(232, 168, 56, 0.07);

    --dd-text-primary: #F4F6F7;      /* 17,34:1 */
    --dd-text-secondary: #A9B3B9;    /* 8,81:1 */
    --dd-text-tertiary: #97A1A7;     /* 7,17:1 */

    --dd-rule: rgba(244, 246, 247, 0.10);
    --dd-border: rgba(244, 246, 247, 0.18);
    --dd-border-strong: rgba(244, 246, 247, 0.42);
    --dd-border-control: rgba(244, 246, 247, 0.38);   /* 3,42:1 auf #0F1214 */
    --dd-border-accent: rgba(232, 168, 56, 0.38);

    /* Auf dunklem Grund trägt ein Schatten nicht. Was Tiefe macht, ist
       eine hellere Kante oben — Licht, das auf der Oberkante liegt. */
    --dd-shadow-1: inset 0 1px 0 0 rgba(244, 246, 247, 0.04);
    --dd-shadow-2: inset 0 1px 0 0 rgba(244, 246, 247, 0.07),
                   0 12px 28px -12px rgba(0, 0, 0, 0.55);
    --dd-shadow-3: inset 0 1px 0 0 rgba(244, 246, 247, 0.09),
                   0 28px 56px -20px rgba(0, 0, 0, 0.65);

    --bgColor: #0F1214;
    --bgColor2: #0F1214;
    --accentColor: #E8A838 !important;
  }
}


/* ─── Der Grund ────────────────────────────────────────────────────────
   Weiß, mit einem sehr leisen warmen Schein oben. Er läuft nach außen in
   Durchsichtigkeit aus und erzeugt deshalb keine sichtbare Grenze — er
   nimmt dem Weiß nur die Sterilität. Auf der Webseite sitzt derselbe
   Schein links oben, weil die Überschrift dort linksbündig steht; hier
   steht alles mittig, also sitzt er mittig.

   Das Rauschen darüber ist ein Hauch (1,4 %). Mehr liest sich auf hellem
   Grund als Schmutz statt als Textur.
   ──────────────────────────────────────────────────────────────────── */

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

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  background-color: var(--dd-background);
  background-image:
    radial-gradient(90% 55% at 50% 0%, var(--dd-accent-glow), transparent 62%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--dd-text-primary);
  font-family: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Das Ausgangstheme startet den Körper auf opacity 0 und blendet ihn
     per Animation ein. Das übernehmen wir — aber die Rücknahme bei
     `prefers-reduced-motion` steht in animations.css und ist dort keine
     Kür: ohne sie bliebe die Seite für alle unsichtbar, die Bewegung
     abbestellt haben. */
  opacity: 0;
  animation: dd-seiten-eingang var(--dd-slow) var(--dd-ease-out) 0.05s 1 both;
}

/* Das Korn liegt über dem Grund, aber unter allem Inhalt. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.014;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

@media (prefers-color-scheme: dark) {
  /* Auf Dunkel darf das Korn kräftiger sein — dort trägt es und
     verhindert, dass große schwarze Flächen bandartig brechen. */
  body::before { opacity: 0.035; }
}

@keyframes dd-seiten-eingang {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Der Parallax-Hintergrund und die Partikel des Ausgangsthemes sind hier
   fehl am Platz: die Webseite hat keine schwebenden Formen, sie hat einen
   ruhigen weißen Grund. Beides wird abgeschaltet statt gelöscht, damit
   das Markup unangetastet bleibt.

   Wer die Partikel behalten will, entfernt die Zeile mit #tsparticles —
   dann aber bitte auch im Panel die Partikelfarbe auf #E8A838 stellen. */
.background-container,
.parallax-background,
#tsparticles,
web-particles {
  display: none !important;
}


/* ─── Raster ───────────────────────────────────────────────────────────
   Eine Spaltenbreite für die ganze Seite, mittig, mit Rinnstein an den
   Seiten. Der Rinnstein ist wichtig: ohne ihn kleben die Knöpfe auf dem
   Handy am Displayrand.
   ──────────────────────────────────────────────────────────────────── */

.container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: calc(var(--dd-column) + 3rem);
  margin: 0 auto;
  padding-inline: 1.5rem;
  box-sizing: border-box;
  text-align: center;
  word-break: break-word;
}

/* Die Fußzeile steckt in einem zweiten .container INNERHALB des ersten
   (die Kette lautet container > row > column > container > .footer). Ohne
   diese Rücknahme zieht sich der Rinnstein ein zweites Mal ein und die
   Fußzeile steht schmaler als alles darüber. */
.container .container {
  max-width: none;
  padding-inline: 0;
}

.column,
.columns {
  position: relative;
  width: 100%;
  float: none;
  margin-left: 0;
  box-sizing: border-box;
}

.row {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

/* Das Markup setzt am Kopf der Spalte `style="margin-top: 5%"`. Auf einem
   breiten Fenster sind 5 % ein anderer Abstand als auf einem schmalen,
   und der Kopf rutscht mit der Fensterbreite. Ein fester, mitwachsender
   Wert ist verlässlicher — deshalb hier mit Nachdruck. */
.container > .row > .column[style],
.container > .row > .column {
  margin-top: clamp(3rem, 9vh, 5.5rem) !important;
}

.spacing {
  padding: 0 10px;
  padding-top: 50px;
}

.u-full-width      { width: 100%; box-sizing: border-box; }
.u-max-full-width  { max-width: 100%; box-sizing: border-box; }
.u-pull-right      { float: right; }
.u-pull-left       { float: left; }


/* ─── Typografie ───────────────────────────────────────────────────────
   Der Name in Syne, in Schaugröße, eng gesetzt. Alles andere in Outfit.

   Die Zeilenhöhe ist der Punkt, an dem das Ausgangstheme scheiterte: es
   setzte `line-height: 96px` auf die Überschrift. Ein Name, der über zwei
   Zeilen läuft, riss damit ein Loch in die Seite.
   ──────────────────────────────────────────────────────────────────── */

h1 {
  margin: 0 0 0.75rem 0;
  font-family: 'Syne', ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.875rem, 7.5vw, 2.625rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--dd-text-primary);
  text-wrap: balance;
}

h2, h3, h4, h5, h6 {
  font-family: 'Syne', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--dd-text-primary);
}

/* Das Häkchen für verifizierte Benutzer steckt als SVG in der
   Überschrift und bringt seine eigene Farbe mit (#179cf0). Ein fremdes
   Blau neben einer Seite, die genau eine Leitfarbe hat — das fällt auf.
   Der Körper wird deshalb amber eingefärbt, der Haken bleibt hell.
   Wer das Häkchen lieber im Original mag, löscht diese zwei Regeln. */
.badge .badge-body { fill: var(--dd-accent-fill) !important; }
.badge .badge-tick { fill: var(--dd-accent-on) !important; }

.badge {
  height: 0.58em !important;
  margin: 0 0 0 0.35em !important;
  vertical-align: baseline !important;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

/* Die Beschreibung unter dem Namen. Leicht gesetzt, in der zweiten
   Textstufe, auf Lesebreite gebremst — 62 Zeichen sind die Grenze, ab der
   das Auge die nächste Zeile nicht mehr sicher findet. */
.description-parent {
  max-width: 38ch;
  margin-inline: auto;
  padding-bottom: 0 !important;
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--dd-text-secondary);
  text-wrap: pretty;
}

.description-parent * {
  margin-bottom: 0.6em !important;
}

.description-parent :last-child {
  margin-bottom: 0 !important;
}

.description-parent a {
  color: var(--dd-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--dd-border-accent);
}

.description-parent a:hover {
  color: var(--dd-accent-hover);
  text-decoration-color: currentColor;
}

/* `<center>` ist uraltes HTML, aber LinkStack setzt es — also fängt das
   CSS es ab, statt sich darauf zu verlassen. */
center {
  display: block;
  text-align: center;
}

a {
  color: var(--dd-accent);
  text-decoration: none;
  transition: color var(--dd-base) var(--dd-ease-out);
}

a:hover {
  color: var(--dd-accent-hover);
}

small {
  font-size: 0.8125rem;
}

code {
  padding: .15rem .4rem;
  margin: 0 .15rem;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  white-space: nowrap;
  background: var(--dd-surface);
  border: 1px solid var(--dd-rule);
  border-radius: var(--dd-radius-control);
  color: var(--dd-text-primary);
}

pre > code {
  display: block;
  padding: 1rem 1.25rem;
  white-space: pre;
  overflow-x: auto;
}

hr {
  margin: 2.5rem 0;
  border: 0;
  border-top: 1px solid var(--dd-rule);
}


/* ─── Tastatur-Fokus ───────────────────────────────────────────────────
   Ein Ring für die ganze Seite, mit Abstand zur Kante, damit er auch auf
   gefüllten Knöpfen zu erkennen ist.

   Die Ringfarbe ist die Textfarbe, nicht das Amber. Zwei Gründe: auf Weiß
   trägt sie 18,8:1 statt 5,5:1, und auf einer amberfarbenen Fläche wäre
   ein Amber-Ring schlicht nicht zu sehen. In der dunklen Fassung dreht er
   sich mit, weil er auf dasselbe Token zeigt.

   Der Ring folgt von selbst dem Radius des Elements — deshalb hier
   bewusst kein eigener border-radius, sonst würden Kapseln eckig.
   ──────────────────────────────────────────────────────────────────── */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.sharebutton:focus-visible,
.copy-icon:focus-visible {
  outline: 2px solid var(--dd-text-primary) !important;
  outline-offset: 3px !important;
  border-radius: var(--dd-radius-control);
}

/* Mit der Maus geklickt: kein Ring. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible),
.sharebutton:focus:not(:focus-visible),
.copy-icon:focus:not(:focus-visible) {
  outline: none;
}


/* ─── Auswahl & Bildlaufleiste ────────────────────────────────────────── */

::selection {
  background: var(--dd-accent-fill);
  color: var(--dd-accent-on);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--dd-border-strong) transparent;
}

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--dd-border-strong);
  border-radius: 9999px;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--dd-accent);
}


/* ─── Fußzeile ─────────────────────────────────────────────────────────
   Der Hinweis auf LinkStack, falls er eingeschaltet ist. Er soll lesbar
   sein, aber nicht mit den Knöpfen konkurrieren: dritte Textstufe,
   kleiner Grad, keine Auszeichnung.
   ──────────────────────────────────────────────────────────────────── */

.footer {
  margin: clamp(2.5rem, 8vh, 4rem) 0 2.25rem 0 !important;
  position: relative;
  z-index: 1;
}

.credit-txt,
.credit-txt-clr {
  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.01em;
  color: var(--dd-text-tertiary) !important;
  text-decoration: none;
}

a:hover .credit-txt,
a:hover .credit-txt-clr,
.credit-hover:hover .credit-txt-clr {
  color: var(--dd-accent) !important;
}

.credit-footer {
  position: relative;
  right: 0;
}

.credit-icon {
  display: none;
}