/*
 * VRBK Jugendwettbewerb
 * Gestaltung angelehnt an die Markenwelt
 * der Volksbanken Raiffeisenbanken
 */

:root {
    /*
     * Markenfarben
     */
    --vr-blue: #00529c;
    --vr-blue-dark: #003f78;
    --vr-orange: #f28c00;
    --vr-orange-dark: #d97900;

    --vr-text: #252525;
    --vr-text-light: #666666;

    --vr-gray: #f3f4f5;
    --vr-gray-dark: #dddddd;
    --vr-white: #ffffff;

    /*
     * Bootstrap überschreiben
     */
    --bs-primary: #00529c;
    --bs-primary-rgb: 0, 82, 156;

    --bs-secondary: #f28c00;
    --bs-secondary-rgb: 242, 140, 0;

    --bs-body-color: #252525;
    --bs-body-bg: #ffffff;

    --bs-link-color: #00529c;
    --bs-link-color-rgb: 0, 82, 156;

    --bs-link-hover-color: #003f78;
    --bs-link-hover-color-rgb: 0, 63, 120;

    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
}


/* --------------------------------------------------
   Grundlayout
-------------------------------------------------- */

body {
    color: var(--vr-text);
    background: var(--vr-white);
    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif;
}


/* etwas kompakter als Bootstrap Standard */
main {
    padding-bottom: 3rem;
}


/* --------------------------------------------------
   Typografie
-------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--vr-text);
    font-weight: 600;
}

h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.15;
}

h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.lead {
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--vr-text);
}


/* --------------------------------------------------
   Navigation
-------------------------------------------------- */

.navbar {
    background: #ffffff !important;
    border-bottom: 1px solid #e3e3e3;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.navbar-brand {
    padding: 0;
}

.navbar-brand img {
    display: block;
}


/* --------------------------------------------------
   Hero / Wettbewerbsbild
-------------------------------------------------- */

.competition-hero {
    width: 100%;
    display: block;
}


/* --------------------------------------------------
   Intro
-------------------------------------------------- */

.intro-section {
    max-width: 850px;
    padding-top: 2rem;
    padding-bottom: 1rem;
}

.intro-section h1::after {
    content: "";
    display: block;

    width: 64px;
    height: 5px;

    margin-top: 1rem;
    margin-bottom: 1.5rem;

    background: var(--vr-orange);
}


/* --------------------------------------------------
   Unterlagen
-------------------------------------------------- */

.download-section {
    margin-top: 2.5rem;
    padding: 2rem;

    background: var(--vr-gray);
}

.download-section h2 {
    margin-bottom: 1.5rem;
}


/* Download-Links bewusst eher wie große
   Navigationselemente statt klassische Buttons */

.download-link {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    padding: 1rem 1.25rem;

    background: #ffffff;
    color: var(--vr-text);

    border: 1px solid var(--vr-gray-dark);

    font-size: 1rem;
    font-weight: 600;

    text-decoration: none;

    transition:
        border-color 0.15s ease,
        background-color 0.15s ease,
        color 0.15s ease;
}

.download-link:hover,
.download-link:focus {
    color: var(--vr-blue);
    background: #ffffff;

    border-color: var(--vr-blue);
}

.download-link::after {
    content: "PDF ↓";

    margin-left: 1rem;

    color: var(--vr-blue);

    font-size: 0.8rem;
    font-weight: 700;
}


/* --------------------------------------------------
   Hauptbutton
-------------------------------------------------- */

.btn-primary {
    --bs-btn-color: #ffffff;

    --bs-btn-bg: var(--vr-blue);
    --bs-btn-border-color: var(--vr-blue);

    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--vr-blue-dark);
    --bs-btn-hover-border-color: var(--vr-blue-dark);

    --bs-btn-focus-shadow-rgb: 0, 82, 156;

    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--vr-blue-dark);
    --bs-btn-active-border-color: var(--vr-blue-dark);

    font-weight: 600;
    padding: 0.9rem 1.5rem;

    border-radius: 0;
}


/*
 * Orange als sekundäre Aktion
 */
.btn-secondary {
    --bs-btn-color: #ffffff;

    --bs-btn-bg: var(--vr-orange);
    --bs-btn-border-color: var(--vr-orange);

    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--vr-orange-dark);
    --bs-btn-hover-border-color: var(--vr-orange-dark);

    border-radius: 0;
}


/* --------------------------------------------------
   Anmeldung
-------------------------------------------------- */

.registration-box {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.registration-box .btn {
    min-height: 58px;

    display: flex;
    justify-content: center;
    align-items: center;
}


/* --------------------------------------------------
   Links
-------------------------------------------------- */

a {
    transition: color 0.15s ease;
}


/* --------------------------------------------------
   Tastaturbedienung / Accessibility
-------------------------------------------------- */

a:focus-visible,
button:focus-visible,
.btn:focus-visible {
    outline: 3px solid var(--vr-orange);
    outline-offset: 3px;
}


/* --------------------------------------------------
   Mobile
-------------------------------------------------- */

@media (max-width: 767.98px) {

    .navbar {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .navbar-brand img {
        height: 34px;
    }

    .intro-section {
        padding-top: 1.5rem;
    }

    .download-section {
        margin-left: -0.75rem;
        margin-right: -0.75rem;

        padding: 1.5rem 0.75rem;
    }

    .download-link {
        padding: 1rem;
    }
}
/* ==================================================
   Spendenbereich
================================================== */

.donation-section {
    margin-top: 2.5rem;
    padding-top: 2rem;

    border-top: 1px solid var(--vr-gray-dark);
}

.donation-heading {
    margin-bottom: 1.5rem;
}

.donation-heading h3 {
    margin-bottom: 0.35rem;

    font-size: 1.25rem;
    font-weight: 600;
}

.donation-heading h3::before {
    content: "";

    display: inline-block;

    width: 5px;
    height: 1.15em;

    margin-right: 0.65rem;

    vertical-align: -0.15em;

    background: var(--vr-orange);
}

.donation-heading p {
    max-width: 720px;

    margin-bottom: 0;

    color: var(--vr-text-light);
}


/* ==================================================
   Überschriften ohne Nummern
================================================== */

.form-section-heading {
    display: block;

    margin-bottom: 2rem;
}

.form-section-heading h2 {
    margin-bottom: 0.35rem;
}

.form-section-heading p {
    max-width: 720px;
}


/*
 * Die bisherigen Nummern werden nicht mehr benötigt.
 * Kann entfernt werden, falls noch in vrbk.css vorhanden.
 */

.section-number {
    display: none;
}


/* ==================================================
   Optional-Kennzeichnung
================================================== */

.optional-label {
    display: inline-block;

    margin-left: 0.35rem;

    color: var(--vr-text-light);

    font-size: 0.8rem;
    font-weight: 400;

    vertical-align: middle;
}


/*
 * Der optionale Bereich darf etwas zurückhaltender wirken.
 */

.optional-section {
    border-top-color: #9aa3aa;
}


/* ==================================================
   Absenden
================================================== */

.registration-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 2rem;

    margin: 2.5rem 0 3rem;
    padding-top: 2rem;

    border-top: 1px solid var(--vr-gray-dark);
}

.submit-info {
    max-width: 600px;
}

.submit-info strong {
    display: block;

    margin-bottom: 0.25rem;

    font-size: 1.1rem;
}

.submit-info p {
    margin: 0;

    color: var(--vr-text-light);
}


/* ==================================================
   Mobile
================================================== */

@media (max-width: 767.98px) {

    .donation-section {
        margin-top: 2rem;
        padding-top: 1.5rem;
    }

    .registration-submit {
        display: block;
    }

    .registration-submit .btn {
        width: 100%;

        margin-top: 1.25rem;
    }

}
/* ==================================================
   Unterlagen bestellen
================================================== */

.order-page {
    padding-bottom: 3rem;
}


/* --------------------------------------------------
   Hinweis Pädagogenmagazine
-------------------------------------------------- */

.teacher-magazine-info {
    max-width: 1000px;

    margin-bottom: 2rem;
    padding: 1.25rem 1.5rem;

    background: #eef5fa;

    border-left: 5px solid var(--vr-blue);

    line-height: 1.6;
}

.teacher-magazine-info strong:first-child {
    color: var(--vr-blue);
}


/* --------------------------------------------------
   Formular
-------------------------------------------------- */

.order-form-section {
    max-width: 1000px;
}

.order-quantities {
    margin-top: 2.5rem;
    padding-top: 2rem;

    border-top: 1px solid var(--vr-gray-dark);
}

.order-quantities h3 {
    margin-bottom: 1.5rem;

    font-size: 1.2rem;
}

.order-age {
    display: block;

    margin-top: 0.15rem;

    color: var(--vr-text-light);

    font-size: 0.85rem;
    font-weight: 400;
}


.order-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 2rem;

    margin-top: 2.5rem;
    padding-top: 2rem;

    border-top: 1px solid var(--vr-gray-dark);
}

.order-submit strong {
    display: block;

    margin-bottom: 0.25rem;
}

.order-submit p {
    max-width: 570px;

    margin: 0;

    color: var(--vr-text-light);
}


/* --------------------------------------------------
   Meldungen
-------------------------------------------------- */

.order-message {
    max-width: 1000px;

    border-radius: 0;
}

.alert-success.order-message {
    border: 0;
    border-left: 5px solid #39813c;
}


/* --------------------------------------------------
   Übersicht
-------------------------------------------------- */

.orders-overview {
    max-width: 1200px;

    margin-top: 3.5rem;
    margin-bottom: 3rem;
}


.orders-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 2rem;

    margin-bottom: 1.5rem;
}

.orders-heading h2 {
    margin-bottom: 0.3rem;
}

.orders-heading p {
    margin: 0;

    color: var(--vr-text-light);
}


.orders-count {
    flex-shrink: 0;

    padding: 0.45rem 0.7rem;

    background: var(--vr-gray);

    color: var(--vr-text-light);

    font-size: 0.85rem;
    font-weight: 600;
}


/* --------------------------------------------------
   Leere Übersicht
-------------------------------------------------- */

.orders-empty {
    padding: 2rem;

    background: var(--vr-gray);

    border-left: 4px solid var(--vr-blue);
}

.orders-empty strong {
    display: block;

    margin-bottom: 0.25rem;
}

.orders-empty p {
    margin: 0;

    color: var(--vr-text-light);
}


/* --------------------------------------------------
   Tabelle
-------------------------------------------------- */

.order-table {
    margin-bottom: 0;

    vertical-align: middle;
}

.order-table thead th {
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;

    background: var(--vr-blue);
    color: #ffffff;

    border: 0;

    font-size: 0.85rem;
    font-weight: 600;

    white-space: nowrap;
}

.order-table tbody td {
    padding-top: 1rem;
    padding-bottom: 1rem;

    border-bottom: 1px solid #e4e4e4;
}

.order-table tbody tr:hover td {
    background: #f8fafb;
}

.order-table tfoot th {
    padding-top: 1rem;
    padding-bottom: 1rem;

    background: var(--vr-gray);

    border-top: 2px solid var(--vr-blue);
}


.order-date {
    color: var(--vr-text-light);

    white-space: nowrap;
}


.class-badge {
    display: inline-block;

    margin-left: 0.5rem;
    padding: 0.2rem 0.45rem;

    background: var(--vr-gray);

    color: var(--vr-text-light);

    font-size: 0.8rem;
    font-weight: 600;
}


.order-action-column {
    width: 1%;
}


/* --------------------------------------------------
   Löschen
-------------------------------------------------- */

.delete-order-form {
    margin: 0;
}

.btn-delete-order {
    padding: 0.35rem 0.6rem;

    background: transparent;
    color: #a52834;

    border: 1px solid #c9c9c9;

    font-size: 0.85rem;
    font-weight: 600;

    white-space: nowrap;
}

.btn-delete-order:hover {
    background: #a52834;
    color: #ffffff;

    border-color: #a52834;
}

.btn-delete-order:focus-visible {
    outline: 3px solid var(--vr-orange);
    outline-offset: 2px;
}


/* --------------------------------------------------
   Zusatzhinweis
-------------------------------------------------- */

.orders-note {
    padding: 1rem 1.25rem;

    background: #eef5fa;

    border-bottom: 1px solid #d8e6ef;

    font-size: 0.9rem;
}


/* --------------------------------------------------
   Mobile
-------------------------------------------------- */

@media (max-width: 767.98px) {

    .teacher-magazine-info {
        margin-left: -0.75rem;
        margin-right: -0.75rem;

        padding: 1.25rem 1rem;
    }

    .order-submit {
        display: block;
    }

    .order-submit .btn {
        width: 100%;

        margin-top: 1.25rem;
    }

    .orders-heading {
        display: block;
    }

    .orders-count {
        display: inline-block;

        margin-top: 1rem;
    }

    .order-table {
        min-width: 800px;
    }

}
/* ==================================================
   Gewinner melden
================================================== */

.winner-page {
    padding-bottom: 3rem;
}


/* --------------------------------------------------
   Meldungen
-------------------------------------------------- */

.winner-message {
    max-width: 1000px;

    border-radius: 0;
}

.alert-success.winner-message {
    border: 0;
    border-left: 5px solid #39813c;
}


/* --------------------------------------------------
   Formular
-------------------------------------------------- */

.winner-form-section {
    max-width: 1000px;
}


.winner-subsection + .winner-subsection {
    margin-top: 2.5rem;
    padding-top: 2rem;

    border-top: 1px solid var(--vr-gray-dark);
}


.winner-subsection h3 {
    margin-bottom: 1.5rem;

    font-size: 1.2rem;
    font-weight: 600;
}


.winner-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 2rem;

    margin-top: 2.5rem;
    padding-top: 2rem;

    border-top: 1px solid var(--vr-gray-dark);
}


.winner-submit strong {
    display: block;

    margin-bottom: 0.25rem;
}


.winner-submit p {
    max-width: 550px;

    margin: 0;

    color: var(--vr-text-light);
}


/* --------------------------------------------------
   Übersicht
-------------------------------------------------- */

.winners-overview {
    max-width: 1200px;

    margin-top: 3.5rem;
    margin-bottom: 3rem;
}


.winners-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 2rem;

    margin-bottom: 1.5rem;
}


.winners-heading h2 {
    margin-bottom: 0.3rem;
}


.winners-heading p {
    margin: 0;

    color: var(--vr-text-light);
}


.winners-count {
    flex-shrink: 0;

    padding: 0.45rem 0.7rem;

    background: var(--vr-gray);

    color: var(--vr-text-light);

    font-size: 0.85rem;
    font-weight: 600;
}


/* --------------------------------------------------
   Noch keine Gewinner
-------------------------------------------------- */

.winners-empty {
    padding: 2rem;

    background: var(--vr-gray);

    border-left: 4px solid var(--vr-blue);
}


.winners-empty strong {
    display: block;

    margin-bottom: 0.25rem;
}


.winners-empty p {
    margin: 0;

    color: var(--vr-text-light);
}


/* --------------------------------------------------
   Tabelle
-------------------------------------------------- */

.winner-table {
    margin-bottom: 0;

    vertical-align: middle;
}


.winner-table thead th {
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;

    background: var(--vr-blue);
    color: #ffffff;

    border: 0;

    font-size: 0.85rem;
    font-weight: 600;

    white-space: nowrap;
}


.winner-table tbody td {
    padding-top: 1rem;
    padding-bottom: 1rem;

    border-bottom: 1px solid #e4e4e4;
}


.winner-table tbody tr:hover td {
    background: #f8fafb;
}


/* --------------------------------------------------
   Platzierung
-------------------------------------------------- */

.place-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 36px;
    height: 36px;

    background: var(--vr-gray);

    color: var(--vr-blue);

    font-weight: 700;
}


/* --------------------------------------------------
   Gewinn
-------------------------------------------------- */

.winner-prize {
    min-width: 230px;
}


.prize-pending {
    color: var(--vr-text-light);

    font-size: 0.875rem;
    font-style: italic;
}


.prize-form {
    margin: 0;
}


.prize-form .input-group {
    min-width: 270px;
}


/* --------------------------------------------------
   Mobile
-------------------------------------------------- */

@media (max-width: 767.98px) {

    .winner-submit {
        display: block;
    }

    .winner-submit .btn {
        width: 100%;

        margin-top: 1.25rem;
    }

    .winners-heading {
        display: block;
    }

    .winners-count {
        display: inline-block;

        margin-top: 1rem;
    }

    .winner-table {
        min-width: 950px;
    }

}
	
/* ==================================================
   Gewinner melden
================================================== */

.winner-page {
    padding-bottom: 3rem;
}


/* --------------------------------------------------
   Meldungen
-------------------------------------------------- */

.winner-message {
    max-width: 1000px;
    border-radius: 0;
}

.alert-success.winner-message {
    border: 0;
    border-left: 5px solid #39813c;
}


/* --------------------------------------------------
   Formular
-------------------------------------------------- */

.winner-form-section {
    max-width: 1000px;
}


.winner-subsection + .winner-subsection {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--vr-gray-dark);
}


.winner-subsection h3 {
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
    font-weight: 600;
}


.winner-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 2rem;

    margin-top: 2.5rem;
    padding-top: 2rem;

    border-top: 1px solid var(--vr-gray-dark);
}


.winner-submit strong {
    display: block;
    margin-bottom: 0.25rem;
}


.winner-submit p {
    max-width: 550px;
    margin: 0;

    color: var(--vr-text-light);
}


/* --------------------------------------------------
   Übersicht
-------------------------------------------------- */

.winners-overview {
    max-width: 1200px;

    margin-top: 3.5rem;
    margin-bottom: 3rem;
}


.winners-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 2rem;

    margin-bottom: 1.5rem;
}


.winners-heading h2 {
    margin-bottom: 0.3rem;
}


.winners-heading p {
    margin: 0;

    color: var(--vr-text-light);
}


.winners-count {
    flex-shrink: 0;

    padding: 0.45rem 0.7rem;

    background: var(--vr-gray);

    color: var(--vr-text-light);

    font-size: 0.85rem;
    font-weight: 600;
}


/* --------------------------------------------------
   Noch keine Gewinner
-------------------------------------------------- */

.winners-empty {
    padding: 2rem;

    background: var(--vr-gray);

    border-left: 4px solid var(--vr-blue);
}


.winners-empty strong {
    display: block;
    margin-bottom: 0.25rem;
}


.winners-empty p {
    margin: 0;

    color: var(--vr-text-light);
}


/* --------------------------------------------------
   Tabelle
-------------------------------------------------- */

.winner-table {
    margin-bottom: 0;
    vertical-align: middle;
}


.winner-table thead th {
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;

    background: var(--vr-blue);
    color: #ffffff;

    border: 0;

    font-size: 0.85rem;
    font-weight: 600;

    white-space: nowrap;
}


.winner-table tbody td {
    padding-top: 1rem;
    padding-bottom: 1rem;

    border-bottom: 1px solid #e4e4e4;
}


.winner-table tbody tr:hover td {
    background: #f8fafb;
}


/* --------------------------------------------------
   Sortierbare Überschriften
-------------------------------------------------- */

.winner-table th.sortable {
    cursor: pointer;

    user-select: none;

    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}


.winner-table th.sortable:hover {
    background: var(--vr-blue-dark);
}


.winner-table th.sortable:focus-visible {
    outline: 3px solid var(--vr-orange);
    outline-offset: -3px;
}


.sort-indicator {
    display: inline-block;

    min-width: 1em;

    margin-left: 0.35rem;

    opacity: 0.7;

    font-size: 0.9em;
}


.winner-table th.sort-asc .sort-indicator,
.winner-table th.sort-desc .sort-indicator {
    opacity: 1;
}


/* --------------------------------------------------
   Platzierung
-------------------------------------------------- */

.place-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 36px;
    height: 36px;

    background: var(--vr-gray);

    color: var(--vr-blue);

    font-weight: 700;
}


/* --------------------------------------------------
   Gewinn
-------------------------------------------------- */

.winner-prize {
    min-width: 230px;
}


.prize-pending {
    color: var(--vr-text-light);

    font-size: 0.875rem;
    font-style: italic;
}


.prize-form {
    margin: 0;
}


.prize-form .input-group {
    min-width: 270px;
}


/* --------------------------------------------------
   Löschen
-------------------------------------------------- */

.winner-action-column {
    width: 1%;
}


.delete-winner-form {
    margin: 0;
}


/*
 * Kann von Unterlagen bestellen gemeinsam
 * verwendet werden.
 */

.btn-delete-order {
    padding: 0.35rem 0.6rem;

    background: transparent;
    color: #a52834;

    border: 1px solid #c9c9c9;

    font-size: 0.85rem;
    font-weight: 600;

    white-space: nowrap;
}


.btn-delete-order:hover {
    background: #a52834;
    color: #ffffff;

    border-color: #a52834;
}


.btn-delete-order:focus-visible {
    outline: 3px solid var(--vr-orange);
    outline-offset: 2px;
}


/* --------------------------------------------------
   Mobile
-------------------------------------------------- */

@media (max-width: 767.98px) {

    .winner-submit {
        display: block;
    }


    .winner-submit .btn {
        width: 100%;

        margin-top: 1.25rem;
    }


    .winners-heading {
        display: block;
    }


    .winners-count {
        display: inline-block;

        margin-top: 1rem;
    }


    .winner-table {
        min-width: 1050px;
    }

}

	/* ==================================================
   Schul-Detailansicht
================================================== */

.school-detail-page {
    padding-top: 2rem;
    padding-bottom: 4rem;
}


/* --------------------------------------------------
   Kopf
-------------------------------------------------- */

.school-detail-intro {
    max-width: 1000px;

    margin-bottom: 3rem;
}


.school-detail-intro h1 {
    margin-top: 0.8rem;
    margin-bottom: 1.5rem;

    color: var(--vr-blue);

    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
}


/* --------------------------------------------------
   Schuldaten
-------------------------------------------------- */

.school-meta {
    display: grid;
    grid-template-columns:
        minmax(0, 2fr)
        minmax(220px, 1fr);

    gap: 1.5rem;

    max-width: 1000px;
}


.school-meta > div {
    padding: 1.25rem 1.5rem;

    background: var(--vr-gray);

    border-left: 4px solid var(--vr-blue);
}


.school-meta strong {
    display: block;

    margin-bottom: 0.45rem;

    color: var(--vr-blue);

    font-size: 0.82rem;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.035em;
}


.school-meta span {
    color: var(--vr-text);

    line-height: 1.55;
}


/* --------------------------------------------------
   Bankverbindung
-------------------------------------------------- */

.school-meta-bank {
    min-width: 0;
}


.school-bank-value {
    display: block;

    white-space: normal;

    overflow-wrap: anywhere;

    font-size: 0.95rem;
    line-height: 1.6;
}


/* ==================================================
   Bereiche
================================================== */

.school-detail-section {
    max-width: 1100px;

    margin-top: 3rem;
}


.school-section-heading {
    margin-bottom: 1.25rem;
}


.school-section-heading-action {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 2rem;
}


.school-section-heading h2 {
    margin-bottom: 0.3rem;

    color: var(--vr-blue);

    font-size: 1.55rem;
    font-weight: 700;
}


.school-section-heading p {
    margin: 0;

    color: var(--vr-text-light);

    line-height: 1.5;
}


.school-section-heading .btn {
    flex-shrink: 0;

    padding: 0.6rem 0.9rem;

    border-radius: 0;

    font-size: 0.875rem;
    font-weight: 600;
}


/* ==================================================
   Tabellen
================================================== */

.school-table-wrapper {
    border: 1px solid #dfe2e4;

    background: #ffffff;
}


.school-detail-table {
    margin-bottom: 0;

    vertical-align: middle;
}


/* --------------------------------------------------
   Tabellenkopf
-------------------------------------------------- */

.school-detail-table thead th {
    padding: 0;

    background: var(--vr-blue);
    color: #ffffff;

    border: 0;

    font-size: 0.82rem;
    font-weight: 600;

    vertical-align: middle;
    white-space: nowrap;
}


/*
 * Normale, nicht sortierbare Tabellenköpfe
 */

.school-detail-table thead th:not(:has(.table-sort-button)) {
    padding: 0.85rem 0.9rem;
}


/* --------------------------------------------------
   Sortierbutton
-------------------------------------------------- */

.table-sort-button {
    display: flex;
    align-items: center;

    width: 100%;

    padding: 0.85rem 0.9rem;

    background: transparent;

    color: inherit;

    border: 0;

    font: inherit;
    font-weight: 600;

    text-align: left;

    cursor: pointer;

    white-space: nowrap;
}


.table-sort-button:hover {
    background: var(--vr-blue-dark);
}


.table-sort-button:focus-visible {
    outline: 3px solid var(--vr-orange);
    outline-offset: -3px;
}


.school-detail-table th.sort-asc,
.school-detail-table th.sort-desc {
    background: var(--vr-blue-dark);
}


.sort-indicator {
    display: inline-block;

    min-width: 1em;

    margin-left: 0.4rem;

    opacity: 0.65;

    font-size: 0.9em;
}


.school-detail-table th.sort-asc .sort-indicator,
.school-detail-table th.sort-desc .sort-indicator {
    opacity: 1;
}


/* --------------------------------------------------
   Tabellenkörper
-------------------------------------------------- */

.school-detail-table tbody td {
    padding: 0.9rem;

    background: #ffffff;

    border-bottom: 1px solid #e5e7e8;

    vertical-align: middle;
}


.school-detail-table tbody tr:nth-child(even) td {
    background: #fafafa;
}


.school-detail-table tbody tr:hover td {
    background: #f2f6f9;
}


.school-detail-table tbody tr:last-child td {
    border-bottom: 0;
}


/* --------------------------------------------------
   Summenzeile
-------------------------------------------------- */

.school-detail-table tfoot th {
    padding: 0.9rem;

    background: var(--vr-gray);

    border-top: 2px solid var(--vr-blue);

    font-size: 0.9rem;
    font-weight: 700;
}


/*
 * Die Summenzeile bleibt beim Sortieren unverändert,
 * da ausschließlich tbody-Zeilen sortiert werden.
 */


/* --------------------------------------------------
   Links
-------------------------------------------------- */

.school-detail-table a {
    color: var(--vr-blue);
}


.school-detail-table a:hover {
    color: var(--vr-blue-dark);
}


/* --------------------------------------------------
   Zusatzzeile
-------------------------------------------------- */

.school-table-subline {
    margin-top: 0.15rem;

    color: var(--vr-text-light);

    font-size: 0.82rem;
}


/* --------------------------------------------------
   Leere Werte / Bereiche
-------------------------------------------------- */

.school-empty-value {
    color: #999999;
}


.school-empty-box {
    padding: 1.5rem;

    background: var(--vr-gray);

    border-left: 4px solid var(--vr-blue);

    color: var(--vr-text-light);
}


/* --------------------------------------------------
   Platz
-------------------------------------------------- */

.place-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 38px;
    height: 38px;

    padding: 0 0.5rem;

    background: #eef5fa;

    color: var(--vr-blue);

    border: 1px solid #d3e2ec;

    font-weight: 700;
}


/* ==================================================
   Mobile
================================================== */

@media (max-width: 767.98px) {

    .school-detail-page {
        padding-top: 1.25rem;
        padding-bottom: 3rem;
    }


    .school-detail-intro {
        margin-bottom: 2.5rem;
    }


    .school-meta {
        grid-template-columns: 1fr;
    }


    .school-section-heading-action {
        display: block;
    }


    .school-section-heading-action .btn {
        width: 100%;

        margin-top: 1rem;
    }


    .school-table-wrapper {
        margin-left: -0.75rem;
        margin-right: -0.75rem;

        border-left: 0;
        border-right: 0;
    }


    #ordersTable {
        min-width: 760px;
    }


    #winnersTable {
        min-width: 950px;
    }

}