/*
 * Globale Styles für alle pdfmaker-Seiten.
 *
 * Es werden ausschließlich CSS Custom Properties aus farbschema.css
 * verwendet – kein hardcoded #xxxxxx irgendwo. Das ist die Regel
 * aus CLAUDE.md 6.8.1 und wird vom frontend-reviewer geprüft.
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--basis);
    color: var(--text);
    font-family: var(--schrift-familie);
    font-weight: var(--gewicht-normal);
    line-height: 1.5;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* --- Aurora-Hintergrund (nur atmosphärische Tiefe) ------------------- */
.aurora-hintergrund {
    position: fixed;
    inset: -10vmin;
    z-index: -1;
    pointer-events: none;
    background:
        var(--aurora-1),
        var(--aurora-2),
        var(--aurora-3),
        var(--aurora-4),
        var(--aurora-5);
    filter: blur(var(--aurora-blur)) saturate(var(--aurora-saturierung));
    opacity: var(--aurora-opacity);
    transition: opacity 0.4s ease, filter 0.4s ease;
}

/* --- Überschriften ------------------------------------------------- */
h1, h2, h3, h4 {
    font-weight: var(--gewicht-fett);
    color: var(--text);
    margin: 0 0 var(--abstand-m);
    letter-spacing: -0.01em;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }

p { margin: 0 0 var(--abstand-m); }

a {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
a:hover { text-decoration-thickness: 2px; }

/* --- Header -------------------------------------------------------- */
.seiten-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-l);
    padding: var(--abstand-m) var(--abstand-xl);
    background: var(--flaeche);
    border-radius: var(--radius-container);
    margin: var(--abstand-m) var(--abstand-l);
    box-shadow: var(--schatten-weich);
}

.marke {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--text);
}
.marke-titel {
    font-weight: var(--gewicht-fett);
    font-size: 1.2rem;
    line-height: 1;
}
.marke-zusatz {
    font-size: 0.75rem;
    color: var(--text-meta);
    margin-top: 2px;
}

.haupt-navigation {
    display: flex;
    gap: var(--abstand-l);
}
.haupt-navigation a {
    color: var(--text-gedämpft);
    text-decoration: none;
    font-weight: var(--gewicht-mittel);
    padding: var(--abstand-xs) var(--abstand-s);
    border-radius: var(--radius-klein);
}
.haupt-navigation a:hover,
.haupt-navigation a[aria-current="page"] {
    background: var(--flaeche-hover);
    color: var(--text);
}

.kopf-werkzeuge {
    display: flex;
    align-items: center;
    gap: var(--abstand-s);
}

.benutzer-anzeige {
    color: var(--text-meta);
    font-size: 0.9rem;
    padding-right: var(--abstand-s);
    border-right: 1px solid var(--linie);
}

/* --- Knöpfe -------------------------------------------------------- */
.knopf,
button.knopf,
.design-toggle,
.logout-button,
button {
    font-family: inherit;
    font-weight: var(--gewicht-mittel);
    cursor: pointer;
    border-radius: var(--radius-klein);
    padding: var(--abstand-xs) var(--abstand-m);
    border: 1px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.knopf-primaer {
    background: var(--knopf-primaer-bg);
    color: var(--knopf-primaer-text);
    border: none;
    padding: var(--abstand-s) var(--abstand-l);
    border-radius: var(--radius-mittel);
    font-weight: var(--gewicht-kraeftig);
}
.knopf-primaer:hover {
    box-shadow: var(--schatten-karte);
    filter: brightness(0.95);
}

.knopf-sekundaer,
.logout-button {
    background: var(--knopf-sekundaer-bg);
    color: var(--knopf-sekundaer-text);
    border: 1px solid var(--knopf-sekundaer-rand);
}
.knopf-sekundaer:hover,
.logout-button:hover {
    background: var(--flaeche-hover);
}

.design-toggle {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--linie-stark);
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.design-toggle:hover {
    background: var(--flaeche-hover);
}

.logout-form {
    margin: 0;
}

/* --- Inhalt und Karten -------------------------------------------- */
.inhalt {
    padding: var(--abstand-l) var(--abstand-xl) var(--abstand-xxl);
    max-width: 1200px;
    margin: 0 auto;
}

.karte {
    background: var(--flaeche);
    border-radius: var(--radius-karte);
    padding: var(--abstand-l);
    box-shadow: var(--schatten-weich);
}

/* --- Formulare ---------------------------------------------------- */
.feld {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-xs);
    margin-bottom: var(--abstand-m);
}
.feld-beschriftung {
    font-weight: var(--gewicht-mittel);
    color: var(--text-gedämpft);
    font-size: 0.9rem;
}
input[type="text"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="email"],
select,
textarea {
    font-family: inherit;
    font-size: 1rem;
    padding: var(--abstand-s) var(--abstand-m);
    background: var(--eingabe-bg);
    color: var(--text);
    border: 1px solid var(--eingabe-rand);
    border-radius: var(--radius-klein);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
}
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--eingabe-rand-fokus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 30%, transparent);
}

/* --- Meldungsbänder --------------------------------------------- */
.meldung {
    border-radius: var(--radius-mittel);
    padding: var(--abstand-s) var(--abstand-m);
    margin-bottom: var(--abstand-m);
    font-size: 0.95rem;
}
.meldung-fehler {
    background: var(--fehler-bg);
    color: var(--fehler-text);
}
.meldung-info {
    background: var(--info-bg);
    color: var(--info-text);
}

/* --- Login-Karte ------------------------------------------------ */
.login-karte {
    max-width: 420px;
    margin: 10vh auto 0;
    background: var(--flaeche);
    border-radius: var(--radius-container);
    padding: var(--abstand-xl);
    box-shadow: var(--schatten-tief);
}
.login-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--abstand-l);
}
.login-kopf h1 {
    margin: 0;
    font-size: 1.6rem;
}
.login-untertitel {
    color: var(--text-meta);
    font-size: 0.9rem;
    margin: 0;
    flex: 1;
    padding-left: var(--abstand-m);
}
.login-formular .knopf-primaer {
    width: 100%;
    margin-top: var(--abstand-s);
}

/* --- Fuß ------------------------------------------------------- */
.seiten-fuss {
    text-align: center;
    padding: var(--abstand-l);
    color: var(--text-meta);
}

/* --- Tabellen (für die Übersicht später) ---------------------- */
.tabelle {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--flaeche);
    border-radius: var(--radius-karte);
    overflow: hidden;
    box-shadow: var(--schatten-weich);
}
.tabelle th,
.tabelle td {
    padding: var(--abstand-s) var(--abstand-m);
    text-align: left;
    vertical-align: middle;
}
.tabelle thead th {
    background: var(--flaeche-hover);
    color: var(--text-meta);
    font-weight: var(--gewicht-mittel);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tabelle tbody tr + tr td {
    border-top: 1px solid var(--linie);
}
.tabelle tbody tr:hover td {
    background: var(--flaeche-hover);
}

/* --- Seitentitel-Zeile ------------------------------------- */
.seiten-titel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-m);
    margin-bottom: var(--abstand-l);
}
.seiten-titel h1 {
    margin: 0;
}
.seiten-titel-aktionen {
    display: flex;
    gap: var(--abstand-s);
}

/* --- Leer-Zustand ------------------------------------------ */
.leer-zustand {
    text-align: center;
    padding: var(--abstand-xxl) var(--abstand-xl);
}
.leer-zustand h2 {
    margin-top: 0;
}
.leer-zustand p {
    color: var(--text-gedämpft);
    max-width: 42ch;
    margin-left: auto;
    margin-right: auto;
}

/* --- Aktions-Zelle in Tabellen ----------------------------- */
.spalte-aktionen {
    white-space: nowrap;
    text-align: right;
}
.spalte-aktionen .aktion,
.spalte-aktionen button.aktion {
    display: inline-block;
    background: transparent;
    color: var(--text-gedämpft);
    border: 1px solid transparent;
    padding: var(--abstand-xxs) var(--abstand-s);
    border-radius: var(--radius-klein);
    font-size: 0.85rem;
    text-decoration: none;
    cursor: pointer;
    margin-left: var(--abstand-xxs);
}
.spalte-aktionen .aktion:hover,
.spalte-aktionen button.aktion:hover {
    background: var(--flaeche-hover);
    color: var(--text);
}
.aktion-gefahr {
    color: var(--fehler-text) !important;
}
.inline-form {
    display: inline-block;
    margin: 0;
}

/* --- Modal-Hülle (Details ab Schritt 9) -------------------- */
.modal-huelle {
    position: fixed;
    inset: 0;
    background: var(--modal-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: var(--abstand-l);
}
.modal-huelle[hidden] {
    display: none;
}
.modal-inhalt {
    background: var(--flaeche);
    border-radius: var(--radius-container);
    padding: var(--abstand-xl);
    max-width: 540px;
    width: 100%;
    box-shadow: var(--schatten-tief);
}

/* --- Vorlagen-Formular ------------------------------------- */
.vorlage-formular {
    padding: var(--abstand-xl);
}
.formular-gitter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--abstand-m);
}
.formular-gitter .span-voll {
    grid-column: 1 / -1;
}
.formular-gitter fieldset {
    border: 1px dashed var(--linie);
    border-radius: var(--radius-mittel);
    padding: var(--abstand-m);
    margin: 0;
}
.feld-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-xs);
    font-size: 0.9rem;
    color: var(--text-gedämpft);
    margin: var(--abstand-xs) 0;
}
.feld-hinweis {
    color: var(--text-meta);
    font-size: 0.85rem;
    margin: 0 0 var(--abstand-xs);
}
.monospace {
    font-family: var(--schrift-monospace);
    font-size: 0.9rem;
    line-height: 1.4;
}
.formular-aktionen {
    display: flex;
    gap: var(--abstand-s);
    margin-top: var(--abstand-l);
    align-items: center;
}

/* --- Adressen-Seite --------------------------------------- */
.adressen-werkzeug {
    margin-bottom: var(--abstand-m);
}
.adressen-such-form {
    display: grid;
    grid-template-columns: 2fr 1fr auto;
    gap: var(--abstand-m);
    align-items: end;
}
.adressen-such-form .feld {
    margin-bottom: 0;
}
.adressen-formular {
    margin-top: var(--abstand-l);
}
.adressen-formular[hidden] {
    display: none;
}
.adress-block {
    font-family: var(--schrift-monospace);
    font-size: 0.85rem;
    color: var(--text-gedämpft);
    white-space: pre-line;
    max-width: 32ch;
}

/* --- Editor-Seite (Schritt 10 ff.) ----------------------- */
.dokument-editor {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-m);
}
.editor-werkzeugleiste {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--abstand-m);
    background: var(--flaeche);
    padding: var(--abstand-m);
    border-radius: var(--radius-karte);
    box-shadow: var(--schatten-weich);
}
.feld-inline-flex {
    margin-bottom: 0;
}
.editor-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--abstand-m);
    min-height: 60vh;
}
.editor-spalte,
.vorschau-spalte {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-xs);
    background: var(--flaeche);
    padding: var(--abstand-m);
    border-radius: var(--radius-karte);
    box-shadow: var(--schatten-weich);
    min-height: 0;
}
.editor-kopf-zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-s);
}
.pdf-vorschau {
    flex: 1;
    min-height: 60vh;
    background: var(--flaeche-hover);
    border-radius: var(--radius-mittel);
    overflow: hidden;
    display: flex;
    align-items: stretch;
}
.pdf-embed {
    width: 100%;
    height: 100%;
    min-height: 60vh;
    border: 0;
}
.vorschau-hinweis {
    margin: auto;
    padding: var(--abstand-l);
    color: var(--text-gedämpft);
    text-align: center;
}
.compile-log {
    font-family: var(--schrift-monospace);
    font-size: 0.85rem;
    white-space: pre-wrap;
    background: var(--flaeche);
    padding: var(--abstand-s);
    border-radius: var(--radius-klein);
    max-height: 30vh;
    overflow: auto;
}
.brief-platzhalter {
    color: var(--text-meta);
    font-size: 0.9rem;
    padding: var(--abstand-m);
}
.editor-titel-text {
    font-weight: var(--gewicht-fett);
}

/* --- CodeMirror (5) Hell/Dunkel-Anpassung -------------------- */
.CodeMirror {
    font-family: var(--schrift-monospace);
    font-size: 0.9rem;
    border: 1px solid var(--eingabe-rand);
    border-radius: var(--radius-mittel);
    min-height: 40vh;
    background: var(--eingabe-bg);
    color: var(--text);
}
.CodeMirror-gutters {
    background: var(--flaeche-hover);
    border-right: 1px solid var(--linie);
}
.CodeMirror-linenumber {
    color: var(--text-meta);
}
.CodeMirror-cursor {
    border-left-color: var(--text) !important;
}
.CodeMirror-selected {
    background: var(--auswahl-akzent) !important;
}

/* --- Brief-Felder ------------------------------------------- */
.brief-felder {
    margin-bottom: var(--abstand-m);
}
.brief-felder-titel {
    margin: 0 0 var(--abstand-m);
    font-size: 1.1rem;
}
.brief-felder-gitter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--abstand-m);
}
.brief-empfaenger-aktionen {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--abstand-s);
}
.empfaenger-status {
    color: var(--text-meta);
    font-size: 0.85rem;
}
.empfaenger-vorschlaege {
    grid-column: 1 / -1;
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    max-height: 240px;
    overflow: auto;
    background: var(--flaeche);
    box-shadow: var(--schatten-weich);
}
.empfaenger-vorschlaege[hidden] {
    display: none;
}
.vorschlag-zeile {
    width: 100%;
    text-align: left;
    display: block;
    background: transparent;
    border: none;
    padding: var(--abstand-xs) var(--abstand-s);
    font-family: inherit;
    color: var(--text);
    cursor: pointer;
    border-bottom: 1px solid var(--linie);
}
.vorschlag-zeile:last-child {
    border-bottom: none;
}
.vorschlag-zeile:hover,
.vorschlag-zeile.markiert {
    background: var(--flaeche-hover);
}
.vorschlag-label {
    font-weight: var(--gewicht-mittel);
}
.vorschlag-ausschnitt {
    color: var(--text-meta);
    font-size: 0.8rem;
}

/* --- Status-Badges ------------------------------------------- */
.badge {
    display: inline-block;
    padding: 2px var(--abstand-s);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: var(--gewicht-mittel);
    background: var(--flaeche-hover);
    color: var(--text-gedämpft);
}
.badge-akzent {
    background: color-mix(in srgb, var(--akzent) 25%, transparent);
    color: var(--akzent-tief);
}
.badge-fehler {
    background: var(--fehler-bg);
    color: var(--fehler-text);
}