/* ==========================================================================
   ARTIKEL-BAUSTEINE  ·  artikel.css
   --------------------------------------------------------------------------
   Ergaenzt verzeichnis.css um Bausteine fuer redaktionelle Beitraege.
   Rein additiv: es werden ausschliesslich neue Klassen definiert, keine
   bestehende Regel wird ueberschrieben. Wer die Datei entfernt, verliert
   nur die Optik dieser Bausteine, nichts anderes.

   KONTRAST
   Jede Text-/Flaechenkombination in dieser Datei wurde nach WCAG 2.1
   gemessen. Der schlechteste Wert liegt bei 4,7:1, die meisten ueber 7:1.
   Verlangt sind 4,5:1 fuer normalen und 3:1 fuer grossen Text.
   Farbe ist nie der einzige Bedeutungstraeger - jeder farbige Kasten hat
   zusaetzlich ein Symbol und eine Textmarke.

   WICHTIG ZUR DOKUMENTSTRUKTUR
   Die Bausteine verwenden bewusst KEINE Ueberschriften-Elemente (h1-h6).
   Titel innerhalb von Kaesten sind <span class="…-t">. So bleibt die
   Gliederung des Beitrags H1 > H2 > H3 unabhaengig davon, welcher
   Baustein wo eingesetzt wird.
   ========================================================================== */

.prose {
    --a-line: #E2E8F0;
    --a-ink: #1E293B;      /* 12,6:1 auf Weiss */
    --a-ink-soft: #475569; /*  7,6:1 auf Weiss */
    --a-indigo: #4338CA;   /*  7,9:1 auf Weiss */
}

/* ---------- Anreisser ---------------------------------------------------- */
.a-lead {
    font-size: 1.12rem;
    line-height: 1.75;
    color: var(--a-ink);
    font-weight: 500;
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--a-line);
}

/* ---------- Hinweiskaesten ----------------------------------------------- */
.a-note {
    position: relative;
    margin: 1.9rem 0;
    padding: 1.15rem 1.35rem 1.15rem 3.35rem;
    border: 1px solid;
    border-left-width: 5px;
    border-radius: 10px;
    font-size: 0.97rem;
    line-height: 1.75;
}
.a-note::before {
    content: attr(data-icon);
    position: absolute;
    left: 1.15rem;
    top: 1.05rem;
    font-size: 1.15rem;
    line-height: 1.2;
}
.a-note > .a-note-t {
    display: block;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}
.a-note p { margin: 0 0 0.7rem; }
.a-note p:last-child { margin-bottom: 0; }
.a-note a { font-weight: 600; }

.a-note--info { background: #EFF6FF; border-color: #93C5FD; color: #0B4A6F; }   /* 8,7:1 */
.a-note--info .a-note-t, .a-note--info a { color: #0B4A6F; }

.a-note--warn { background: #FFFBEB; border-color: #FCD34D; color: #7C4A03; }   /* 7,1:1 */
.a-note--warn .a-note-t, .a-note--warn a { color: #7C4A03; }

.a-note--ok { background: #ECFDF5; border-color: #6EE7B7; color: #0B6B4F; }     /* 6,2:1 */
.a-note--ok .a-note-t, .a-note--ok a { color: #0B6B4F; }

.a-note--law { background: #F5F3FF; border-color: #C4B5FD; color: #6B2E8F; }    /* 7,9:1 */
.a-note--law .a-note-t, .a-note--law a { color: #6B2E8F; }

.a-note--stop { background: #FEF2F2; border-color: #FCA5A5; color: #9B1C1C; }   /* 7,5:1 */
.a-note--stop .a-note-t, .a-note--stop a { color: #9B1C1C; }

/* ---------- Definitionskasten -------------------------------------------- */
.a-def {
    margin: 1.9rem 0;
    padding: 1.4rem 1.6rem;
    background: #F8FAFC;
    border: 1px solid var(--a-line);
    border-radius: 12px;
}
.a-def-t {
    display: block;
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--a-ink-soft);
    margin-bottom: 0.5rem;
}
.a-def-w { display: block; font-size: 1.1rem; font-weight: 800; color: var(--navy); margin-bottom: 0.4rem; }
.a-def p { margin: 0; color: #334155; }  /* 9,9:1 auf #F8FAFC */

/* ---------- Kennzahlen ---------------------------------------------------- */
.a-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.85rem;
    margin: 2rem 0;
}
.a-stat {
    padding: 1.15rem 1.1rem;
    background: var(--navy);
    border-radius: 12px;
    text-align: center;
}
.a-stat-v {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.15;
    color: #FFFFFF;                 /* 17,9:1 */
    letter-spacing: -0.5px;
}
.a-stat-l {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: #CBD5E1;                 /* 12,0:1 */
}
.a-stats-src {
    grid-column: 1 / -1;
    font-size: 0.78rem;
    color: var(--medium-gray);      /* 5,1:1 auf Weiss */
    text-align: right;
    margin-top: -0.25rem;
}

/* ---------- Karten -------------------------------------------------------- */
.a-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0.9rem;
    margin: 2rem 0;
}
.a-card {
    padding: 1.3rem 1.35rem;
    background: #FFFFFF;
    border: 1.5px solid var(--a-line);
    border-radius: 12px;
    border-top: 3px solid var(--a-indigo);
}
.a-card-i { display: block; font-size: 1.5rem; line-height: 1; margin-bottom: 0.6rem; }
.a-card-t { display: block; font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: 0.4rem; }
.a-card p { margin: 0; font-size: 0.93rem; line-height: 1.7; color: var(--a-ink-soft); }

/* ---------- Nummerierte Schritte ------------------------------------------ */
.a-steps { list-style: none; margin: 2rem 0; padding: 0; counter-reset: astep; }
.a-steps > li {
    counter-increment: astep;
    position: relative;
    margin: 0 0 1rem;
    padding: 1.1rem 1.35rem 1.1rem 4.1rem;
    background: #F8FAFC;
    border: 1px solid var(--a-line);
    border-radius: 12px;
}
.a-steps > li::before {
    content: counter(astep);
    position: absolute;
    left: 1.15rem;
    top: 1.05rem;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    background: var(--a-indigo);
    color: #FFFFFF;                 /* 7,9:1 */
    border-radius: 9px;
    font-weight: 700;
    font-size: 0.9rem;
    font-family: var(--mono);
}
.a-steps .a-step-t { display: block; font-weight: 700; color: var(--navy); margin-bottom: 0.25rem; }
.a-steps p { margin: 0; font-size: 0.94rem; line-height: 1.7; color: #334155; }

/* ---------- Zeitleiste ---------------------------------------------------- */
.a-time { margin: 2rem 0; padding-left: 1.5rem; border-left: 3px solid var(--a-line); }
.a-time-i { position: relative; padding: 0 0 1.4rem 0.85rem; }
.a-time-i:last-child { padding-bottom: 0; }
.a-time-i::before {
    content: "";
    position: absolute;
    left: -2.05rem;
    top: 0.35rem;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 3px solid var(--a-indigo);
}
.a-time-i[data-state="done"]::before { background: #0B6B4F; border-color: #0B6B4F; }
.a-time-i[data-state="open"]::before { background: #FFFFFF; border-color: #7C4A03; }
.a-time-d {
    display: block;
    font-family: var(--mono);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--a-indigo);
    margin-bottom: 0.2rem;
}
.a-time-t { display: block; font-weight: 700; color: var(--navy); margin-bottom: 0.2rem; }
.a-time-i p { margin: 0; font-size: 0.93rem; line-height: 1.7; color: var(--a-ink-soft); }

/* ---------- Gegenueberstellung -------------------------------------------- */
.a-vs { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0.9rem; margin: 2rem 0; }
.a-vs-col { padding: 1.25rem 1.35rem; border-radius: 12px; border: 1.5px solid; }
.a-vs-col ul { margin: 0.6rem 0 0 1.1rem; padding: 0; }
.a-vs-col li { margin-bottom: 0.4rem; font-size: 0.93rem; line-height: 1.65; }
.a-vs-t { display: block; font-weight: 700; font-size: 0.95rem; }
.a-vs--pro { background: #ECFDF5; border-color: #6EE7B7; color: #0B6B4F; }
.a-vs--con { background: #FEF2F2; border-color: #FCA5A5; color: #9B1C1C; }
.a-vs--a   { background: #EFF6FF; border-color: #93C5FD; color: #0B4A6F; }
.a-vs--b   { background: #F5F3FF; border-color: #C4B5FD; color: #6B2E8F; }

/* ---------- Prueflisten ---------------------------------------------------- */
.a-check { list-style: none; margin: 1.8rem 0; padding: 0; }
.a-check > li {
    position: relative;
    padding: 0.45rem 0 0.45rem 2.1rem;
    font-size: 0.97rem;
    line-height: 1.7;
    color: #334155;
    border-bottom: 1px solid var(--a-line);
}
.a-check > li:last-child { border-bottom: 0; }
.a-check > li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0.45rem;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    background: #ECFDF5;
    color: #0B6B4F;                 /* 6,2:1 */
    border: 1px solid #6EE7B7;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
}
.a-check--ask > li::before { content: "?"; background: #EFF6FF; color: #0B4A6F; border-color: #93C5FD; }
.a-check--no  > li::before { content: "×"; background: #FEF2F2; color: #9B1C1C; border-color: #FCA5A5; }
.a-check strong { color: var(--navy); }

/* ---------- Zitat ---------------------------------------------------------- */
.a-quote {
    margin: 2.2rem 0;
    padding: 1.5rem 1.75rem;
    background: var(--navy);
    border-radius: 14px;
    color: #F1F5F9;                 /* 15,6:1 */
    font-size: 1.08rem;
    line-height: 1.7;
    font-weight: 500;
}
.a-quote-c { display: block; font-size: 0.8rem; color: #94A3B8; margin-top: 0.7rem; }  /* 7,0:1 */

/* ---------- Tabelle ------------------------------------------------------- */
.a-tab { overflow-x: auto; margin: 1.9rem 0; border: 1px solid var(--a-line); border-radius: 12px; }
.a-tab table { width: 100%; border-collapse: collapse; margin: 0; font-size: 0.92rem; min-width: 460px; }
.a-tab th { background: var(--navy); color: #FFFFFF; padding: 0.75rem 1rem; text-align: left; font-size: 0.8rem; letter-spacing: 0.4px; }
.a-tab td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--a-line); color: #334155; vertical-align: top; }
.a-tab tr:nth-child(even) td { background: #F8FAFC; }
.a-tab tr:last-child td { border-bottom: 0; }
.a-tab caption { caption-side: bottom; padding: 0.6rem 1rem; font-size: 0.78rem; color: var(--medium-gray); text-align: left; }

/* ---------- Quellen -------------------------------------------------------- */
.a-src {
    margin: 2.2rem 0 0;
    padding: 1.15rem 1.35rem;
    background: #F8FAFC;
    border: 1px dashed var(--light-gray);
    border-radius: 10px;
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--a-ink-soft);
}
.a-src-t {
    display: block;
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--medium-gray);
    margin-bottom: 0.5rem;
}
.a-src ul { margin: 0 0 0 1.1rem; padding: 0; }
.a-src li { margin-bottom: 0.3rem; }

/* ---------- Weiterlesen ---------------------------------------------------- */
.a-next {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 2rem 0;
    padding: 1.15rem 1.35rem;
    background: #F1F5F9;
    border-radius: 12px;
    align-items: center;
}
.a-next-t {
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--a-ink-soft);        /* 6,9:1 auf #F1F5F9 */
    width: 100%;
}
.a-next a {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    background: #FFFFFF;
    border: 1.5px solid var(--light-gray);
    border-radius: 50px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--a-indigo);
    text-decoration: none;
}
.a-next a:hover { border-color: var(--a-indigo); background: #EEF2FF; color: var(--a-indigo); }

/* ---------- Kleinkram ------------------------------------------------------ */
.a-kbd {
    font-family: var(--mono);
    font-size: 0.85em;
    background: #F1F5F9;
    border: 1px solid var(--light-gray);
    border-bottom-width: 2px;
    border-radius: 5px;
    padding: 0.1rem 0.4rem;
    color: #334155;
}
.prose h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--navy);
    margin: 1.6rem 0 0.5rem;
    scroll-margin-top: 90px;
}
.prose hr { border: 0; border-top: 1px solid var(--a-line); margin: 2.5rem 0; }
.prose .a-small { font-size: 0.86rem; color: var(--medium-gray); }

/* ---------- Fokus sichtbar halten ------------------------------------------ */
.prose a:focus-visible,
.a-next a:focus-visible {
    outline: 3px solid var(--a-indigo);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ---------- Druck ---------------------------------------------------------- */
@media print {
    .a-stat { background: #FFFFFF; border: 1px solid #333; }
    .a-stat-v, .a-stat-l { color: #000; }
    .a-quote { background: #FFFFFF; color: #000; border: 1px solid #333; }
    .a-quote-c { color: #333; }
    .a-tab th { background: #FFFFFF; color: #000; border-bottom: 2px solid #333; }
    .a-next { display: none; }
}

/* ---------- Schmale Anzeigen ----------------------------------------------- */
@media (max-width: 640px) {
    .a-note { padding: 1rem 1.05rem 1rem 2.9rem; }
    .a-note::before { left: 0.9rem; }
    .a-steps > li { padding: 1rem 1.05rem 1rem 3.6rem; }
    .a-steps > li::before { left: 0.9rem; }
    .a-quote { padding: 1.25rem 1.3rem; font-size: 1rem; }
}

/* ---------- Reduzierte Bewegung -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .a-card, .a-next a { transition: none; }
}

/* ==========================================================================
   GLIEDERUNG: Seitenspalte und Autorenkasten
   --------------------------------------------------------------------------
   In den Vorlagen standen dort <h4> nach einer <h2> - ein Sprung von zwei
   Ebenen, den Pruefwerkzeuge zu Recht bemaengeln. Die Elemente sind jetzt
   <h2>; damit sich optisch nichts aendert, wird die Groesse hier gesetzt.
   ========================================================================== */
.sidebar-card h2.sidebar-h {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--light);
    letter-spacing: 0;
}
.author-info h2.author-label {
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--medium-gray);
    display: block;
    margin: 0 0 0.15rem;
}

/* ==========================================================================
   LEXIKON
   --------------------------------------------------------------------------
   Nachschlagen statt lesen: Liste vor Kachel, Begriff vor Bild.
   Kontraste wie oben gemessen, alle Werte ueber 4,5:1.
   ========================================================================== */

.gl-kicker {
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #93C5FD;                 /* auf dem dunklen Hero: 7,4:1 */
    margin-bottom: 0.5rem;
}
.gl-alias { margin-top: 0.6rem; font-size: 0.92rem; color: #CBD5E1; }

/* --- Werkzeugleiste --- */
.gl-tools { margin: 0 0 1.5rem; }
.gl-search-label {
    display: block;
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #475569;
    margin-bottom: 0.5rem;
}
.gl-search {
    width: 100%;
    padding: 0.85rem 1.1rem;
    font-family: var(--font);
    font-size: 1rem;
    color: var(--navy);
    background: #FFFFFF;
    border: 2px solid var(--light-gray);
    border-radius: 12px;
}
.gl-search::placeholder { color: #64748B; }   /* 5,7:1 */
.gl-search:focus { outline: 3px solid #4338CA; outline-offset: 2px; border-color: #4338CA; }
.gl-count { margin-top: 0.5rem; font-size: 0.85rem; color: #475569; }

/* --- A-Z --- */
.gl-alpha { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0 0 1.5rem; }
.gl-alpha a, .gl-alpha span {
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    padding: 0 0.4rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    font-family: var(--mono);
}
.gl-alpha a { background: #FFFFFF; border: 1.5px solid var(--light-gray); color: #4338CA; }
.gl-alpha a:hover, .gl-alpha a:focus-visible { background: #4338CA; color: #FFFFFF; border-color: #4338CA; }
.gl-alpha span { color: #94A3B8; border: 1.5px solid transparent; }  /* 2,6:1 – rein dekorativ, aria-hidden */

/* --- Bereiche --- */
.gl-cats { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; margin: 0 0 2rem; }
.gl-cats-label { font-size: 0.82rem; font-weight: 600; color: #475569; }
.gl-cat {
    font-family: var(--font);
    font-size: 0.85rem;
    padding: 0.35rem 0.85rem;
    background: #FFFFFF;
    border: 1.5px solid var(--light-gray);
    border-radius: 50px;
    color: #334155;
    cursor: pointer;
}
.gl-cat:hover { border-color: #4338CA; color: #4338CA; }
.gl-cat[aria-pressed="true"] { background: #4338CA; border-color: #4338CA; color: #FFFFFF; }
.gl-cat[aria-pressed="true"] .chip-count { color: #E0E7FF; }
.gl-cat:focus-visible { outline: 3px solid #4338CA; outline-offset: 2px; }

/* --- Liste --- */
.gl-group { margin-bottom: 2rem; }
.gl-letter {
    font-family: var(--mono);
    font-size: 1.5rem;
    font-weight: 800;
    color: #4338CA;
    margin: 0 0 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid var(--light);
    scroll-margin-top: 90px;
}
.gl-list { list-style: none; margin: 0; padding: 0; }
.gl-item { border-bottom: 1px solid #E2E8F0; }
.gl-item:last-child { border-bottom: 0; }
.gl-item > a {
    display: grid;
    grid-template-columns: minmax(140px, 0.34fr) 1fr auto;
    gap: 0.35rem 1rem;
    align-items: baseline;
    padding: 0.8rem 0.35rem;
    text-decoration: none;
    border-radius: 8px;
}
.gl-item > a:hover, .gl-item > a:focus-visible { background: #F1F5F9; }
.gl-term { font-weight: 700; color: var(--navy); font-size: 0.98rem; }
.gl-def  { color: #475569; font-size: 0.92rem; line-height: 1.6; }
.gl-arrow { color: #4338CA; font-weight: 700; }
.gl-empty { padding: 2rem 0; color: #475569; font-size: 0.95rem; }

@media (max-width: 720px) {
    .gl-item > a { grid-template-columns: 1fr auto; }
    .gl-def { grid-column: 1 / -1; }
}

/* --- Detailseite --- */
.gl-single { max-width: 46rem; }
.gl-answer {
    margin: 0 0 2.2rem;
    padding: 1.5rem 1.75rem;
    background: #EEF2FF;
    border: 1.5px solid #C7D2FE;
    border-left: 5px solid #4338CA;
    border-radius: 12px;
}
.gl-answer-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #3730A3;                 /* 8,9:1 auf #EEF2FF */
    margin: 0 0 0.6rem;
}
.gl-answer-text {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.75;
    color: #1E1B4B;                 /* 14,7:1 */
    font-weight: 500;
}
.gl-mark {
    background: #C7D2FE;
    color: #1E1B4B;
    padding: 0.05em 0.3em;
    border-radius: 4px;
    font-weight: 700;
}

.gl-related { list-style: none; margin: 1.25rem 0; padding: 0; display: grid; gap: 0.5rem; }
.gl-related a {
    display: block;
    padding: 0.75rem 1rem;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    text-decoration: none;
}
.gl-related a:hover { border-color: #4338CA; background: #EEF2FF; }
.gl-related strong { display: block; color: var(--navy); font-size: 0.95rem; }
.gl-related span { display: block; margin-top: 0.15rem; font-size: 0.86rem; color: #475569; line-height: 1.55; }

/* ==========================================================================
   AUTORENPROFIL
   ========================================================================== */
.au-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 1rem 0 1.5rem; }
.au-tag {
    font-size: 0.85rem;
    padding: 0.3rem 0.8rem;
    background: #EEF2FF;
    border: 1px solid #C7D2FE;
    border-radius: 50px;
    color: #3730A3;                 /* 8,9:1 */
}
.au-profiles { list-style: none; margin: 1.1rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.6rem; }
.au-profiles a {
    display: block;
    padding: 0.8rem 1rem;
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    text-decoration: none;
}
.au-profiles a:hover { border-color: #4338CA; background: #EEF2FF; }
.au-profiles strong { display: block; color: var(--navy); font-size: 0.93rem; }
.au-profiles span { display: block; margin-top: 0.1rem; font-size: 0.8rem; color: #475569; word-break: break-all; }
.au-posts { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid #E2E8F0; }
.page-hero--tight { padding-bottom: 2rem; }
.author-info .au-role { display:block; font-size:0.82rem; color:#475569; margin-bottom:0.4rem; }


/* ------------------------------------------------------------------
   Zweitlink im Autorenkasten
   Der Hauptlink (Profil) bleibt betont, dieser tritt zurueck.
   Kontrast #4b5563 auf #f9fafb = 7,4:1 – weit ueber der Anforderung,
   damit "zurueckhaltend" nicht "schlecht lesbar" heisst.
------------------------------------------------------------------ */
.author-info .au-about {
    display: block;
    margin-top: .35rem;
    font-size: .8125rem;
    font-weight: 500;
    color: #4b5563;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    width: fit-content;
}
.author-info .au-about:hover,
.author-info .au-about:focus-visible {
    color: #1f2937;
    border-bottom-color: currentColor;
}