:root {
    /* Grundfarben */
    --main-primary-color: #007c86;
    --main-secondary-color: #a34ca3;
    --main-border-color: #d5d5d2;

    --main-success-color: #e6f4e3;
    --main-warning-color: #fff5d9;
    --main-error-color: #d7263d;

    /* Seitenhintergrund */
    --page-background-color: #f5f5f2;
    --page-background-color-complement: #ffffff;
    --page-background-color-contrast: #eeeeeb;
    --page-background-image: none;
    --page-background-size: auto;
    --page-background-repeat: no-repeat;

    /* H1 */
    --heading-h1-font-size: 22px;
    --heading-h1-color: #4a4a4a;
    --heading-h1-text-alignment: left;
    --heading-h1-font-family: Inter, Arial, Helvetica, sans-serif;
    --heading-h1-font-weight: 400;
    --heading-h1-text-decoration: none;
    --heading-h1-text-transform: none;
    --heading-h1-font-style: normal;

    /* H2 */
    --heading-h2-font-size: 19px;
    --heading-h2-color: #4d4d4d;
    --heading-h2-text-alignment: left;
    --heading-h2-font-family: Inter, Arial, Helvetica, sans-serif;
    --heading-h2-font-weight: 400;
    --heading-h2-text-decoration: none;
    --heading-h2-text-transform: none;
    --heading-h2-font-style: normal;

    /* H3 */
    --heading-h3-font-size: 17px;
    --heading-h3-color: #505050;
    --heading-h3-text-alignment: left;
    --heading-h3-font-family: Inter, Arial, Helvetica, sans-serif;
    --heading-h3-font-weight: 400;
    --heading-h3-text-decoration: none;
    --heading-h3-text-transform: none;
    --heading-h3-font-style: normal;

    /* H4 */
    --heading-h4-font-size: 15px;
    --heading-h4-color: #555555;
    --heading-h4-text-alignment: left;
    --heading-h4-font-family: Inter, Arial, Helvetica, sans-serif;
    --heading-h4-font-weight: 500;
    --heading-h4-text-decoration: none;
    --heading-h4-text-transform: none;
    --heading-h4-font-style: normal;

    /* H5 */
    --heading-h5-font-size: 14px;
    --heading-h5-color: #5c5c5c;
    --heading-h5-text-alignment: left;
    --heading-h5-font-family: Inter, Arial, Helvetica, sans-serif;
    --heading-h5-font-weight: 500;
    --heading-h5-text-decoration: none;
    --heading-h5-text-transform: none;
    --heading-h5-font-style: normal;

    /* H6 */
    --heading-h6-font-size: 13px;
    --heading-h6-color: #666666;
    --heading-h6-text-alignment: left;
    --heading-h6-font-family: Inter, Arial, Helvetica, sans-serif;
    --heading-h6-font-weight: 500;
    --heading-h6-text-decoration: none;
    --heading-h6-text-transform: none;
    --heading-h6-font-style: normal;

    /* Text */
    --body-font-size: 14px;
    --body-text-color: #4a4a4a;
    --body-text-color-complement: #777777;
    --body-text-alignment: left;
    --body-font-family: Inter, Arial, Helvetica, sans-serif;
    --body-font-weight: 400;

    /* Buttons */
    --button-background-color: #007c86;
    --button-hover-background-color: #006a73;
    --button-text-color: #ffffff;
    --button-hover-text-color: #ffffff;
    --button-border-color: #006e77;
    --button-hover-border-color: #005b63;

    --button-active-background-color: #005b63;
    --button-active-text-color: #ffffff;
    --button-active-border-color: #004f56;

    --button-width: auto;
    --button-text-alignment: center;
    --button-alignment: flex-start;
    --button-font-family: Inter, Arial, Helvetica, sans-serif;
    --button-font-weight: 400;
    --button-font-size: 13px;
    --button-border-radius: 2px;
    --button-border-size: 1px;
    --button-horizontal-padding: 14px;
    --button-vertical-padding: 6px;

    /* Links */
    --link-text-color: #007c86;
    --link-hover-text-color: #005f67;
    --link-active-text-color: #004f56;
    --link-text-alignment: flex-start;
    --link-font-family: Inter, Arial, Helvetica, sans-serif;

    --link-default-text-decoration: none;
    --link-default-text-transform: none;
    --link-default-font-style: normal;

    --link-hover-text-decoration: underline;
    --link-hover-text-transform: none;
    --link-hover-font-style: normal;

    --link-active-text-decoration: underline;
    --link-active-text-transform: none;
    --link-active-font-style: normal;

    --link-font-size: 13px;
    --link-font-weight: 400;

    /* Labels */
    --label-text-color: #555555;
    --label-font-family: Inter, Arial, Helvetica, sans-serif;
    --label-font-size: 12px;
    --label-font-weight: 400;

    /* Eingabefelder */
    --input-text-color: #454545;
    --input-text-color-complement: #8a8a8a;
    --input-font-family: Inter, Arial, Helvetica, sans-serif;
    --input-font-size: 13px;
    --input-font-weight: 400;

    --input-background-color: #ffffff;
    --input-background-color-complement: #f3f3f1;
    --input-border-color: #c9c9c6;
    --input-border-color-complement: #dfdfdc;
    --input-border-radius: 1px;
    --input-border-size: 1px;
    --input-horizontal-padding: 8px;
    --input-vertical-padding: 6px;

    /* Bilder */
    --image-alignment: flex-start;
    --image-wrapper-width: 100%;
    --image-wrapper-max-width: 100%;
    --image-object-fit: contain;
    --image-max-width: 100%;

    /* OPERA-ähnliche Tabellen */
    --table-border-color: #d9d9d6;
    --table-border-size: 1px;
    --table-border-radius: 0px;

    --table-header-background-color: #f0f0ed;
    --table-header-text-color: #505050;
    --table-header-font-size: 12px;
    --table-header-font-weight: 600;
    --table-header-font-family: Inter, Arial, Helvetica, sans-serif;
    --table-header-text-alignment: left;

    --table-cell-background-color: #ffffff;
    --table-cell-alignment: flex-start;
    --table-cell-vertical-padding: 9px;
    --table-cell-horizontal-padding: 12px;

    /* Keine ausgeprägten vertikalen Tabellenlinien */
    --table-vertical-separator-color: transparent;
    --table-vertical-separator-size: 0px;

    /* Dezente horizontale Trennung */
    --table-horizontal-separator-color: #e2e2df;
    --table-horizontal-separator-size: 1px;
}

/* Flache Buttons ohne dunklen 3D-Effekt */
.ab-button {
    box-shadow: none;
    text-shadow: none;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease;
}

/* Optional: heller Sekundärbutton wie im Screenshot */
.ab-button.secondary,
.ab-button--secondary {
    color: #007c86;
    background-color: #ffffff;
    border-color: #c9c9c6;
}

.ab-button.secondary:hover,
.ab-button--secondary:hover {
    color: #00636b;
    background-color: #f3f3f1;
    border-color: #aeadab;
}

/* Türkiser Fokus */
.ab-button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid rgba(0, 124, 134, 0.28);
    outline-offset: 1px;
    border-color: #007c86;
}

/*
 * Optional für normale HTML-Tabellen:
 * dezente Wechselzeilen wie in Verwaltungsoberflächen.
 */
table tbody tr:nth-child(even) td {
    background-color: #fafaf8;
}

table tbody tr:hover td {
    background-color: #f1f7f7;
}