:root {
    /* Hausfarben Nährstoff-Kompass Niedersachsen */
    --nk-green: #6EB348;
    --nk-green-dark: #5a933b;
    --nk-blue: #004AAD;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body {
    margin: 0;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.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;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.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;
}

.page-center {
    display: flex;
    flex-direction: column;    /* Boxen untereinander */
    align-items: center;       /* Zentriert die Boxen horizontal */
    gap: 20px;                 /* Abstand zwischen den Boxen */
    margin-top: 20px;          /* Abstand zur Überschrift */
    padding: 20px;
    min-height: calc(100vh - 100px); /* fast volle Höhe, aber Platz für Header lassen */
}

.box {
    background-color: #f5f5f5;     /* leicht grau */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* leichte Schattierung */
    width: 100%;                   /* Volle Breite des Containers */
    max-width: 500px;              /* Aber begrenzt auf eine angenehme Breite */
    box-sizing: border-box;        /* Padding wird in Breite eingerechnet */
}

.box h3 {
    color: var(--nk-green);
    margin-top: 0;
}

.box h4 {
    font-size: 1.1rem;
    font-weight: normal;
    margin-bottom: 5px;
}

.btn-nk {
    background-color: var(--nk-green);
    color: white;
    border: none;
}

.btn-nk:hover {
    background-color: var(--nk-green-dark);
    color: white;
}

/* ---------- Seiten mit Foto-Hintergrund und Karussell ----------

   Aufbau von Aktuelles, Die Idee und weitere Infos: dasselbe Hintergrundbild wie auf der
   Startseite, das Karussell füllt die Fläche zwischen dem grünen Trennstreifen und der
   grünen Fußzeile und hat oben und unten den gleichen Abstand zu beiden Leisten.
   min-height: 0 sorgt dafür, dass lange Beiträge in der Box gescrollt werden. */

.foto-seite {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 3rem;
    padding: 1.5rem 0.75rem;
    background-image: url('/images/Foto_Startseite.JPG');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.foto-seite-karussell {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Zwei Bilder mit Rahmen rechts neben dem Karussell */
.foto-seite-bilder {
    flex: 0 0 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3rem;
    width: clamp(14rem, 20vw, 22rem);
}

.foto-seite-bilder img {
    flex: 0 1 auto;
    min-height: 0;
    width: 100%;
    max-height: 100%;
    height: auto;
    object-fit: contain;
    border: 3px solid #2f2f2f;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* Kein PC: die Breite gehört dem Text */
@media (max-width: 1400px) {
    .foto-seite-bilder {
        display: none;
    }
}

@media (max-width: 820px), (max-height: 500px) and (orientation: landscape) {
    .foto-seite {
        padding: 0.75rem 0.4rem;
    }
}