/* Funktion vor Optik. Das Stylesheet dient der Lesbarkeit, nicht der Gestaltung.
   Das Design-Rendering findet im WordPress-Theme statt, nicht hier. */

:root {
    --textfarbe: #1a1a1a;
    --hintergrund: #ffffff;
    --linie: #cccccc;
    --hinweis: #666666;
    --fehler: #a3000f;
    --fehler-hell: #fdeaec;
    --warnung: #8a5a00;
    --warnung-hell: #fff6e5;
    --erfolg: #0a5c2e;
    --erfolg-hell: #e8f5ee;
    --flaeche: #f5f5f5;
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    line-height: 1.5;
    color: var(--textfarbe);
    background: var(--hintergrund);
    margin: 0;
}

main {
    max-width: 68rem;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

h1 {
    font-size: 1.6rem;
    border-bottom: 1px solid var(--linie);
    padding-bottom: 0.5rem;
}

h2 {
    font-size: 1.2rem;
    margin-top: 2rem;
}

p {
    margin: 0.75rem 0;
}

/* Kopfzeile mit Konto und Rolle. Die Rolle steht sichtbar da, damit nie unklar
   ist, in welcher Rolle man arbeitet. Es gibt keinen Umschalter. */

.kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.5rem;
    background: var(--flaeche);
    border-bottom: 1px solid var(--linie);
}

.kopf-titel {
    font-weight: 600;
}

.kopf-rechts {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.rolle {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 0.2rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border: 1px solid var(--linie);
}

.rolle-admin {
    background: var(--warnung-hell);
    color: var(--warnung);
    border-color: var(--warnung);
}

.rolle-redakteur {
    background: var(--erfolg-hell);
    color: var(--erfolg);
    border-color: var(--erfolg);
}

/* Formulare */

form.schmal {
    max-width: 26rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 1.5rem 0;
}

form.inline {
    display: inline;
}

label {
    font-weight: 600;
    margin-top: 0.5rem;
}

input[type="text"],
input[type="password"],
select {
    padding: 0.45rem;
    border: 1px solid var(--linie);
    border-radius: 0.2rem;
    font-size: 1rem;
    font-family: inherit;
}

button,
.knopf {
    margin-top: 0.75rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--textfarbe);
    border-radius: 0.2rem;
    background: var(--textfarbe);
    color: var(--hintergrund);
    font-size: 0.95rem;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

button:hover,
.knopf:hover {
    opacity: 0.85;
}

.knopf-schlicht {
    background: none;
    color: var(--textfarbe);
    border: 1px solid var(--linie);
    margin-top: 0;
}

/* Meldungen */

.fehler,
.warnung,
.meldung,
.hinweis {
    padding: 0.6rem 0.8rem;
    border-radius: 0.2rem;
    border-left: 3px solid;
}

.fehler {
    background: var(--fehler-hell);
    border-color: var(--fehler);
    color: var(--fehler);
}

.warnung {
    background: var(--warnung-hell);
    border-color: var(--warnung);
    color: var(--warnung);
}

.meldung {
    background: var(--erfolg-hell);
    border-color: var(--erfolg);
    color: var(--erfolg);
}

.hinweis {
    background: var(--flaeche);
    border-color: var(--linie);
    color: var(--hinweis);
    font-size: 0.9rem;
}

/* Tabellen */

table {
    border-collapse: collapse;
    width: 100%;
    margin: 1rem 0;
    font-size: 0.92rem;
}

th,
td {
    text-align: left;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--linie);
    vertical-align: top;
}

thead th {
    background: var(--flaeche);
}

tr.inaktiv {
    opacity: 0.55;
}

table.daten th {
    width: 14rem;
}

td.verwaltung form {
    margin-bottom: 0.3rem;
}

td.verwaltung button {
    margin-top: 0;
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
}

td.verwaltung input {
    font-size: 0.8rem;
    padding: 0.22rem 0.4rem;
}

/* TOTP und Wiederherstellungscodes */

.qr {
    margin: 1.5rem 0;
}

.qr img {
    border: 1px solid var(--linie);
    padding: 0.5rem;
    background: #ffffff;
}

.secret code {
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    background: var(--flaeche);
    padding: 0.35rem 0.5rem;
    border-radius: 0.2rem;
}

ul.codes {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 14rem));
    gap: 0.4rem;
}

ul.codes code {
    display: block;
    padding: 0.5rem 0.7rem;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 0.2rem;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
}

/* ------------------------------------------------------------------
   Editor
   ------------------------------------------------------------------ */

#fassung-formular {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

#fassung-formular textarea,
#fassung-formular input[type="text"] {
    padding: 0.5rem;
    border: 1px solid var(--linie);
    border-radius: 0.2rem;
    font-size: 1rem;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}

#body {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.92rem;
    line-height: 1.6;
}

.body-werkzeuge {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 0.5rem;
}

.body-werkzeuge button {
    margin-top: 0;
}

.hinweis.klein {
    font-size: 0.82rem;
    padding: 0.4rem 0.6rem;
    margin: 0.2rem 0 0.6rem;
}

.zaehler {
    font-weight: normal;
    font-size: 0.82rem;
    color: var(--hinweis);
}

.zaehler-zuviel {
    color: var(--warnung);
    font-weight: 600;
}

/* Blockstruktur der Inline-Q&A und der wiederholbaren Listen */

.block {
    border: 1px solid var(--linie);
    border-radius: 0.25rem;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    background: var(--flaeche);
}

.block-kopf {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.block-kopf button {
    margin-top: 0;
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
}

.paar {
    display: grid;
    grid-template-columns: 1fr 1.6fr auto;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
    align-items: start;
}

.paar button {
    margin-top: 0;
    font-size: 0.8rem;
    padding: 0.3rem 0.5rem;
    white-space: nowrap;
}

.paar input,
.paar textarea {
    padding: 0.4rem;
    border: 1px solid var(--linie);
    border-radius: 0.2rem;
    font-family: inherit;
    font-size: 0.9rem;
    width: 100%;
    box-sizing: border-box;
}

/* Marken in der Uebersicht und an den Bloecken */

.marke {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 0.2rem;
    font-size: 0.75rem;
    border: 1px solid var(--linie);
    background: var(--hintergrund);
    font-family: ui-monospace, Menlo, Consolas, monospace;
}

.marke-uebertragen {
    background: var(--erfolg-hell);
    color: var(--erfolg);
    border-color: var(--erfolg);
}

.marke-warnung {
    background: var(--warnung-hell);
    color: var(--warnung);
    border-color: var(--warnung);
}

/* Herkunft */

.herkunft {
    display: flex;
    gap: 1.25rem;
    margin: 0.5rem 0 1rem;
}

label.radio {
    font-weight: normal;
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* Aktionen */

.aktionen {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    margin: 1.5rem 0;
    padding-top: 1rem;
    border-top: 1px solid var(--linie);
}

.knopf-gefahr {
    background: var(--fehler);
    border-color: var(--fehler);
    color: #ffffff;
}

.gedankenstrich-knoepfe {
    margin-top: 0.5rem;
    display: flex;
    gap: 0.5rem;
}

.gedankenstrich-knoepfe button {
    margin-top: 0;
    font-size: 0.85rem;
}

/* Autosave-Stand */

.autosave-ok { color: var(--erfolg); }
.autosave-offen { color: var(--warnung); }
.autosave-fehler { color: var(--fehler); font-weight: 600; }

/* Uebersicht */

.neuer-beitrag {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0;
}

.neuer-beitrag label {
    margin-top: 0;
}

.neuer-beitrag button {
    margin-top: 0;
}

.eingerueckt {
    padding-left: 1.5rem;
    color: var(--hinweis);
}

/* Vorschau: das gerenderte HTML, bewusst ohne Theme */

.vorschau {
    border: 1px dashed var(--linie);
    padding: 1.5rem;
    background: var(--hintergrund);
}

.vorschau .la-label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.8rem;
    color: var(--hinweis);
    margin-top: 1.5rem;
}

.vorschau .la-disclaimer {
    font-size: 0.85rem;
    color: var(--hinweis);
    font-style: italic;
    border-top: 1px solid var(--linie);
    padding-top: 0.75rem;
    margin-top: 1.5rem;
}

.vorschau blockquote {
    border-left: 3px solid var(--linie);
    margin-left: 0;
    padding-left: 1rem;
    background: var(--flaeche);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Der Nachweis, dass kein Praefix im Inhalt steht: die optische Marke kommt aus
   dem CSS und nicht aus dem Text. Genau so gehoert sie spaeter ins Theme. */
.vorschau blockquote strong::before {
    content: "Frage: ";
    color: var(--hinweis);
    font-weight: 400;
}