:root {
    --bg-background: #121212;
    --bg-surface: #1E1E1E; /* Für Haupt-UI-Elemente wie Karten (Cards), Feeds oder Listen-Elemente. Dieser Wert liegt dezent über dem Hintergrund.*/
    --bg-surface-variant: #2D2D2D; /* Für Komponenten, die sich nochmals abheben müssen, wie Suchleisten, Eingabefelder (Inputs) oder Tooltips. */

    --dezent-rgba: rgba(255, 255, 255, 0.1);
    --dezent-rgba-variant: rgba(255, 255, 255, 0.3);

    --color-text-high: #f1f1f1;
    --color-text-med: #a3a3a3;
    --color-text-low: #404040;
    --color-info-text: #222222;

    --color-primary: #80d8ff; 
    --color-primary-variant: #00b2cc;
    --color-secondary: #ffe57f;
    --color-secondary-variant: #ffd600;
    --color-remove: #ff8a80;
    --color-remove-variant: #f44336;
    
    --color-info: #66c798;
    --color-info-2: #9f7fd6;

    /* 14px = 0.875rem */
    --font-size: 0.875rem;
    --font-line-height: 1.4;
    --font-family: 'Inter', 'Roboto', Arial, sans-serif;
    
    --font-base: var(--font-size)/var(--font-line-height) var(--font-family);

    /* 1px = 0.0625rem */
    --border-size: 0.0625rem;
    /* 2px = 0.125rem */
    --border-size-variant: 0.125rem;

    --border-radius: 1rem;  
    --border-radius-variant: 1.875rem;  

    /* 16px = 1rem | 8px = 0.5rem */
    --gap-size: 0.5rem;    
    --gap-size-variant: 1rem;   
         
    /* 30px = 1.875rem | 16px = 1rem */
    --padding-size-small: 0.2rem;  
    --padding-size: 1rem;  
    --padding-size-variant: 1.875rem;  

    --box-shadow: 0 0.5rem 1rem -0.0625rem rgba(0, 0, 0, 0.2), 0 0.5rem 1rem -0.0625rem rgba(0, 0, 0, 0.1);
    
    --transition-global: opacity 0.8s ease, background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
}

html.light-mode, body.light-mode {
    --bg-background: #F8F9FA;
    --bg-surface: #FFFFFF;
    --bg-surface-variant: #E9ECEF;

    --dezent-rgba: rgba(0, 0, 0, 0.1);
    --dezent-rgba-variant: rgba(0, 0, 0, 0.3);

    --color-text-high: #212121;
    --color-text-med: #666666;
    --color-text-low: #f1f1f1;    
    --color-info-text: #ffffff;  

    --color-primary: #00768a;
    --color-primary-variant: #004d5a;
    --color-secondary: #ffaa00;
    --color-secondary-variant: #cc8800;
    --color-remove: #d32f2f;    
    --color-remove-variant: #b00020;

    --color-info: #30ab63;
    --color-info-2: #6b3bd3;   
}

html {
    height: 100%;
    max-width: 100%;
}

body {
    height: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--bg-background);
    color: var(--color-text-high);
    font: var(--font-base); 
    -webkit-font-smoothing: antialiased;
    transition: var(--transition-global);
}

form {
    align-self: stretch; 
}

input, textarea, select, button {
    font: var(--font-base); 
}

label {
    color: var(--color-text-high);
    line-height: 0rem;
    position: relative;
    top: 0.2rem;
    left: 1.0rem;
}

nav, main, footer, filterbar {
    margin: var(--padding-size) var(--padding-size-variant);
    padding: 0px;
} 

a {
    text-decoration: none;
    color: inherit;
}

h1 { margin: 0; }
h2 { margin: 0; }
h3 { margin: 0; }
p { margin: 0; }
code, pre { margin: 0; }

/* MAIN */
main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    box-sizing: border-box;
    padding-bottom: var(--padding-size-variant);
}

code, pre {
    display: inline-block; 
    background-color: var(--bg-surface);
    border: var(--border-size) solid var(--dezent-rgba);
    padding: var(--padding-size-variant);
    box-sizing: border-box;
    border-radius: var(--border-radius);
}

hr {
    width: 100%;
}

hr {
    margin: 0.5rem 0;
    height: 1px;
    border: 0px;
    border-bottom: var(--border-size) solid var(--dezent-rgba);
}

input[type="text"],
input[type="password"] {
    height: 3rem;
    padding: var(--padding-size);
}

textarea { 
    padding: var(--padding-size);
    resize: none;
}

textarea,
input[type="password"],
input[type="text"] {
    border-radius: var(--border-radius);
    box-sizing: border-box;
    transition: var(--transition-global); 
    field-sizing: content; 
    /* width: 100%; */
    /* min-width: 6rem;  */
    border: var(--border-size) solid var(--dezent-rgba-variant);
    background-color: var(--bg-surface-variant);
    color: var(--color-text-high);
    outline: none;
}

textarea:focus,
input[type="password"]:focus,
input[type="text"]:focus {
    border-color: var(--color-primary-variant);
}

textarea.filled,
input[type="password"].filled,
input[type="text"].filled {
    border-color: var(--color-secondary-variant);
}

textarea::placeholder,
input[type="password"]::placeholder,
input[type="text"]::placeholder {
    color: var(--dezent-rgba-variant);
    text-transform: uppercase;   
    letter-spacing: 0.06rem;  
}

textarea:disabled,
textarea[readonly],
input[type="password"]:disabled,
input[type="password"][readonly],
input[type="text"]:disabled,
input[type="text"][readonly] {
    border: 0; /*var(--border-size) solid var(--dezent-rgba);*/
    color: var(--dezent-rgba-variant);
}

/* CONTENT */
.content {
    flex-grow: 1;
    min-width: 18rem;  
    box-sizing: border-box;
    /* margin: auto;  */
    background-color: var(--bg-surface);
    border-radius: var(--border-radius);
    padding: var(--padding-size-variant);
    transition: var(--transition-global);
    border: var(--border-size) solid var(--dezent-rgba);
}

/* HIER STARTET DEIN ZWEITER CSS-TEIL */

.gap-s {
    gap: var(--gap-size);
}
.gap-m {
    gap: var(--gap-size-variant);
}

.padding-s {
    padding: var(--padding-size)
}
.padding-m {
    padding: var(--padding-size-variant)
}

.shadow {
    box-shadow: var(--box-shadow);
}

/* UI : ScrollToTopIcon */
#scroll-to-top-btn {
    display: none;
}
#scroll-to-top-btn.visible {
    display: flex;
}

/* CONTAINER */

.container-column {
    display: flex;
    flex-direction: column;   
    flex-wrap: nowrap;
}

.container-row {
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    flex-wrap: nowrap; 
}

.container-name-value {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.container-flex {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
}

.container-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* COUNTER */
.counter-container {
    height: 3rem;
    min-width: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-info-2);
    color: var(--color-info-text);
    padding: var(--padding-size);
    border-radius: var(--border-radius-variant);
    font-weight: bold;
    box-sizing: border-box;
}

/* POSITION */
.position-right {
    position: absolute;
    right: 0;
    align-items: flex-end;
}
.position-top-right {
    position: absolute;
    right: 0;
    top: 0;
    align-items: flex-end;
}
.position-top-left {
    position: absolute;
    left: 0;
    top: 0;
    align-items: flex-start;
}

.position-fixed-bottom-left {
    position: fixed;
    bottom: var(--padding-size-variant);
    left: var(--padding-size-variant);
    z-index: 11;
}
.position-fixed-bottom-right {
    position: fixed;
    bottom: var(--padding-size-variant);
    right: var(--padding-size-variant);
    z-index: 11;
}
.position-fixed-bottom-center {
    position: fixed;
    bottom: var(--padding-size-variant);
    left: 50%;
    transform: translateX(-50%);
    z-index: 11;
}
.position-fixed-top-center {
    position: fixed;
    top: var(--padding-size-variant);
    left: 50%;
    transform: translateX(-50%);
    z-index: 11;
}

.notification {
    opacity: 0;
    display: inline-flex;
    gap: var(--gap-size);
    align-items: center;
    padding: var(--padding-size);
    border-radius: var(--border-radius-variant);
    white-space: nowrap;
    pointer-events: none;
    box-sizing: border-box;
    z-index: 30;
}

.success {
    background-color: var(--color-info);
    color: var(--color-info-text);
}
.info {
    background-color: var(--color-secondary);
    color: var(--color-info-text);
}
.info-text {
    color: var(--color-info);
}
.error {
    background-color: var(--color-remove);
    color: var(--color-info-text);
}

.is-visible {
    opacity: 1;
    transition: var(--transition-global);
}

.is-leaving {
    opacity: 0;
    transition: var(--transition-global);
}

footer a {
    text-decoration: none;
    color: var(--color-primary);
    font-weight: bold;
}
footer a:hover {
    color: var(--color-primary-variant);
}

dialog {
    color: var(--color-text-high);
    opacity: 0;
    padding: var(--padding-size-variant);
    background-color: var(--bg-surface);
    border: var(--border-size) solid var(--dezent-rgba);
    border-radius: var(--border-radius);
}
dialog[open] {
    opacity: 1;
}

.dialog::backdrop {
    background-color: var(--dezent-rgba-variant);
    backdrop-filter: blur(4px); 
    opacity: 0;
    transition: opacity 0.15s ease-out;
}

.dialog[open]::backdrop {
    opacity: 1;
}

.badge {
    display: inline-block;
    background-color: var(--color-info);
    color: var(--color-info-text);
    padding: var(--padding-size-small) var(--padding-size);
    white-space: nowrap;
    pointer-events: none;
    box-sizing: border-box;
    transition: var(--transition-global);
}

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

.b { font-weight: bold; }