.login-area {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-container {
    background-color: var(--bg-surface);
    padding: var(--basic);
    border-radius: var(--basic);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.login-container * {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 300px;
}

.login-container h2 {
    margin-bottom: var(--basic);
}

.login-container .btn {
    margin-top: var(--basic);
}

.login-container img {
    max-width: calc(15 * var(--basic));
}.footer {
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    background-color: var(--bg-muted);
    padding: var(--basic);
    box-sizing: border-box;
}.btn,
.text-input {
    padding: calc(0.5 * var(--basic));
    margin: calc(0.5 * var(--basic));
    border-radius: var(--basic);
    border: none;
    font-size: var(--normal-font-size);
    background-color: var(--bg-input);
    border: 2px solid var(--bg-input);
    color: var(--text-primary);
}

.text-input:hover,
.text-input:focus {
    cursor: pointer;
    border: 2px solid var(--accent);
}

.btn {
    color: var(--text-inverse);
    background-color: var(--contrast);
    font-weight: bold;
}

.btn:hover {
    color: var(--accent);
    filter: brightness(130%);
    cursor: pointer;
}

.invalid {
    background-color: var(--medium-red);
    color: var(--text-inverse);
}

.invalid:hover {
    cursor: not-allowed;
    border: 2px solid var(--red);
}
.menu {
    position: relative;
    top: 0;
    left: 0;
    width: 100vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: calc(4 * var(--basic));
}

.menu img {
    padding: var(--basic);
    margin-left: var(--basic);
    margin-right: var(--basic);
    padding-bottom: calc(0.5 * var(--basic));
    height: calc(4 * var(--basic));
}

.menu-item {
    padding: var(--basic);
    margin-left: var(--basic);
    margin-right: var(--basic);
    padding-bottom: calc(0.5 * var(--basic));
    font-weight: 100;
    letter-spacing: calc(0.15 * var(--basic));
    text-transform: uppercase;
    font-size: var(--smallest-font-size);
    border-radius: calc(0.5 * var(--basic));
    border-bottom: 0.5px solid var(--bg-muted);
}

.menu-item:hover {
    color: var(--secondary);
    cursor: pointer;
    filter: brightness(120%);
}

.page-container {
    width: 100vw;
    min-height: calc(100vh - (4 * var(--basic)));
    padding-bottom: calc(4 * var(--basic));
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.language-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    max-width: calc(15 * var(--basic));
    padding: calc(2 * var(--basic));
}

.language-container * {
    min-width: 0;
}

.language-container *:hover {
    cursor: pointer;
    filter: brightness(120%);
}

.menu-active {
    font-weight: bold !important;
}:root {
    --basic-scale: 1.0;

    --basic-original: clamp(
    14px,
    calc(14px + (4 * ((100vw - 320px) / 1680))),
    18px
    );

    --basic: calc(var(--basic-original) * var(--basic-scale));    

    --smallest-font-size: calc(0.75 * var(--basic));
    --smaller-font-size: calc(0.875 * var(--basic));
    --normal-font-size: var(--basic); 
    --medium-font-size: calc(1.05 * var(--basic));
    --bigger-font-size: calc(1.15 * var(--basic));
    --big-font-size: calc(1.25 * var(--basic));
    --header-font-size: calc(2 * var(--basic));
}

html, body, * {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}

html, body {
  background-color: var(--bg-page);
}

/* Font Size Classes */
.fs-smallest { font-size: var(--smallest-font-size); }
.fs-smaller { font-size:  var(--smaller-font-size); }
.fs-normal { font-size: var(--normal-font-size); }
.fs-medium { font-size: var(--medium-font-size); }
.fs-bigger { font-size: var(--bigger-font-size); }
.fs-big { font-size:  var(--big-font-size); }
.fs-header { font-size: var(--header-font-size); }

/* Font Size Elements */
h1 { font-size: var(--header-font-size); }
h2 { font-size: var(--big-font-size);}
h3 { font-size: var(--bigger-font-size);}
h4, h5, h6 { font-size: var(--medium-font-size);}

blockquote { font-size: var(--bigger-font-size); }

p, label, a { font-size: var(--normal-font-size); }

a {
  color: var(--accent);
}

a:hover,
a:focus {
  cursor: pointer;
  filter: brightness(110%);
}

ul {
  padding: var(--basic);
}

code, pre, kbd, samp, caption { font-size: var(--smaller-font-size); }

caption, small { font-size: var(--smallest-font-size); }

:root {
    --black: #303030;
    --medium-black: #383838;
    --light-black: #f0f0f0;

    --medium-gray: #d0d0d0;
    --gray: #b0b0b0;
    --intense-gray: #909090;
    --dark-gray: #606060;

    --light-red: #fff8f8;
    --medium-red: #ffaaaa;
    --red: #ff0000;
    --dark-red: #7f1d1d;

    --medium-green: #aaffaa;
    --green: #00aa00;
    --light-green: #00ffaa;
    --markup-light-green: #e6f4ea;
    --markup-dark-green: #1a472a;

    --medium-yellow: #ffffaa;
    --yellow: #ffff00;
    --light-yellow: #ffffdd;
    
    --blue: #00aaff;
    
    --orange: #ffaa00;

    --white: #ffffff;
    
    --design: #004f8b;
    
    --gradient: linear-gradient(0deg, var(--design) 0%, rgba(3,42,80,1) 100%);
    --gradient-connect:  linear-gradient(180deg,rgba(20, 88, 148, 1) 0%, var(--design) 100%);

    --hover: #00ffaa;

    /* Flächen */
    --bg-page:        #f2f5f8;   /* Seitenhintergrund */
    --bg-surface:     #ffffff;   /* Cards, Modals */
    --bg-muted:       #e9eef3;   /* Tabellen, Sektionen */
    --bg-input:       #eef3f8;   /* Inputs, Selects */

    /* Struktur */
    --secondary:      #1f3b5c;   /* Header, Sidebar */
    --dark-contrast:  #0b1f33;   /* Footer, Backdrops */

    /* Aktion */
    --contrast:       #004f8b;   /* Primary Action (gegeben) */
    --accent:         #6faed9;   /* Hover, Fokus, Info */

    /* Text */
    --text-primary:   #0b1f33;   /* Haupttext */
    --text-secondary: #4a627a;   /* Labels, Meta */
    --text-muted:     #7f92a6;   /* Platzhalter, Hilfe */
    --text-inverse:   #ffffff;   /* Text auf dunklem Grund */

    /* Rahmen & Linien */
    --border-subtle:  #d6dee7;
    --border-strong:  #b9c6d3;

    /* Status (optional, aber sauber) */
    --success:        #2f8f5b;
    --warning:        #d9a441;
    --error:          #c44545;
}

.black { color: var(--black); }
.medium-black { color: var(--medium-black); }
.light-black { color: var(--light-black); }

.bg-black { background-color: var(--black); }
.bg-medium-black { background-color: var(--medium-black); }
.bg-light-black { background-color: var(--light-black); }


.medium-gray { color: var(--medium-gray); }
.gray { color: var(--gray); }
.intense-gray { color: var(--intense-gray); }
.dark-gray { color: var(--dark-gray); }

.bg-medium-gray { background-color: var(--medium-gray); }
.bg-gray-gray { background-color: var(--gray); }
.bg-intense-gray { background-color: var(--intense-gray); }
.bg-dark-gray { background-color: var(--dark-gray); }


.light-red { color: var(--light-red); }
.medium-red { color: var(--medium-red); }
.red { color: var(--red); }
.dark-red { color: var(--dark-red); }

.bg-light-red { background-color: var(--light-red); }
.bg-medium-red { background-color: var(--medium-red); }
.bg-red { background-color: var(--red); }
.bg-dark-red { background-color: var(--dark-red); }

.medium-green { color: var(--medium-green); }
.green { color: var(--green); }
.light-green { color: var(--light-green); }
.markup-light-green { color: var(--markup-light-green); }
.markup-dark-green { color: var(--markup-dark-green); }

.bg-medium-green { background-color: var(--medium-green); }
.bg-green { background-color: var(--green); }
.bg-light-green { background-color: var(--light-green); }
.bg-markup-light-green { background-color: var(--markup-light-green); }
.bg-markup-dark-green { background-color: var(--markup-dark-green); }

.medium-yellow { color: var(--medium-yellow); }
.light-yellow { color: var(--light-yellow); }

.bg-black { background-color: var(--medium-yellow); }
.bg-light-yellow { background-color: var(--light-yellow); }
    

.blue { color: var(--blue); }

.bg-blue { background-color: var(--blue); }


.orange { color: var(--orange); }

.bg-orange { background-color: var(--orange); }


.white { color: var(--white); }

.bg-white { background-color: var(--white); }


.design { color: var(--design); }Â 

.bg-design { background-color: var(--design); }


.bg-gradient { background-color: transparent; background: var(--gradient);}

.spinner {
  min-width: unset !important;
  width: calc(3 * var(--basic));
  height: calc(3 * var(--basic));
  border: 4px solid transparent;          
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  box-sizing: border-box;
  margin: auto;
}

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.link {
  text-decoration: none;
}