/* Grundlegendes Styling für die Vorlage */
body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    padding-top: 5rem;
    padding-bottom: 5rem;
} 

.kern-wrapper{
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
    flex-wrap: wrap;
} 

/* TODO: fix ROW last und first margin */
.kern-row:first-of-type {
    margin-top: 0 !important;
}
.kern-row:last-of-type {
    margin-bottom: 0 !important;
}

/* TODO: Form Elemente sollen Abstände bekommen */
.kern-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Dark/Light Theme switch */
#theme-toggle .kern-icon--light-mode,
#theme-toggle .kern-icon--dark-mode {
    display: none;
}
[data-kern-theme="light"] #theme-toggle .kern-icon--light-mode {
    display: block;
}
[data-kern-theme="light"] #theme-toggle .kern-icon--dark-mode,
[data-kern-theme="light"] #theme-toggle .kern-icon--brightness-medium {
    display: none;
}
[data-kern-theme="dark"] #theme-toggle .kern-icon--dark-mode {
    display: block;
}
[data-kern-theme="dark"] #theme-toggle .kern-icon--light-mode,
[data-kern-theme="dark"] #theme-toggle .kern-icon--brightness-medium {
    display: none;
}

footer {
    margin-top: auto; /* Sorgt dafür, dass der Footer am unteren Rand bleibt */
}

form {
    margin-bottom: 0; /* TODO: margin definieren für DS */
}


header.layout-header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 1000;
    flex-direction: column;
    background: color-mix(in oklch, var(--kern-color-layout-background-default), transparent 8%);
} 

#logo-link{
    max-width: 100%;
} 

.kern-form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 1rem;
} 

.kern-navi {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.kern-wrapper {
    display: flex;
    justify-content: flex-start;
    gap: 0.5rem;
} 

.dynamic-block {
    display: none !important;
}
form:has(input[id="abweichende-adresse-ja"]:checked) .dynamic-block {
    display: flex !important;
}





/* .breathing-bar {
    display: flex;
    width: 100%;
    height: 4px;
    background-color: transparent; /* Hintergrundfarbe, damit die Lücken sichtbar sind
}

.color-segment {
    flex-grow: 1;
    transition: all 0.5s ease-in-out;
    visibility: visible;
}

.action-default,.action-default2 { background-color: var(--theme-color-action-default); }
.feedback-loader { background-color: var(--theme-color-feedback-loader); }
.layout-border { background-color: var(--theme-color-layout-border); }
.input-background { background-color: var(--theme-color-form-input-background); }
.focus-background { background-color: var(--theme-color-action-focus-background); }
.focus-border-outside,.focus-border-outside2, .focus-border-outside3 { background-color: var(--theme-color-action-focus-border-outside); }
.focus-border-inside { background-color: var(--theme-color-action-focus-border-inside); }
.text-inverse { background-color: var(--theme-color-layout-text-inverse);} 

@keyframes breathe {
    0% { flex-grow: 0.5; }
    25% { flex-grow: 1.5; }
    50% { flex-grow: 3; }
    75% { flex-grow: 1.5; }
    100% { flex-grow: 0.5; }
}

@keyframes breathe-primary {
    0% { flex-grow: 2; }
    50% { flex-grow: 6; }
    100% { flex-grow: 2; }
}

@keyframes fade-in-out {
    0% { opacity: 1; visibility: visible; }
    30% { opacity: 1; visibility: visible; }
    60% { opacity: 0; visibility: hidden; }
    75% { opacity: 0.5; visibility: visible; }
    100% { opacity: 1; visibility: visible; }
}

.focus-border-outside2 {
    animation: breathe 44s infinite alternate, fade-in-out 20s ease-in-out infinite;
}

.text-inverse {
    animation: breathe 56s infinite alternate, fade-in-out 13s ease-in-out infinite;
}

.action-default {
    animation: breathe-primary 62s infinite alternate;
}

.feedback-loader {
    animation: breathe 70s infinite alternate, fade-in-out 21s ease-in-out infinite;
}

.layout-border {
    animation: breathe 64s infinite alternate, fade-in-out 23s ease-in-out infinite;
}

.focus-border-outside3 {
    animation: breathe-primary 108s infinite alternate;
}

.input-background {
    animation: breathe 650s infinite alternate, fade-in-out 17s ease-in-out infinite;
}

.focus-background {
    animation: breathe 72s infinite alternate, fade-in-out 12s ease-in-out infinite;
}

.action-default2 {
    animation: breathe-primary 88s infinite alternate;
}

.focus-border-outside {
    animation: breathe 76s infinite alternate, fade-in-out 21s ease-in-out infinite;
}

.focus-border-inside {
    animation: breathe 52s infinite alternate, fade-in-out 15s ease-in-out infinite;
} */