/* STUDIO Ghost-Kommentare im Stil der Seite. Diese Datei gilt nur im Fenster (iframe „comments-frame“) von Ghost,
   js/comments.js legt sie dort hinein. Der Rahmen drumherum (graue Kachel, Kopf) steht in css/comments-section.css.
   Aufbau: Schreibfeld als weiße Karte mit Name darüber und tippenden Satzanfängen, jeder Kommentar mit seinen Antworten als
   weiße Karte, Aktionen als kleine Pillen, Profilkreise in einer eigenen Palette (data-tone aus js/comments.js).
   Gäste: dasselbe Feld als Einladung (.studio-cta). Keine Kommentare: Hinweis-Karte (.studio-empty).
   Klassen und data-testid stammen von Ghost (Tailwind). Nach Ghost-Updates kurz prüfen. */

:root {
    --c-ink: light-dark(#0A0A0A, #EDEDED);
    --c-text: light-dark(#1C1C1C, #E2E2E2);
    --c-muted: light-dark(#707070, #9A9A9A);
    --c-soft: light-dark(#A3A3A3, #6E6E6E);
    --c-tile: light-dark(#F5F5F5, #282828);
    --c-tile-hover: light-dark(#EDEDED, #313131);
    --c-line: light-dark(#E6E6E6, #2C2C2C);
    --c-card: light-dark(#FFFFFF, #1E1E1E);
    --c-on-ink: light-dark(#FFFFFF, #0A0A0A);
    --c-radius: 24px;
    --c-ease: cubic-bezier(.2, .8, .2, 1);
}

html,
body {
    background: transparent !important;
}

#comments-section,
#comments-section * {
    font-family: "InterVariable", "Inter", -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-feature-settings: "cv11", "ss01";
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
}

#comments-section {
    padding: 0 0 4px !important;
    color: var(--c-ink);
}

#comments-section button {
    cursor: pointer;
}

#comments-section button:focus {
    outline: none;
}

#comments-section button:focus-visible,
#comments-section a:focus-visible {
    outline: 2px solid var(--c-ink);
    outline-offset: 2px;
    border-radius: 999px;
}

/* ---------- Profilkreise ---------- */

#comments-section figure[data-testid="avatar"],
#comments-section figure[data-testid="avatar"] > div,
#comments-section figure[data-testid="avatar"] img {
    width: 40px !important;
    height: 40px !important;
}

#comments-section [data-testid="avatar-background"] {
    box-shadow: inset 0 0 0 1px rgba(10, 10, 10, .06);
}

#comments-section [data-testid="avatar-background"] p {
    color: #0A0A0A !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
}

/* Eigene Palette statt Ghosts zufälliger Farben: hell, freundlich, mit schwarzer Schrift. Welche Farbe, entscheidet der Name */
#comments-section [data-tone="0"] { background: #FFD9C4 !important; }
#comments-section [data-tone="1"] { background: #CFE2FF !important; }
#comments-section [data-tone="2"] { background: #E2DAFF !important; }
#comments-section [data-tone="3"] { background: #C9EED8 !important; }
#comments-section [data-tone="4"] { background: #FFEBA3 !important; }
#comments-section [data-tone="5"] { background: #FFD4E3 !important; }
#comments-section [data-tone="6"] { background: #CDEDF0 !important; }
#comments-section [data-tone="7"] { background: #E9E3D8 !important; }

/* ---------- Schreibfeld ---------- */

#comments-section [data-testid="main-form"] {
    padding: 0 !important;
    margin-bottom: 28px;
}

#comments-section [data-testid="main-form"] > div {
    margin: 0 !important;
}

/* Kopfzeile über jedem Schreibfeld: Profilkreis, Name, Beruf. Das Feld darunter über die ganze Breite.
   Ghost zeigt den Namen erst beim Klick ins Feld und schiebt das Feld dann nach unten. Darum ist der Platz immer reserviert
   und js/comments.js setzt den Namen schon vorher hinein (.studio-me) */
#comments-section .pl-\[40px\] {
    padding-left: 0 !important;
    padding-top: 48px !important;
    margin-bottom: 0 !important;
    transition: none !important;
}

#comments-section .pl-\[40px\] + .absolute.left-0 {
    top: 0 !important;
    height: 36px !important;
    align-items: center !important;
}

#comments-section .pl-\[40px\] + .absolute.left-0 figure,
#comments-section .pl-\[40px\] + .absolute.left-0 figure > div,
#comments-section .pl-\[40px\] + .absolute.left-0 figure img {
    width: 36px !important;
    height: 36px !important;
}

#comments-section .pl-\[40px\] + .absolute.left-0 .grow-1 {
    margin-top: 0 !important;
}

#comments-section .studio-me,
#comments-section [data-testid="form-header"] {
    color: var(--c-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 36px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#comments-section .studio-me span {
    color: var(--c-muted);
    font-weight: 400;
}

#comments-section .grow-1:has([data-testid="form-header"]) .studio-me {
    display: none;
}

#comments-section [data-testid="form-header"] > div {
    flex-wrap: nowrap !important;
    align-items: baseline;
    gap: 0;
}

#comments-section [data-testid="form-header"] [data-testid="member-name"] {
    width: auto !important;
    flex: none;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 36px !important;
}

/* Ghost blendet den Punkt zwischen Name und Beruf am Handy aus, wir zeigen ihn immer. Gleiche Schrift wie .studio-me, damit beim Klick nichts springt */
#comments-section [data-testid="form-header"] .mx-\[0\.3em\] {
    display: inline !important;
}

#comments-section [data-testid="expertise-button"] {
    font-size: 15px !important;
    line-height: 36px !important;
    text-decoration: none !important;
}

#comments-section [data-testid="form-editor"] {
    min-height: 128px;
    padding: 16px 18px 72px !important;
    background: var(--c-tile) !important;
    border: 1px solid transparent !important;
    border-radius: 20px !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    color: var(--c-text);
    transition: background-color .2s, border-color .2s, box-shadow .2s;
}

/* Das große Schreibfeld liegt direkt auf der grauen Kachel, darum weiß */
#comments-section [data-testid="main-form"] [data-testid="form-editor"] {
    background: var(--c-card) !important;
    border-radius: var(--c-radius) !important;
    box-shadow: 0 1px 2px rgba(10, 10, 10, .04);
}

#comments-section [data-testid="form-editor"]:hover {
    border-color: var(--c-line) !important;
}

#comments-section [data-testid="form-editor"]:focus-within {
    background: var(--c-card) !important;
    border-color: var(--c-ink) !important;
    box-shadow: 0 0 0 4px light-dark(rgba(10, 10, 10, .06), rgba(255, 255, 255, .08));
}

#comments-section .ProseMirror p.is-editor-empty:first-child::before {
    color: light-dark(#8A8A8A, #7C7C7C) !important;
}

/* Sich selbst tippende Satzanfänge (js/comments.js) liegen über dem leeren Feld, genau dort, wo der Cursor beginnt.
   Ghosts eigener Platzhalter ist dann aus. Grau #8A8A8A: gut lesbar, aber klar als Platzhalter zu erkennen */
#comments-section [data-studio-typer] {
    position: relative;
}

#comments-section [data-studio-typer] .ProseMirror p.is-editor-empty:first-child::before {
    content: none !important;
}

#comments-section .studio-typer {
    position: absolute;
    top: 17px;
    left: 19px;
    right: 19px;
    overflow: hidden;
    color: light-dark(#8A8A8A, #7C7C7C);
    font-size: 16px;
    line-height: 1.55;
    white-space: nowrap;
    pointer-events: none;
}

#comments-section .studio-typer[hidden] {
    display: none;
}

/* Blinkender Strich hinter dem getippten Text */
#comments-section .studio-typer > span::after {
    content: "";
    display: inline-block;
    width: 1.5px;
    height: 1.1em;
    margin-left: 1px;
    background: var(--c-ink);
    vertical-align: -0.18em;
    animation: c-caret 1.1s steps(1) infinite;
}

#comments-section .studio-typer-probe {
    position: absolute;
    visibility: hidden;
    white-space: nowrap;
}

/* Nur ein Satzanfang im Feld: Absenden gesperrt, Knopf sieht aus wie beim leeren Feld */
#comments-section [data-starter-only] [data-testid="submit-form-button"] {
    background: var(--c-line) !important;
    color: var(--c-soft) !important;
    pointer-events: none;
}

#comments-section [data-testid="form-editor"] + div {
    right: 12px !important;
    bottom: 12px !important;
    gap: 6px;
}

#comments-section [data-testid="submit-form-button"] {
    height: 44px !important;
    padding: 0 22px !important;
    border-radius: 999px !important;
    background: var(--c-ink) !important;
    color: var(--c-on-ink) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    transition: transform .2s var(--c-ease), opacity .2s;
}

#comments-section [data-testid="submit-form-button"]:not(:disabled):hover {
    transform: translateY(-1px);
}

#comments-section [data-testid="submit-form-button"]:disabled {
    background: var(--c-line) !important;
    color: var(--c-soft) !important;
    cursor: default;
}

/* „Abbrechen“ neben dem Knopf beim Antworten */
#comments-section form button:not([data-testid="submit-form-button"]) {
    height: 44px;
    padding: 0 16px !important;
    border-radius: 999px;
    color: var(--c-muted) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    transition: background-color .2s, color .2s;
}

#comments-section form button:not([data-testid="submit-form-button"]):hover {
    background: var(--c-tile-hover);
    color: var(--c-ink) !important;
}

/* Name und „Ergänze deine Expertise“ über dem Antwortfeld */
#comments-section form h4,
#comments-section [data-testid="form-header"] h4 {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--c-ink) !important;
}

#comments-section [data-testid="form-header"] button,
#comments-section [data-testid="expertise-button"] {
    color: var(--c-muted) !important;
}

#comments-section [data-testid="expertise-button"]:hover {
    color: var(--c-ink) !important;
}

/* ---------- Gäste: Einladung im Stil des Schreibfelds (.studio-cta aus comments-tweaks.hbs) ----------
   Gleich aufgebaut wie das Schreibfeld der Mitglieder: oben eine Zeile, darunter das weiße Feld mit den tippenden
   Satzanfängen und dem Knopf „Bin dabei“. Ghosts Kasten bleibt als Hülle, sein Inhalt ist versteckt */

#comments-section [data-testid="cta-box"][data-studio-cta] {
    display: block !important;
    margin: 0 0 28px;
    padding: 0 !important;
    background: none;
    text-align: left;
}

#comments-section [data-testid="cta-box"][data-studio-cta] > :not(.studio-cta) {
    display: none !important;
}

#comments-section .studio-cta button {
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
}

#comments-section .studio-cta-title {
    margin: 0;
    color: var(--c-ink);
    font-size: 15px !important;
    font-weight: 600;
    line-height: 36px;
}

#comments-section .studio-cta-field {
    position: relative;
    min-height: 128px;
    margin-top: 12px;
    padding: 17px 19px 72px;
    background: var(--c-card);
    border: 1px solid transparent;
    border-radius: var(--c-radius);
    box-shadow: 0 1px 2px rgba(10, 10, 10, .04);
    cursor: text;
    transition: border-color .2s;
}

#comments-section .studio-cta-field:hover {
    border-color: var(--c-line);
}

/* Die tippenden Satzanfänge liegen hier im Fluss des Felds, nicht darüber */
#comments-section .studio-cta-field .studio-typer {
    position: static;
    display: block;
}

#comments-section .studio-cta-button {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 18px 0 22px;
    border-radius: 999px;
    background: var(--c-ink) !important;
    color: var(--c-on-ink);
    font-size: 15px !important;
    font-weight: 500;
    transition: transform .25s var(--c-ease);
}

#comments-section .studio-cta-button:hover {
    transform: translateY(-1px);
}

#comments-section .studio-cta-button:active {
    transform: scale(.97);
}

/* Pfeil im Knopf stupst alle paar Sekunden kurz nach rechts */
#comments-section .studio-cta-arrow {
    width: 16px;
    height: 16px;
    animation: c-nudge 3.2s var(--c-ease) 1.2s infinite;
}

#comments-section .studio-cta-login {
    margin: 14px 0 0;
    color: var(--c-muted);
    font-size: 14px !important;
}

#comments-section .studio-cta-login button {
    color: var(--c-ink);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--c-ink) 25%, transparent);
    text-underline-offset: 3px;
}

@keyframes c-nudge {
    0%, 20%, 100% { transform: translateX(0); }
    8% { transform: translateX(4px); }
    14% { transform: translateX(-1px); }
}

@keyframes c-caret {
    0%, 50% { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}

/* ---------- Noch keine Kommentare (Karte aus js/comments.js) ---------- */

/* Ohne Kommentare gibt es nichts zu sortieren */
#comments-section[data-studio-empty] .z-20.mb-7 {
    display: none;
}

#comments-section .studio-empty {
    margin-top: 12px;
    padding: 36px 32px;
    background: var(--c-card);
    border-radius: var(--c-radius);
    box-shadow: 0 1px 2px rgba(10, 10, 10, .04);
    animation: c-rise .5s var(--c-ease) backwards;
}

#comments-section .studio-empty-title {
    margin: 0 0 8px;
    color: var(--c-ink);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em !important;
}

#comments-section .studio-empty-text {
    max-width: 36ch;
    margin: 0 0 24px;
    color: var(--c-muted);
    font-size: 16px;
    line-height: 1.5;
}

#comments-section .studio-empty-button {
    height: 48px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background: var(--c-ink);
    color: var(--c-on-ink);
    font-size: 15px;
    font-weight: 500;
    transition: transform .2s var(--c-ease);
}

#comments-section .studio-empty-button:hover {
    transform: translateY(-1px);
}

/* ---------- Sortierung ---------- */

#comments-section .z-20.mb-7 {
    margin: 0 0 14px !important;
}

#comments-section .z-20.mb-7 > span {
    gap: 8px !important;
    color: var(--c-muted) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

#comments-section [data-testid="comments-sorting-form"] > button {
    gap: 8px !important;
    height: 36px;
    padding: 0 14px 0 16px;
    background: var(--c-card);
    border-radius: 999px;
    color: var(--c-ink) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    box-shadow: 0 1px 2px rgba(10, 10, 10, .04);
    transition: box-shadow .2s;
}

#comments-section [data-testid="comments-sorting-form"] > button:hover {
    box-shadow: 0 0 0 1px var(--c-line), 0 1px 2px rgba(10, 10, 10, .04);
}

#comments-section [data-testid="comments-sorting-form"] > button svg {
    width: 9px;
    height: 9px;
}

/* Aufgeklappte Liste als kleine weiße Karte */
#comments-section [data-testid="comments-sorting-form"] > div {
    left: 0 !important;
    width: 188px !important;
    margin-top: 8px !important;
    padding: 6px;
    background: var(--c-card) !important;
    border-radius: 18px !important;
    box-shadow: 0 0 0 1px light-dark(rgba(10, 10, 10, .05), rgba(255, 255, 255, .08)), 0 16px 40px rgba(10, 10, 10, .12) !important;
    transform-origin: top left;
    animation: c-pop .18s var(--c-ease);
}

#comments-section [data-testid="comments-sorting-form-dropdown"] {
    display: grid;
    gap: 2px;
    padding: 0 !important;
}

#comments-section [role="menuitem"] {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 0 14px !important;
    border-radius: 12px;
    color: var(--c-ink) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    transition: background-color .15s;
}

#comments-section [role="menuitem"]:hover {
    background: var(--c-tile);
}

/* Gewählte Reihenfolge: fett mit Haken (data-active aus js/comments.js) */
#comments-section [role="menuitem"][data-active] {
    font-weight: 600 !important;
}

#comments-section [role="menuitem"][data-active]::after {
    content: "";
    width: 12px;
    height: 7px;
    margin: 0 2px 4px 0;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}

/* ---------- Kommentare ---------- */

#comments-section [data-testid="comment-elements"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

/* Jeder Kommentar mit seinen Antworten ist eine weiße Karte */
#comments-section [data-testid="comment-elements"] > [data-testid="animated-comment"] {
    padding: 24px 24px 8px;
    background: var(--c-card);
    border-radius: var(--c-radius);
    box-shadow: 0 1px 2px rgba(10, 10, 10, .04);
    animation: c-rise .5s var(--c-ease) backwards;
}

/* Ghost setzt unter jeden Kommentar viel Abstand (pb-7). In der Karte regelt das .grow unten */
#comments-section [data-testid="animated-comment"] > .relative {
    padding-bottom: 0 !important;
}

#comments-section [data-testid="comment-component"] {
    margin: 0 !important;
}

#comments-section [data-testid="comment-component"] > div:first-child {
    margin-right: 14px !important;
}

#comments-section [data-testid="comment-component"] .grow {
    min-width: 0;
    padding-bottom: 16px !important;
}

/* Name, Beruf, Datum */
#comments-section [data-testid="comment-component"] h4 {
    color: var(--c-ink) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

#comments-section h4 + div {
    color: var(--c-muted) !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

#comments-section h4 + div a {
    color: inherit !important;
    white-space: nowrap;
}

#comments-section h4 + div a:hover {
    color: var(--c-ink) !important;
    text-decoration: none !important;
}

/* Punkt nur zwischen Beruf und Datum, nicht vor dem Namen oder allein vor dem Datum */
#comments-section h4 + div span .mx-\[0\.3em\] {
    display: none !important;
}

#comments-section h4 + div .\[overflow-wrap\:anywhere\] + a .mx-\[0\.3em\] {
    display: inline !important;
}

/* Name und Angaben stehen untereinander, auch am Rechner */
#comments-section [data-testid="comment-component"] .mb-2.mt-0\.5 {
    flex-direction: column !important;
    gap: 2px;
    margin: 0 0 10px !important;
}

/* Angeheftet: kleine schwarze Pille */
#comments-section [data-testid="pinned-comment-label"] {
    gap: 5px !important;
    height: 22px;
    margin-left: 4px;
    padding: 0 9px !important;
    background: var(--c-ink) !important;
    border: 0 !important;
    color: var(--c-on-ink) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

#comments-section [data-testid="pinned-comment-label"] svg {
    width: 11px;
    height: 11px;
    color: var(--c-on-ink);
}

#comments-section [data-testid="pinned-comment-label"] path {
    stroke: currentColor;
}

/* Text */
#comments-section [data-testid="comment-content"] {
    color: var(--c-text) !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
}

#comments-section [data-testid="comment-content"] p + p {
    margin-top: .8em;
}

#comments-section [data-testid="comment-content"] a {
    color: var(--c-ink);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--c-ink) 25%, transparent);
    text-underline-offset: 3px;
}

#comments-section [data-testid="comment-in-reply-to"],
#comments-section [data-testid="replying-to"] {
    color: var(--c-muted) !important;
    font-size: 13px !important;
}

/* ---------- Aktionen: Daumen, Antworten, Mehr als kleine Pillen ---------- */

#comments-section [data-testid="comment-component"] .grow > .flex.items-center:last-child,
#comments-section [data-testid="comment-component"] .grow > div > .flex.items-center:last-child {
    gap: 4px !important;
    margin-left: -10px;
}

#comments-section [data-testid="like-button"],
#comments-section [data-testid="dislike-button"],
#comments-section [data-testid="reply-button"],
#comments-section [data-testid="more-button"] > button {
    display: inline-flex !important;
    align-items: center;
    gap: 6px !important;
    height: 34px;
    padding: 0 12px !important;
    border-radius: 999px;
    color: var(--c-muted) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: background-color .2s, color .2s, transform .2s var(--c-ease) !important;
}

#comments-section [data-testid="dislike-button"],
#comments-section [data-testid="more-button"] > button {
    width: 34px;
    padding: 0 !important;
    justify-content: center;
}

#comments-section [data-testid="like-button"]:hover,
#comments-section [data-testid="dislike-button"]:hover,
#comments-section [data-testid="reply-button"]:hover,
#comments-section [data-testid="more-button"] > button:hover {
    background: var(--c-tile);
    color: var(--c-ink) !important;
}

#comments-section [data-testid="like-button"]:active,
#comments-section [data-testid="dislike-button"]:active,
#comments-section [data-testid="reply-button"]:active {
    transform: scale(.94);
}

#comments-section [data-testid="like-button"] svg,
#comments-section [data-testid="dislike-button"] svg,
#comments-section [data-testid="reply-button"] svg,
#comments-section [data-testid="more-button"] svg {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
}

/* Gefällt mir: schwarze Pille, der Daumen hüpft kurz */
#comments-section [data-testid="like-button"][aria-label="Remove like"] {
    background: var(--c-ink);
    color: var(--c-on-ink) !important;
}

#comments-section [data-testid="like-button"][aria-label="Remove like"] svg {
    animation: c-like .45s var(--c-ease);
}

#comments-section [data-testid="like-button"][aria-label="Remove like"] path {
    fill: currentColor;
    stroke: currentColor;
}

#comments-section [data-testid="dislike-button"][aria-label="Remove dislike"] {
    background: var(--c-tile-hover);
    color: var(--c-ink) !important;
}

#comments-section .tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* Menü unter „Mehr“ (Kopieren, Bearbeiten, Löschen, Melden). Klappt nach links auf, damit es nie rechts aus dem Fenster ragt */
#comments-section [data-testid="comment-context-menu-inner"] {
    right: 0;
    left: auto !important;
    min-width: 168px;
    padding: 6px !important;
    background: var(--c-card) !important;
    border-radius: 16px !important;
    box-shadow: 0 0 0 1px light-dark(rgba(10, 10, 10, .05), rgba(255, 255, 255, .08)), 0 16px 40px rgba(10, 10, 10, .12) !important;
}

/* Unter dem Knopf „…“ mit etwas Abstand. Ist unten zu wenig Platz, klappt Ghost das Menü selbst nach oben (bottom-full) */
#comments-section [data-testid="comment-context-menu-inner"]:not(.bottom-full) {
    top: calc(100% + 6px) !important;
}

#comments-section [data-testid="comment-context-menu-inner"].bottom-full {
    margin-bottom: 6px !important;
}

#comments-section [data-testid="comment-context-menu-inner"] button {
    width: 100%;
    height: 38px;
    padding: 0 12px !important;
    border-radius: 10px;
    color: var(--c-ink) !important;
    font-size: 14px !important;
    text-align: left;
}

#comments-section [data-testid="comment-context-menu-inner"] button:hover {
    background: var(--c-tile);
}

/* ---------- Antworten (Faden) ---------- */

#comments-section [data-testid="replies-line"] {
    border-color: var(--c-line) !important;
}

#comments-section .pointer-events-none.absolute.-left-4 {
    border-color: var(--c-line) !important;
}

#comments-section [data-testid="reply-form-continuation-line"] {
    display: none;
}

#comments-section [data-testid="reply-form"] {
    margin-bottom: 16px;
}

/* Weitere Antworten und weitere Kommentare laden: Pillen */
#comments-section [data-testid="reply-pagination-button"],
#comments-section [data-testid="pagination-component"] {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    height: 36px;
    margin: 0 0 16px !important;
    padding: 0 16px !important;
    background: var(--c-tile);
    border-radius: 999px;
    color: var(--c-ink) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

#comments-section [data-testid="reply-pagination-button"] span {
    color: inherit !important;
    opacity: 1 !important;
}

/* ---------- Bewegung ---------- */

@keyframes c-rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

@keyframes c-pop {
    from { opacity: 0; transform: scale(.96) translateY(-4px); }
    to { opacity: 1; transform: none; }
}

@keyframes c-like {
    0% { transform: scale(1); }
    35% { transform: scale(1.35) rotate(-12deg); }
    70% { transform: scale(.92) rotate(4deg); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    #comments-section *,
    #comments-section *::before,
    #comments-section *::after {
        animation: none !important;
        transition: none !important;
    }

    /* Fester Platzhalter „Tipp los. Wir denken mit.“ ohne Strich */
    #comments-section .studio-typer > span::after {
        display: none;
    }
}

/* ---------- Handy (Fenster schmaler als 480px) ---------- */

@media (max-width: 479px) {
    #comments-section [data-testid="comment-elements"] > [data-testid="animated-comment"] {
        padding: 18px 16px 4px;
        border-radius: 20px;
    }

    #comments-section figure[data-testid="avatar"],
    #comments-section figure[data-testid="avatar"] > div,
    #comments-section figure[data-testid="avatar"] img {
        width: 34px !important;
        height: 34px !important;
    }

    #comments-section [data-testid="avatar-background"] p {
        font-size: 12px !important;
    }

    #comments-section [data-testid="comment-component"] > div:first-child {
        margin-right: 10px !important;
    }

    /* Antworten am Handy: Feld über die ganze Breite (Name und Kreis stehen darüber), Knöpfe unter dem Feld statt darin */
    #comments-section [data-testid="reply-form"] > .pr-2 {
        padding-right: 0 !important;
    }

    #comments-section [data-testid="reply-form"] [data-testid="form-editor"],
    #comments-section [data-testid="main-form"] [data-testid="form-editor"] {
        min-height: 104px;
        padding-bottom: 16px !important;
    }

    #comments-section [data-testid="reply-form"] [data-testid="form-editor"] + div,
    #comments-section [data-testid="main-form"] [data-testid="form-editor"] + div {
        position: static !important;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-top: 10px;
    }

    #comments-section [data-testid="reply-form"] form button:not([data-testid="submit-form-button"]) {
        margin-left: 0 !important;
    }

    #comments-section .studio-cta-field {
        min-height: 112px;
        padding-bottom: 66px;
    }

    #comments-section .studio-empty {
        padding: 28px 20px;
        border-radius: 20px;
    }

    #comments-section [data-testid="comment-component"] .grow > .flex.items-center:last-child,
    #comments-section [data-testid="comment-component"] .grow > div > .flex.items-center:last-child {
        gap: 0 !important;
        margin-left: -8px;
    }

    #comments-section [data-testid="like-button"],
    #comments-section [data-testid="reply-button"] {
        padding: 0 9px !important;
    }
}