:root {
    --faq-font: "Segoe UI", system-ui, sans-serif;
}

:root {
  --faq-accent:    #1a6b4a;
  --faq-accent-lt: #e8f5ee;
  --faq-text:      #1c2b22;
  --faq-muted:     #6b7f72;
  --faq-border:    #d4e4da;
  --faq-bg:        #f7faf8;
  --faq-card-bg:   #ffffff;
  --faq-radius:    10px;
  --faq-shadow:    0 2px 12px rgba(26,107,74,.08);
}

/* ── Fragen-Container (print-containerX) ─────────────────── */
div[id^="print-container"] {
    margin: 0;
    padding: 0;
}
div[id^="print-container"] + div[id^="print-container"] {
    margin-top: 20px;
}
/* Browser-Default p{margin:1em} reset mit höchster Spezifität */
td.content h3.frage,
h3.frage {
    font-family: var(--faq-font);
    font-size: 1rem;
    font-weight: 500;
    color: var(--faq-text);
    background: #f4f4f4;
    border: 1px solid var(--faq-border);
    border-radius: var(--faq-radius);
    box-sizing: border-box;
    width: 100%;
    padding: .7rem 1rem;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    cursor: pointer;
    text-align: left;
    outline: none;
    text-indent: 0;
    transition: background .18s, border-color .18s, border-radius .18s;
    line-height: 1.5;
    display: grid;
    grid-template-columns: 2.2rem 1fr 1.4rem;
    align-items: center;
    caret-color: transparent;
}

h3.frage:hover {
    background: var(--faq-accent-lt);
    border-color: var(--faq-accent);
}

h3.frage.active {
    background: var(--faq-accent-lt);
    color: var(--faq-accent);
    border-color: var(--faq-accent);
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    font-weight: 600;
}

/* Nummer-Spalte */
h3.frage .acc-num {
    font-size: .8rem;
    color: var(--faq-muted);
    text-align: right;
    padding-right: .9rem;
    white-space: nowrap;
}
h3.frage.active .acc-num {
    color: var(--faq-accent);
    opacity: .6;
}

/* Text-Spalte — füllt den Platz */
h3.frage .acc-text {
    display: block;
}

/* Pfeil-Spalte — immer oben rechts, dreht sich bei active */
h3.frage:after {
    content: '›';
    font-size: 1.3rem;
    line-height: 1.5;
    text-align: center;
    color: var(--faq-accent);
    display: block;
    align-self: center;
    transition: transform 0.25s ease;
}

h3.frage.active:after {
    transform: rotate(90deg);
}

/* ── Answer panel ────────────────────────────────────────── */
div.panel {
    font-family: var(--faq-font);
    font-size: .97rem;
    line-height: 1.7;
    color: #111111;
    background: var(--faq-card-bg);
    border: 1px solid var(--faq-accent);
    border-top: none;
    border-radius: 0 0 var(--faq-radius) var(--faq-radius);
    padding: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    margin-top: -1px;
    margin-bottom: 0;
    box-shadow: none;
}

div.panel.show {
    opacity: 1;
    max-height: 10000px;
    padding: 1.2rem 1.4rem 1.4rem;
    box-shadow: 0 4px 16px rgba(26,107,74,.08);
    animation: fadein .22s ease;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

div.panel p,
div.panel ul,
div.panel ol,
div.panel li {
    font-size: .97rem;
    line-height: 1.7;
    font-family: var(--faq-font);
    color: #111111;
}
div.panel ul, div.panel ol { padding-left: 1.5rem; margin: .4rem 0; }
div.panel li { margin-bottom: .5rem; }
div.panel ol li::marker { font-weight: 600; }
div.panel h4, div.panel h5 {
    font-weight: 600;
    color: #111111;
    margin-top: 2em;
    margin-bottom: .4em;
    font-family: var(--faq-font);
}
div.panel h4 {
    font-size: 1.1em;
}
div.panel h5 {
    font-size: 1em;
}
div.panel a { color: var(--faq-accent); text-decoration: underline; text-underline-offset: 2px; }
div.panel a:hover { color: #155a3d; }

/* ── Category headings ───────────────────────────────────── */
h2.faq-cat {
    font-family: var(--faq-font) !important;
    font-size: 1.4em !important;
    color: #1a6b4a !important;
    border-bottom: 2px solid #d4e4da !important;
    padding-bottom: .4rem;
    margin: 2rem 0 .8rem;
}

/* ── Search highlight ────────────────────────────────────── */
mark {
    background: #fff176;
    color: inherit;
    border-radius: 3px;
    padding: 0 2px;
}

/* ── Utility bar (Drucken / Link kopieren) ───────────────── */
div.no-print {
    font-family: var(--faq-font);
    font-size: .85rem;
    color: #444;
    margin-bottom: .8rem;
    display: flex;
    gap: .7rem;
    flex-wrap: wrap;
    align-items: center;
}
/* FIX: Buttons sehen aktiv aus — dunklere Farbe, sichtbarer Rand */
div.no-print a {
    color: #333;
    text-decoration: none;
    border: 1px solid #aaa;
    border-radius: 5px;
    padding: .25rem .75rem;
    background: #fff;
    font-weight: 500;
    transition: border-color .15s, color .15s, background .15s;
}
div.no-print a:hover {
    border-color: var(--faq-accent);
    color: var(--faq-accent);
    background: var(--faq-accent-lt);
}

/* ── Vote buttons ────────────────────────────────────────── */
.votecontainer.no-print,
.votecontainer {
    display: block !important;
    text-align: center;
    margin: 1.8rem 0 .5rem;
}
.votecontainer p {
    font-family: var(--faq-font);
    font-size: .9rem;
    font-weight: 600;
    color: var(--faq-muted);
    margin-bottom: .75rem;
}
.votecontainer button {
    width: 128px;
    font-size: 1.6rem;
    border-radius: 12px;
    padding: .35rem .5rem;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    margin: 0 .4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
}
.votecontainer button[value="vote_pos"] {
    color: #1a7a42;
    background: #e6f4ec;
    border: 2px solid #1a7a42;
    font-weight: 600;
}
.votecontainer button[value="vote_pos"]:hover {
    background: #ccebda;
    transform: scale(1.06);
    box-shadow: 0 4px 14px rgba(26,122,66,.2);
}
.votecontainer button[value="vote_neg"] {
    color: #c62828;
    background: #fdecea;
    border: 2px solid #c62828;
    font-weight: 600;
}
.votecontainer button[value="vote_neg"]:hover {
    background: #fad4d0;
    transform: scale(1.06);
    box-shadow: 0 4px 14px rgba(198,40,40,.2);
}

/* ── Success / error boxes ───────────────────────────────── */
.success-box {
    background: var(--faq-accent-lt);
    border: 1px solid var(--faq-accent);
    border-radius: 8px;
    padding: .7rem 1.1rem;
    margin-bottom: .6rem;
}
.success-box h4 { font-family: var(--faq-font); font-size: .95rem; color: var(--faq-accent); margin: 0; }

/* ── Vote-Kommentar-Formular ─────────────────────────────── */
.vote-kom-container {
    --vkc-width: 420px;
    width: var(--vkc-width);
    margin: 1.2rem auto 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* Info-Box: kompakt, nur Texthöhe + Padding */
.vote-kom-container .success-box {
    padding: .55rem 1rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    box-sizing: border-box;
}
.vote-kom-container .success-box h4 {
    margin: 0;
    white-space: nowrap;
}
.vote-kom-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
.vote-kom-textarea {
    width: 100%;
    height: 7em;
    box-sizing: border-box;
    resize: vertical;
    font-family: var(--faq-font);
    font-size: .95rem;
}
.vote-kom-label {
    font-size: .88rem;
    color: var(--faq-muted);
    text-align: center;
}
.vote-kom-email {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--faq-font);
    font-size: .95rem;
}
/* Button: überschreibt .votecontainer button { font-size:1.6rem; width:128px } */
.votecontainer .vote-kom-submit,
.vote-kom-submit {
    width: auto !important;
    font-size: .9rem !important;
    font-family: var(--faq-font) !important;
    font-weight: 600 !important;
    padding: .45em 1.4em !important;
    border-radius: 6px !important;
    display: block;
    margin: 4px auto 0;
    cursor: pointer;
    white-space: nowrap;
}


.json-container {
    font-family: monospace; /* Monospace-Schrift für bessere Lesbarkeit von Code */
    font-size: 14px;
    color: #333;
    padding: 20px;
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: auto; /* Ermöglicht Scrollen bei langen Inhalten */
}

.json-level {
    padding-left: 20px; /* Einrückung für jede Ebene der Struktur */
    border-left: 2px solid #eee; /* Vertikale Linie zur Strukturierung */
    margin-left: 10px;
}

.json-key {
    color: #007bff; /* Farbe für Schlüssel */
    font-weight: bold;
}

.json-value {
    color: #28a745; /* Farbe für einfache Werte (Strings, Zahlen, Booleans) */
}

.json-string {
    color: #dc3545; /* Spezifische Farbe für Strings */
}

.json-number {
    color: #0056b3; /* Spezifische Farbe für Zahlen */
}

.json-boolean {
    color: #6c757d; /* Spezifische Farbe für Booleans */
}

.json-null {
    color: #6c757d; /* Farbe für Null-Werte */
    font-style: italic;
}

/* Klammern und Kommata etwas dezenter gestalten */
.json-punctuation {
    color: #888;
}
/* ── Vote-Badges in Accordion-Zeile ─────────────────────── */
.vote-badge {
    display: inline-block;
    font-size: .82rem;
    border-radius: 6px;
    padding: 0 6px;
    line-height: 1.6;
    white-space: nowrap;
}
.vote-pos-active   { font-weight: bold; color: white; background-color: SeaGreen;  border: 1px solid SeaGreen; }
.vote-neg-active   { font-weight: bold; color: white; background-color: OrangeRed; border: 1px solid OrangeRed; }
.vote-pos-inactive { border: 1px solid gray; }
.vote-neg-inactive { border: 1px solid gray; }

/* Vote-Block: 3. Grid-Spalte — Badges + Datum untereinander */
h3.frage:has(.acc-vote-block),
td.content h3.frage:has(.acc-vote-block) {
    grid-template-columns: 2.2rem minmax(0, 1fr) auto 1.4rem;
    align-items: start;
}
td.content h3.frage:has(.acc-vote-block) .acc-num,
td.content h3.frage:has(.acc-vote-block) .acc-text,
td.content h3.frage:has(.acc-vote-block):after,
h3.frage:has(.acc-vote-block) .acc-num,
h3.frage:has(.acc-vote-block) .acc-text,
h3.frage:has(.acc-vote-block):after {
    padding-top: .35rem;
}
.acc-vote-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    padding: .25rem 8px .25rem 0;
}
.acc-vote-badges {
    display: flex;
    gap: 4px;
    align-items: center;
}
.vote-quality-badge {
    font-size: .95rem;
    padding: 0 2px;
    border: none !important;
    cursor: default;
}
.acc-vote-date {
    font-size: .78rem;
    color: #8a7000;
    border: 1px solid GoldenRod;
    border-radius: 6px;
    padding: 0 6px;
    white-space: nowrap;
    line-height: 1.6;
}

/* ── Admin mailto-Links ──────────────────────────────────── */
a.faq-mailto,
a.faq-mailto:visited,
a.faq-mailto:active {
    color: var(--faq-accent) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}
a.faq-mailto:hover {
    color: #155a3d !important;
}