/* Design tokens — main intern app */
:root {
    /* Colors */
    --color-page-bg: #09273b;
    --color-page-bg-image: url("../media/background.png");
    --color-text: #000000;
    --color-surface: #ffffff;
    --color-surface-muted: #fefefe;
    --color-footer-bg: #233c4c;
    --color-footer-text: #ffffff;
    --color-menubar-bg: #ffffff;
    --color-menubar-opacity: 0.8;
    --color-message-bg: #ffffff;
    --color-message-text: #dd0000;
    --color-on-message: #ffffff;
    --color-flash-success-bg: green;
    --color-flash-error-bg: red;
    --color-menu-link: #4c4c4c;
    --color-menu-hover: #a2adb5;
    --color-table-header-bg: #233c4c;
    --color-table-header-text: #ffffff;
    --color-row-stripe: #f1f4f6;
    --color-border-strong: #000000;
    --color-highlight-yellow: #ffff44;
    --color-modal-overlay-fallback: rgb(0, 0, 0);
    --color-modal-overlay: rgba(0, 0, 0, 0.5);
    --color-modal-content-bg: #fefefe;
    --color-modal-border: #888888;
    --color-modal-close: #aaaaaa;
    --color-modal-close-hover: #000000;
    --color-danger: #dd0000;
    --color-info: #2664fe;
    --color-quiz-number: red;
    --color-quiz-correct: #90ee90;
    --color-quiz-wrong: #f08080;
    --color-cal-reserved-full: #008000;
    --color-cal-reserved-partial: red;

    /* Typography */
    --font-family-sans: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-size-body: 12pt;
    --font-size-ui: 15px;
    --font-size-small: 11px;
    --font-size-datepicker: 12px;
    --font-size-modal-close: 28px;
    --font-weight-bold: bold;

    /* Spacing */
    --space-0: 0;
    --space-inline: 20px;
    --space-cell: 8px;
    --space-message-top: 5px;
    --space-block: 20px;
    --space-zahlkreis-x: 5px;
    --space-zahlkreis-y: 2px;
    --space-quiz-radio: 12px;
    --space-form-inner-y: 3px;
    --space-footer-vertical-center: 0.5em;
    --footer-credit-top: 50%;
    --footer-credit-height: 1em;

    /* Layout */
    --layout-max-width: 1000px;
    --layout-header-height: 157px;
    --layout-footer-height: 60px;
    --layout-menubar-height: 80px;
    --layout-message-width: 980px;
    --layout-message-height: 23px;
    --layout-message-top: 146px;
    --layout-user-row-top: 50px;
    --layout-user-row-height: 100px;
    --layout-menu-top: 20px;
    --layout-menu-left: 220px;
    --layout-menu-width: 700px;
    --layout-table-width: 960px;
    --layout-table-margin-right: -20px;
    --layout-logo-top: 6px;
    --layout-logo-left: 10px;
    --layout-logo-width: 150px;
    --layout-form-inner-margin-left: 20px;
    --layout-form-inner-width-narrow: 300px;
    --layout-form-inner-width-wide: 600px;

    /* Table cell widths */
    --width-td-actions: 70px;
    --width-td-frage-num: 40px;
    --width-td-dok-info: 250px;
    --width-td-dok-meta: 150px;
    --width-td-dok-main: 400px;

    /* Effects */
    --radius-zahlkreis: 25%;
    --size-zahlkreis: 26px;
    --z-index-banner: 1;
    --z-index-menu: 2;
    --z-index-message: 3;
    --z-index-modal: 999;
    --opacity-menubar: 0.8;
    --opacity-message: 1;
    --width-modal-content: 40%;
    --margin-modal-content: 15% auto;
}

body {
    margin: var(--space-0);
    padding: var(--space-0);
    color: var(--color-text);
    font-size: var(--font-size-body);
    font-family: var(--font-family-sans);
    background-color: var(--color-page-bg);
    background-image: var(--color-page-bg-image);
}

body.env-test {
    --color-page-bg: #0f4838;
    --color-page-bg-image: none;
}

.env-test-banner {
    position: absolute;
    z-index: var(--z-index-menu);
    top: var(--layout-menubar-height);
    left: 0;
    width: 100%;
    height: 56px;
    line-height: 56px;
    text-align: center;
}

.env-test-banner span {
    display: inline-block;
    padding: 2px 16px;
    background-color: var(--color-surface);
    color: #00a000;
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.14em;
    line-height: 1.2;
}

input,
select {
    font-size: var(--font-size-ui);
}

div.header {
    position: relative;
    width: var(--layout-max-width);
    height: var(--layout-header-height);
    margin: 0 auto;
}

div.footer {
    position: relative;
    width: var(--layout-max-width);
    height: var(--layout-footer-height);
    margin: 0 auto;
    background-color: var(--color-footer-bg);
    color: var(--color-footer-text);
}

div.banner-top {
    z-index: var(--z-index-banner);
    top: var(--space-0);
    position: absolute;
}

.banner-img {
    width: 100%;
}

.header-logo {
    top: var(--layout-logo-top);
    left: var(--layout-logo-left);
    width: var(--layout-logo-width);
    position: absolute;
}

div.menuezeile {
    z-index: var(--z-index-menu);
    top: var(--space-0);
    width: var(--layout-max-width);
    height: var(--layout-menubar-height);
    position: absolute;
    background-color: var(--color-menubar-bg);
    opacity: var(--opacity-menubar);
}

div.messagebox {
    z-index: var(--z-index-message);
    top: var(--layout-message-top);
    width: var(--layout-message-width);
    height: var(--layout-message-height);
    position: absolute;
    background-color: var(--color-message-bg);
    opacity: var(--opacity-message);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-bold);
    color: var(--color-message-text);
    padding-left: var(--space-inline);
    padding-top: var(--space-message-top);
}

div.messagebox.messagebox--success {
    background-color: var(--color-flash-success-bg);
    color: var(--color-on-message);
}

div.messagebox.messagebox--error {
    background-color: var(--color-flash-error-bg);
    color: var(--color-on-message);
}

div.benutzername {
    z-index: var(--z-index-menu);
    top: var(--layout-user-row-top);
    width: var(--layout-max-width);
    height: var(--layout-user-row-height);
    position: absolute;
    font-size: var(--font-size-small);
    text-align: right;
}

div.buttonzeile1 {
    z-index: var(--z-index-menu);
    top: var(--layout-menu-top);
    left: var(--layout-menu-left);
    width: var(--layout-menu-width);
    height: var(--layout-menubar-height);
    position: absolute;
    font-size: var(--font-size-ui);
    font-weight: var(--font-weight-bold);
}

div.main {
    position: relative;
    width: var(--layout-max-width);
    margin: 0 auto;
    background-color: var(--color-surface);
}

p,
h2,
h3 {
    padding-left: var(--space-inline);
}

ol.bogen-anleitung {
    margin-top: 0;
    padding-left: 40px;
}

a.menutext {
    color: var(--color-menu-link);
    text-decoration: none;
    font-weight: var(--font-weight-bold);
}

a.menutext:hover {
    color: var(--color-menu-hover);
    cursor: pointer;
}

.menutext_small {
    font-size: var(--font-size-small);
}

table {
    border-collapse: collapse;
    margin-left: var(--space-inline);
    margin-right: var(--layout-table-margin-right);
    width: var(--layout-table-width);
}

th,
td {
    text-align: left;
    padding: var(--space-cell);
}

tr:nth-child(even) {
    background-color: var(--color-row-stripe);
}

th {
    background-color: var(--color-table-header-bg);
    color: var(--color-table-header-text);
}

table.minilist {
    border-collapse: collapse;
    margin-left: var(--space-inline);
    width: auto;
}

th.minilist,
td.minilist {
    text-align: left;
    padding: var(--space-0);
}

tr.minilist:nth-child(even) {
    background-color: transparent;
}

.minilist {
    font-weight: var(--font-weight-bold);
}

.zahlkreis {
    border-radius: var(--radius-zahlkreis);
    width: var(--size-zahlkreis);
    height: var(--size-zahlkreis);
    padding-left: var(--space-zahlkreis-x);
    padding-right: var(--space-zahlkreis-x);
    padding-top: var(--space-zahlkreis-y);
    padding-bottom: var(--space-zahlkreis-y);
    border: 1px solid var(--color-border-strong);
    text-align: center;
}

.bg_yellow {
    background: var(--color-highlight-yellow);
}

.box {
    float: left;
    padding: var(--space-block);
}

.normal {
    clear: left;
    padding: var(--space-block);
}

.modal {
    display: none;
    position: fixed;
    z-index: var(--z-index-modal);
    left: var(--space-0);
    top: var(--space-0);
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: var(--color-modal-overlay-fallback);
    background-color: var(--color-modal-overlay);
}

.modal-content {
    background-color: var(--color-modal-content-bg);
    margin: var(--margin-modal-content);
    padding: var(--space-block);
    border: 1px solid var(--color-modal-border);
    width: var(--width-modal-content);
    text-align: center;
}

.close {
    color: var(--color-modal-close);
    float: right;
    font-size: var(--font-size-modal-close);
    font-weight: var(--font-weight-bold);
}

.close:hover,
.close:focus {
    color: var(--color-modal-close-hover);
    text-decoration: none;
    cursor: pointer;
}

.flatpickr-calendar {
    font-size: var(--font-size-datepicker);
}

/* Utilities */
.va-middle {
    vertical-align: middle;
}

.inline-block {
    display: inline-block;
}

.form-filter-pad {
    padding-left: var(--space-inline);
}

.td-w-40 {
    width: var(--width-td-frage-num);
    vertical-align: top;
}

.td-w-70 {
    width: var(--width-td-actions);
}

.td-w-150 {
    width: var(--width-td-dok-meta);
}

.td-w-250 {
    width: var(--width-td-dok-info);
}

.td-w-400 {
    width: var(--width-td-dok-main);
}

.col-dok-name {
    max-width: var(--width-td-dok-main);
    overflow-wrap: anywhere;
    vertical-align: top;
}

.col-cal-date {
    width: 240px;
    white-space: nowrap;
}

.td-text-center {
    text-align: center;
}

.text-danger {
    color: var(--color-danger);
}

.text-danger-bold {
    color: var(--color-danger);
    font-weight: var(--font-weight-bold);
}

.text-quiz-num {
    font-weight: var(--font-weight-bold);
    color: var(--color-quiz-number);
}

.text-info-row {
    color: var(--color-info);
}

.text-menu-body {
    color: var(--color-menu-link);
    font-weight: var(--font-weight-bold);
}

.text-red-bold {
    color: var(--color-quiz-number);
    font-weight: var(--font-weight-bold);
}

.list-lower-alpha {
    list-style-type: lower-alpha;
}

.is-hidden {
    display: none;
}

.quiz-answer-label {
    display: flex;
}

.quiz-answer-radio {
    flex: 0 0 auto;
    margin-right: var(--space-quiz-radio);
}

.quiz-answer-text {
    flex: 1 1 auto;
}

.form-inner-table {
    margin-left: var(--layout-form-inner-margin-left);
    text-align: left;
    padding: var(--space-form-inner-y) var(--space-0);
    border-collapse: collapse;
}

.form-inner-table--narrow {
    width: var(--layout-form-inner-width-narrow);
}

.form-inner-table--wide {
    width: var(--layout-form-inner-width-wide);
}

.form-inner-table th,
.form-inner-table td {
    text-align: left;
    padding: var(--space-0);
}

.form-inner-table tr:nth-child(even) {
    background-color: var(--color-surface);
}

.quiz-row-correct {
    background-color: var(--color-quiz-correct);
}

.quiz-row-wrong {
    background-color: var(--color-quiz-wrong);
}

.text-cal-full {
    color: var(--color-cal-reserved-full);
}

.text-cal-partial {
    color: var(--color-cal-reserved-partial);
}

.footer-credit {
    position: absolute;
    top: var(--footer-credit-top);
    height: var(--footer-credit-height);
    margin-top: calc(-1 * var(--space-footer-vertical-center));
}

.textarea-sans {
    font-family: var(--font-family-sans);
}

.inline-block-top {
    display: inline-block;
    vertical-align: top;
}

.font-bold {
    font-weight: var(--font-weight-bold);
}

/* Small POST actions retain the existing icon and navigation layout. */
form.action-form { display: inline; margin: 0; padding: 0; }
button.action-button {
    display: inline; padding: 0; margin: 0; border: 0; background: transparent;
    color: inherit; font: inherit; cursor: pointer; vertical-align: baseline;
}
button.action-button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }