html {
  font-size: 14px;
}

@font-face {
    font-family: 'Caveat';
    src: url('~/fonts/Caveat-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}


.welcome-text {
    font-size: 2rem; /* Handwriting fonts often need to be slightly larger to be readable */
}

.welcome-text-block {
    font-size: 1rem; /* Handwriting fonts often need to be slightly larger to be readable */
}


/* Sorgt dafür, dass alle Vorschaubilder das gleiche Format haben */
.gallery-img {
    width: 100%;
    height: 250px; /* Hier kannst du die gewünschte Höhe einstellen */
    object-fit: cover; /* Schneidet das Bild passend zu, ohne es zu verzerren */
    transition: transform 0.3s ease; /* Kleiner Zoom-Effekt beim Drüberfahren */
    cursor: pointer;
}

.gallery-img:hover {
    transform: scale(1.02);
}

.modal-body img {
    max-height: 85vh !important; /* Begrenzt die Höhe auf 85% des Sichtfeldes */
    width: auto !important; /* Die Breite skaliert automatisch mit */
    object-fit: contain !important; /* Das Bild wird sicher eingepasst */
    display: block;
    margin: 0 auto; /* Zentriert das schmale Bild im breiten Modal */
}

/* Verhindert, dass das Modal selbst einen Scrollbalken erzwingt */
.modal-dialog {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
}

    .modal-dialog.lightbox-modal {
        max-height: 95vh;
        margin: 1.75rem auto;
        display: flex;
        align-items: center; /* Zentriert das Bild vertikal */
    }

/* Der Container, der das Bild hält */
.modal-body.lightbox-content {
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden !important; /* Verhindert Scrollbalken im Rahmen */
}

    /* Das Bild selbst: Maximal so hoch wie das Fenster minus etwas Puffer */
    .modal-body.lightbox-content img {
        max-width: 100% !important;
        max-height: 85vh !important; /* Wichtig für Hochkant-Bilder */
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }