@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/open-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/open-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/open-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/open-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --zum-farbe-primär                   : #F1D850;
    --zum-farbe-primär---xx-heller       : #fffcf0;
    --zum-farbe-primär---x-heller        : #fff6cc;
    --zum-farbe-primär---heller          : #FFF0A2;
    --zum-farbe-primär---hell            : #FFEA77;
    --zum-farbe-primär---dunkel          : #DEC229;
    --zum-farbe-primär---dunkler         : #AF9612;
    --zum-farbe-sekundär-1               : #C64285;
    --zum-farbe-sekundär-1--xx-heller    : #f7d9e8;
    --zum-farbe-sekundär-1--x-heller     : #f1bbd6;
    --zum-farbe-sekundär-1--heller       : #E994BF;
    --zum-farbe-sekundär-1--hell         : #D965A0;
    --zum-farbe-sekundär-1--dunkel       : #B6226D;
    --zum-farbe-sekundär-1--dunkler      : #900F50;
    --zum-farbe-sekundär-2               : #338894;
    --zum-farbe-sekundär-2--xx-heller    : #c4e3e8;
    --zum-farbe-sekundär-2--x-heller     : #a7d6dd;
    --zum-farbe-sekundär-2--heller       : #85C5CF;
    --zum-farbe-sekundär-2--hell         : #52A1AD;
    --zum-farbe-sekundär-2--dunkel       : #1B7A88;
    --zum-farbe-sekundär-2--dunkler      : #0D5F6B;
    --zum-farbe-komplementär             : #5E43A5;
    --zum-farbe-komplementär--xx-heller  : #dad2ee;
    --zum-farbe-komplementär--x-heller   : #c2b5e3;
    --zum-farbe-komplementär--heller     : #A592D7;
    --zum-farbe-komplementär--hell       : #7B63BC;
    --zum-farbe-komplementär--dunkel     : #482998;
    --zum-farbe-komplementär--dunkler    : #331878;
    --zum-farbe-orange                   : #F19D50;
    --zum-farbe-orange--xx-heller        : #fffcfa;
    --zum-farbe-orange--x-heller         : #ffe7d1;
    --zum-farbe-orange--heller           : #FFCEA2;
    --zum-farbe-orange--hell             : #FFB877;
    --zum-farbe-orange--dunkel           : #DD7F28;
    --zum-farbe-orange--dunkler          : #AE5D12;
    --zum-farbe-grün                     : #A8DF4A;
    --zum-farbe-grün--xx-heller          : #f7fdec;
    --zum-farbe-grün--x-heller           : #e6fac7;
    --zum-farbe-grün--heller             : #D4F69C;
    --zum-farbe-grün--hell               : #C0EF6F;
    --zum-farbe-grün--dunkel             : #8FCD25;
    --zum-farbe-grün--dunkler            : #6CA111;
    --zum-farbe-grau                     : #DBDBDB;
    --zum-farbe-grau--xx-heller          : #fcfcfc;
    --zum-farbe-grau--x-heller           : #f7f7f7;
    --zum-farbe-grau--heller             : #F1F1F1;
    --zum-farbe-grau--hell               : #ececec;
    --zum-farbe-grau--dunkel             : #C8C8C8;
    --zum-farbe-grau--dunkler            : #a0a0a0;
    --zum-farbe-links                    : #0077dd;
    --zum-farbe-links--xx-heller         : #f5faff;
    --zum-farbe-links--x-heller          : #cce7ff;
    --zum-farbe-links--heller            : #47a9ff;
    --zum-farbe-links--hell              : #1492ff;
    --zum-farbe-links--dunkel            : #0068bd;
    --zum-farbe-links--dunkler           : #005599;
}

body {
    font-family: 'Open Sans', sans-serif;
    background-color: var(--zum-farbe-sekundär-2--xx-heller);
    color: #333;
}

.bg-zum-yellow { background-color: var(--zum-farbe-primär); }
.bg-zum-yellow-xheller { background-color: var(--zum-farbe-primär---x-heller); }
.bg-zum-yellow-xxheller { background-color: var(--zum-farbe-primär---xx-heller); }
.bg-zum-blue { background-color: var(--zum-farbe-sekundär-2); }
.bg-zum-blue-dunkel { background-color: var(--zum-farbe-sekundär-2--dunkel); }
.bg-zum-blue-xheller { background-color: var(--zum-farbe-sekundär-2--x-heller); }
.bg-zum-blue-xxheller { background-color: var(--zum-farbe-sekundär-2--xx-heller); }
.bg-zum-green { background-color: var(--zum-farbe-grün); }
.bg-zum-green-dunkel { background-color: var(--zum-farbe-grün--dunkel); }
.bg-zum-green-xheller { background-color: var(--zum-farbe-grün--x-heller); }
.bg-zum-green-xxheller { background-color: var(--zum-farbe-grün--xx-heller); }
.bg-zum-purple-xheller { background-color: var(--zum-farbe-komplementär--xx-heller); }
.bg-zum-purple-heller { background-color: var(--zum-farbe-komplementär--x-heller); }
.bg-zum-purple-hell { background-color: var(--zum-farbe-komplementär--heller); }
.bg-zum-purple { background-color: var(--zum-farbe-komplementär--hell); }
.bg-zum-purple-dunkel { background-color: var(--zum-farbe-komplementär); }
.bg-zum-purple-dunkler { background-color: var(--zum-farbe-komplementär--dunkel); }
.bg-zum-purple-xdunkler { background-color: var(--zum-farbe-komplementär--dunkler); }
.bg-zum-purple-gradient { background: linear-gradient(135deg, var(--zum-farbe-komplementär--xx-heller) 0%, var(--zum-farbe-komplementär--x-heller) 100%); }

.color-zum-blue { color: var(--zum-farbe-sekundär-2); }
.color-zum-blue-dunkler { color: var(--zum-farbe-sekundär-2--dunkler); }
.color-zum-green { color: var(--zum-farbe-grün--dunkler); }
.color-zum-green-dunkler { color: var(--zum-farbe-grün--dunkler); }
.color-zum-purple { color: var(--zum-farbe-komplementär--hell); }
.color-zum-purple-dunkler { color: var(--zum-farbe-komplementär--dunkel); }
.color-zum-purple-xdunkler { color: var(--zum-farbe-komplementär--dunkler); }

.b--zum-yellow { border-color: var(--zum-farbe-primär); }
.b--zum-blue { border-color: var(--zum-farbe-sekundär-2); }
.b--zum-green { border-color: var(--zum-farbe-grün); }
.b--zum-purple { border-color: var(--zum-farbe-komplementär--hell); }

.hover-bg-zum-yellow:hover, .hover-bg-zum-yellow:focus { background-color: var(--zum-farbe-primär---x-heller); }
.hover-bg-zum-blue:hover, .hover-bg-zum-blue:focus { background-color: var(--zum-farbe-sekundär-2--heller); }
.hover-bg-zum-blue-dunkel:hover, .hover-bg-zum-blue-dunkel:focus { background-color: var(--zum-farbe-sekundär-2--dunkel); }
.hover-bg-zum-green:hover, .hover-bg-zum-green:focus { background-color: var(--zum-farbe-grün--dunkel); }
.hover-bg-zum-green-dunkel:hover, .hover-bg-zum-green-dunkel:focus { background-color: var(--zum-farbe-grün--dunkel); }
.hover-bg-zum-purple:hover, .hover-bg-zum-purple:focus { background-color: var(--zum-farbe-komplementär--dunkel); }
.hover-bg-zum-purple-dunkel:hover, .hover-bg-zum-purple-dunkel:focus { background-color: var(--zum-farbe-komplementär--dunkel); }
.hover-color-zum-blue:hover, .hover-color-zum-blue:focus { color: var(--zum-farbe-sekundär-2); }
.hover-color-zum-green:hover, .hover-color-zum-green:focus { color: var(--zum-farbe-grün); }

.login-box {
    max-width: 400px;
    margin: 0 auto;
}

.action-card {
    transition: transform 0.2s;
}

.action-card:hover {
    transform: translateY(-5px);
}

.gap0 { gap: 0; }
.gap1 { gap: .25rem; }
.gap2 { gap: .5rem; }
.gap3 { gap: 1rem; }
.gap4 { gap: 2rem; }
.gap5 { gap: 4rem; }

.transition { transition: all 0.2s ease-in-out; }