html {
    scroll-behavior: smooth; /* Enable smooth scrolling for the entire page */
}

body {
    font-family: 'Roboto', sans-serif;
    color: #646363;
}

h1 {
    font-size: 2.125rem;
}

.row {
    --bs-gutter-x: 0.6rem;
}

.header-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    background-color: #fff;
}

footer {
    background-image: url('../images/footer.png');
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    color: #fff;
    font-size: 0.75rem !important;
}

footer a {
    margin: 0 10px;
    color: inherit;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

/* Leicht sichtbarer Fokus für bessere Accessibility (Bootstrap macht das schon gut, aber man kann es verstärken) */
:focus-visible {
    outline: 2px solid dodgerblue;
    outline-offset: 2px;
}

/* Versteckt die Standard-Legende etwas, wenn gewünscht, aber hält sie für Screenreader verfügbar */
/* fieldset legend { float: left; width: 100%; margin-bottom: 0.5rem; } */

form {
    max-width: 730px;
    margin-left: auto;
    margin-right: auto;
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 .25rem #fee283;
}

::placeholder {
    color: #bebebe !important;
}

input[type="date"]::placeholder {
    color: #bebebe !important;
    opacity: 1;
}

input[type="date"]:not(:valid),
input[type="date"]:invalid {
    color: #bebebe !important;
}

select.form-select option[disabled] {
    color: #bebebe !important;
}

select.form-select option:not([disabled]) {
    color: initial;
}

/* Grey out the select when the selected option has empty value */
select.form-select:has(option[value=""]:checked) {
    color: #bebebe !important;
}

select.form-select:invalid {
    color: #bebebe !important;
}

.form-control,
.form-select,
.form-check-input {
    border-color: #ababab !important;
}

.form-label {
    margin-bottom: 0.125rem !important;
}

label, input, select, textarea, .form-control, .form-select {
    font-size: 1.125rem;
    line-height: 1.625;
}
.form-check-input {
    width: 1.25rem;
    height: 1.25rem;
}

#consent + .form-check-label {
    font-size: 0.9375rem;
}

#consent + .form-check-label a {
    color: inherit;
    text-decoration: underline;
}

p.text-muted small {
    font-size: 0.75rem;
}

button[type="submit"].btn-danger {
    border-radius: 0 !important;
}

#backButton.btn-danger {
    border-radius: 0 !important;
}

.custom-shadow-rb {
    box-shadow: 2px 2px 1px 0 rgba(192, 192, 192, 0.6);
}

.custom-btn {
    padding: 0.85rem 2.5rem 0.625rem 2.5rem;
    font-size: 1.415625rem;
}

.custom-content-container {
    max-width: 768px;
}

#scroll-to-view {
    transition: all 0.5s ease-in-out;
    scroll-margin-top: 20px; /* Adds some space at the top when scrolling to this element */
}

.custom-note-text{
    font-size: 0.9375rem;
}
.custom-note-text a{
    color: inherit;
    text-decoration: underline;
}

/* --- */

.mbottom-2 {
    margin-bottom: 2em;
}

.mbottom-3 {
    margin-bottom: 3em;
}

.mbottom-5 {
    margin-bottom: 5em;
}

.tnbText {
    font-size: 0.95rem;
}

/* Styling for ordered lists */
ol.liststyled {
    text-align: justify;
    list-style-type: none;
    counter-reset: top-level-section;
}

ol.liststyled > li {
    counter-increment: top-level-section;
    position: relative;
    padding-left: 1.625em;
}

ol.liststyled > li::before {
    content: counter(top-level-section) ". ";
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* Styling for nested ordered lists */
ol.liststyled > li > ol {
    counter-reset: item;
    list-style-type: none;
    margin-top: 0.125em;
    padding-left: 1.625em;
}

ol.liststyled > li > ol > li {
    counter-increment: item;
    position: relative;
    padding-left: 0.375rem;
    padding-top: 0.75rem;
}

ol.liststyled > li > ol > li:before {
    content: counter(top-level-section) "." counter(item) ". ";
    position: absolute;
    left: -1.625em;
}

ol.liststyled > li > ol > li > ul > li {
    padding-top: 0.75rem;
}