/* Helles Neufang-Design (Michael 02.11.2026: hell wie das Original). Alles Änderbare steht hier. */
:root {
  --akzent: #EF7000;
  --akzent-dunkel: #c95e00;
  --akzent-hell: #fdeedf;
  --warn: #ff9a1f;
  --seite-bg: #f5f5f5;
  --karte-bg: #fff;
  --rand: #dcdcdc;
  --text: #1a1a1a;
  --text-leise: #5f6368;
  --kopf-bg: #fff;
  --kopf-text: #1a1a1a;
  --flaeche-bg: #e4e4e4;
  --gefahr: #c0392b;
  --gut: #1e7d3c;
  --schlecht: #c0392b;
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 14px/1.45 var(--schrift); color: var(--text); background: var(--seite-bg); }
h1 { font-size: 24px; margin: 0 0 4px; }
h2 { font-size: 16px; margin: 0; }
a { color: inherit; }
[hidden] { display: none !important; }
.leise { color: var(--text-leise); margin: 0; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.fehler { color: var(--schlecht); margin: 0; }

.karte { background: var(--karte-bg); border: 1px solid var(--rand); border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.logo { height: 44px; display: block; }
.knopf { font: inherit; padding: 7px 14px; border-radius: 6px; border: 1px solid #b9b9b9; background: #fff; color: var(--text); cursor: pointer; }
.knopf:hover { background: #f0f0f0; }
.knopf:focus-visible, .kopf-knopf:focus-visible, .kopf-symbol:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.knopf.haupt { background: var(--akzent); border-color: var(--akzent); color: #fff; font-weight: 600; }
.knopf.haupt:hover { background: var(--akzent-dunkel); }
.knopf.gefahr { background: var(--gefahr); border-color: var(--gefahr); color: #fff; }
.knopf.klein { padding: 3px 9px; font-size: 13px; }
a.knopf { text-decoration: none; display: inline-block; }
.version { font-size: 12px; font-weight: 400; color: var(--text-leise); white-space: nowrap; }
.hochkontrast .version { color: #ccc; }

/* Anmeldung */
.anmeldung { min-height: 100%; display: grid; place-items: center; padding: 24px; }
.anmeldung form { width: min(400px, 100%); padding: 28px; display: grid; gap: 14px; border-top: 4px solid var(--akzent); }
.anmeldung .logo { height: 60px; justify-self: start; }
label { display: grid; gap: 4px; color: var(--text-leise); }
input, select { font: inherit; padding: 7px 9px; border-radius: 6px; border: 1px solid #b9b9b9; background: #fff; color: var(--text); }
input:focus, select:focus { outline: 2px solid var(--akzent); outline-offset: 0; }

/* Meine Klausuren */
.seitenkopf { display: flex; align-items: center; gap: 16px; padding: 10px 24px; background: var(--kopf-bg); border-bottom: 3px solid var(--akzent); }
.seitenkopf .logo { height: 40px; }
.seitenkopf .wer { margin-left: auto; color: var(--text-leise); }
.liste { max-width: 1100px; margin: 0 auto; padding: 32px 24px; }
.kopfzeile-liste { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; gap: 16px; }
table.klausuren { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.klausuren th { text-align: left; font-weight: 600; color: var(--text-leise); padding: 10px 14px; border-bottom: 1px solid var(--rand); background: #fafafa; }
.klausuren td { padding: 11px 14px; border-bottom: 1px solid var(--rand); vertical-align: middle; }
.klausuren tr:last-child td { border-bottom: 0; }
.klausuren td a { font-weight: 600; text-decoration: none; }
.klausuren td a:hover { color: var(--akzent-dunkel); text-decoration: underline; }
.aktionen { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.aktionen form { margin: 0; }
.marke { padding: 2px 9px; border-radius: 999px; font-size: 12px; border: 1px solid var(--rand); background: #f2f2f2; }
.marke.offen { color: #8a4200; border-color: #f5c9a0; background: var(--akzent-hell); }
.leer { padding: 28px; color: var(--text-leise); text-align: center; }

/* Dialoge */
.dialog { width: min(520px, calc(100vw - 32px)); padding: 0; border: 1px solid #bbb; border-radius: 8px; background: #fff; color: #111; }
.dialog::backdrop { background: rgba(0, 0, 0, .55); }
.dialog h2 { background: #333; color: #fff; padding: 10px 14px; }
.dialog.warn h2 { background: var(--warn); color: #000; }
.dialog p { margin: 0; padding: 14px; }
.dialog p + p { padding-top: 0; }
.fehler-text { color: var(--gefahr); font-weight: 600; }
.dialog form { display: grid; gap: 12px; }
.dialog form > label { padding: 0 14px; color: #333; }
.dialog input, .dialog select { background: #fff; color: #111; border-color: #999; }
.dialog-fuss { display: flex; justify-content: space-between; gap: 8px; padding: 9px 12px; border-top: 1px solid #ccc; }
.dialog-fuss.mitte { justify-content: center; }
.dialog .knopf { color: #111; border-color: #555; background: #fff; }
.dialog .knopf:hover { background: #eee; }
.dialog .knopf.haupt { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.dialog .knopf.gefahr { background: var(--gefahr); border-color: var(--gefahr); color: #fff; }
.dialog .knopf.warnknopf { background: var(--warn); border-color: var(--warn); color: #000; }
.dialog .knopf.warnknopf:disabled { background: #ddd; border-color: #ddd; color: #777; cursor: default; }
.dialog.sperre { width: 330px; text-align: center; }
.dialog.sperre::backdrop { background: #03090b; }
.kuerzel { list-style: none; margin: 12px; padding: 6px 8px; border: 1px solid #888; border-radius: 3px; max-height: 60vh; overflow: auto; font-family: Verdana, Arial, sans-serif; font-size: 13px; line-height: 1.45; }
.dialog.breit { width: min(900px, calc(100vw - 32px)); }
.staende { display: grid; grid-template-columns: 280px 1fr; height: 56vh; }
.staende-liste { list-style: none; margin: 0; padding: 8px; overflow: auto; border-right: 1px solid #ccc; }
.staende-liste li { padding: 2px 0; color: #444; }
.staende-liste button { width: 100%; text-align: left; font: inherit; font-size: 13px; padding: 6px 8px; border: 0; background: transparent; border-radius: 4px; cursor: pointer; color: #111; }
.staende-liste button:hover { background: #eee; }
.staende-liste button.aktiv { background: var(--akzent-hell); }
#staende-vorschau { width: 100%; height: 100%; border: 0; background: #fff; }

/* Editor */
.editor-seite { display: flex; flex-direction: column; height: 100vh; overflow: hidden; background: var(--flaeche-bg); }
.kopfzeile { display: flex; align-items: center; gap: 10px; height: 47px; padding: 0 10px; background: var(--kopf-bg); color: var(--kopf-text); border-bottom: 3px solid var(--akzent); flex: none; }
.kopfzeile:focus { outline: 2px solid var(--akzent); outline-offset: -2px; }
.zurueck { display: flex; }
.zurueck img { height: 30px; display: block; }
.kenn { display: grid; line-height: 1.1; }
.kenn small { font-size: 10px; color: var(--text-leise); }
.kenn strong { font-weight: 400; font-size: 13px; letter-spacing: .3px; }
.titel { flex: 1; text-align: center; font-size: 16px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.speicherstatus { font-size: 12px; color: var(--text-leise); white-space: nowrap; }
.speicherstatus.gut { color: var(--gut); }
.speicherstatus.schlecht { color: var(--schlecht); font-weight: 600; }
.kopf-knopf { font: inherit; font-size: 13px; padding: 4px 9px; border-radius: 3px; border: 1px solid #9a9a9a; color: var(--kopf-text); background: #fff; cursor: pointer; white-space: nowrap; }
.kopf-knopf:hover { background: #f0f0f0; }
.kopf-knopf.akzent { background: var(--akzent); border-color: var(--akzent); color: #fff; font-weight: 600; }
.kopf-knopf.akzent:hover { background: var(--akzent-dunkel); }
.kopf-knopf.hell { border-color: #333; font-weight: 600; }
.kopf-symbol { display: flex; padding: 3px 5px; border-radius: 3px; border: 1px solid #9a9a9a; background: #fff; color: var(--kopf-text); cursor: pointer; }
.darstellung select { padding: 2px 4px; font-size: 12px; background: #fff; color: #000; border-radius: 3px; border: 1px solid #9a9a9a; }
.uhr { display: flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 13px; }
.band { flex: none; padding: 4px 12px; text-align: center; font-size: 13px; background: #555; color: #fff; }
.band.warnung { background: var(--warn); color: #000; }
.editor-flaeche { flex: 1; min-height: 0; padding: 8px; background: var(--flaeche-bg); }

/* TinyMCE an das Haus anpassen, Anordnung bleibt */
.tox.tox-tinymce { border: 0; border-radius: 0; background: var(--flaeche-bg); }
.tox .tox-edit-area::before { display: none; }
.tox .tox-toolbar__group:not(:last-of-type) { border-right: 1px solid #c8c8c8 !important; }
.tox .tox-tbtn:focus:not(.tox-tbtn--disabled), .tox .tox-tbtn--enabled, .tox .tox-tbtn--enabled:hover { background: var(--akzent-hell) !important; }
.tox .tox-collection--list .tox-collection__item--active, .tox .tox-collection--list .tox-collection__item--enabled { background: var(--akzent-hell) !important; color: #111 !important; }
.tox .tox-dialog__header { background: #333 !important; color: #fff !important; padding: 8px 12px !important; }
.tox .tox-dialog__header .tox-button { color: #fff !important; }
.tox .tox-dialog__header .tox-icon svg { fill: #fff !important; }
.tox .tox-button:not(.tox-button--secondary):not(.tox-button--naked) { background: var(--akzent) !important; border-color: var(--akzent) !important; color: #fff !important; }
.tox .tox-insert-table-picker > .tox-insert-table-picker__selected { background: var(--akzent) !important; }
.tox .tox-textfield:focus, .tox .tox-listboxfield .tox-listbox--select:focus { border-color: var(--akzent) !important; box-shadow: 0 0 0 2px #f9c79d !important; }

/* PDF-Vorschau */
.pdf-ansicht { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; background: #b5b7ba; }
.pdf-leiste { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #e7e8ea; color: #111; font-size: 13px; }
.pdf-leiste button, .pdf-leiste select { font: inherit; padding: 2px 8px; border: 1px solid #999; border-radius: 3px; background: #fff; color: #111; cursor: pointer; }
.pdf-leiste button:disabled { opacity: .45; cursor: default; }
.pdf-leiste .pdf-symbol { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 3px; background: var(--akzent); color: #fff; border: 0; text-decoration: none; cursor: pointer; }
.pdf-flaeche { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pdf-flaeche canvas { background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .35); }

/* Hochkontrast */
.hochkontrast.editor-seite, .hochkontrast .editor-flaeche { background: #111; }
.hochkontrast .kopfzeile { background: #000; color: #fff; }
.hochkontrast .kenn small { color: #ccc; }
.hochkontrast .speicherstatus { color: #ddd; }
.hochkontrast .speicherstatus.gut { color: #7fe0a0; }
.hochkontrast .speicherstatus.schlecht { color: #ff9a8a; }
.hochkontrast .kopf-knopf, .hochkontrast .kopf-knopf.hell, .hochkontrast .kopf-knopf.akzent { background: #000; color: #fff; border-color: #fff; }
.hochkontrast .kopf-symbol { background: #000; color: #fff; border-color: #fff; }
.hochkontrast .zurueck { background: #fff; border-radius: 3px; padding: 2px 4px; }
.hochkontrast .darstellung select { background: #000; color: #fff; border-color: #fff; }
.hochkontrast .tox.tox-tinymce, .hochkontrast .tox .tox-toolbar, .hochkontrast .tox .tox-toolbar__primary, .hochkontrast .tox .tox-toolbar__overflow, .hochkontrast .tox .tox-editor-header, .hochkontrast .tox .tox-toolbar__group { background: #000 !important; }
.hochkontrast .tox .tox-tbtn, .hochkontrast .tox .tox-split-button, .hochkontrast .tox .tox-tbtn--select { color: #fff !important; background: #000 !important; }
.hochkontrast .tox .tox-tbtn__select-label { color: #fff !important; }
.hochkontrast .tox .tox-tbtn svg { fill: #fff !important; }
.hochkontrast .tox .tox-tbtn:hover { background: #333 !important; }
.hochkontrast .tox .tox-tbtn--enabled, .hochkontrast .tox .tox-tbtn--enabled:hover, .hochkontrast .tox .tox-tbtn:focus:not(.tox-tbtn--disabled) { background: #5a3a1c !important; }
.hochkontrast .tox .tox-tbtn--disabled svg { fill: #777 !important; }
.hochkontrast .tox .tox-toolbar__group:not(:last-of-type) { border-color: #777 !important; }
.hochkontrast .dialog { background: #000; color: #fff; border-color: #fff; }
.hochkontrast .dialog .knopf { background: #000; color: #fff; border-color: #fff; }
.hochkontrast .kuerzel { border-color: #fff; }