/* =====================================================
   SCHLARAFFIA BUDISSA
   Cassiopeia – Blau / Gelb
   ===================================================== */


/* =====================================================
   1. FARBEN & GRUNDEINSTELLUNGEN
   ===================================================== */

:root {
    --budissa-blau: #174b86;
    --budissa-dunkelblau: #10345f;
    --budissa-gelb: #f2c230;
    --budissa-gelb-hell: #ffe58a;
    --budissa-creme: #fbfaf5;
    --budissa-grau: #5a6168;
    --budissa-text: #262b30;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    background: var(--budissa-creme);
    color: var(--budissa-text);
    line-height: 1.65;
}

.site-grid {
    width: 100%;
    max-width: 1220px;
    margin-left: auto;
    margin-right: auto;
}


/* =====================================================
   2. HAUPTINHALT
   ===================================================== */

main {
    width: 100%;
    max-width: 1220px;

    margin: 1.5rem auto 3rem;

    padding: 2.25rem 2.75rem;

    background: #ffffff;
    border-radius: 8px;

    box-shadow: 0 3px 18px rgba(0, 0, 0, .06);
}

.com-content-article {
    font-size: 1.05rem;
}

.com-content-article img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}


/* Großes Bild am Anfang eines Beitrags */

.com-content-article .item-image img,
.com-content-article > img:first-child,
.com-content-article p:first-child img {
    display: block;

    width: 100%;
    height: 360px;
    max-height: none;

    object-fit: cover;
    object-position: center;

    margin-bottom: 2rem;

    border-radius: 10px;

    box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
}


/* =====================================================
   3. HEADER
   ===================================================== */

.container-header {
    background:
        linear-gradient(
            135deg,
            var(--budissa-dunkelblau),
            var(--budissa-blau)
        );

    border-bottom: 5px solid var(--budissa-gelb);

    box-shadow: 0 4px 15px rgba(0, 0, 0, .18);
}

.container-header .grid-child,
.container-header .container-nav {
    width: 100%;
    max-width: 1120px;

    margin-left: auto;
    margin-right: auto;
}

.container-header .grid-child {
    padding-top: .75rem;
}


/* Markenbereich */

.container-header .navbar-brand {
    display: flex;
    align-items: center;

    position: relative;

    gap: 1rem;

    padding-top: .4rem;
    padding-bottom: .4rem;
}


/* Wappen */

.container-header .navbar-brand::before {
    content: "";

    display: block;
    flex: 0 0 68px;

    width: 68px;
    height: 76px;

    background-image:
        url("/images/Wappen_Budissa_ohne_Hintergrund.png");

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


/* Falls Cassiopeia tatsächlich ein Logo-Bild ausgibt */

.container-header .navbar-brand img,
.container-header .brand-logo img {
    display: block;

    width: auto;
    height: 82px;
    max-height: 82px;

    object-fit: contain;
}


/* Titel */

.container-header .navbar-brand > a {
    color: #ffffff;

    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1.15;

    text-decoration: none;
}


/* Unterzeile */

.container-header .site-description {
    margin: .2rem 0 0;

    color: rgba(255, 255, 255, .92);

    font-size: .9rem;
    font-weight: 400;

    letter-spacing: .02em;
}


/* =====================================================
   4. NAVIGATION
   ===================================================== */

.container-header .container-nav {
    padding-top: .3rem;
    padding-bottom: .65rem;
}

.container-header .mod-menu {
    display: flex;
    gap: .25rem;

    font-weight: 500;
}

.container-header .mod-menu > li > a {
    display: block;

    padding: .7rem 1.1rem;

    color: #ffffff;

    border-radius: 5px;

    text-decoration: none;

    transition:
        background-color .2s ease,
        color .2s ease,
        transform .2s ease;
}

.container-header .mod-menu > li > a:hover {
    background: rgba(255, 255, 255, .12);
    color: var(--budissa-gelb);
}

.container-header .mod-menu > li.active > a {
    background: var(--budissa-gelb);
    color: var(--budissa-dunkelblau);

    font-weight: 700;

    box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
}


/* =====================================================
   5. ÜBERSCHRIFTEN
   ===================================================== */

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

h1 {
    margin-bottom: 1.5rem;
    padding-bottom: .5rem;

    border-bottom: 3px solid var(--budissa-gelb);

    font-size: 2rem;
    line-height: 1.2;
}

h2 {
    margin-top: 2rem;
    font-size: 1.55rem;
}

h3 {
    font-size: 1.25rem;
}


/* =====================================================
   6. TEXT & LINKS
   ===================================================== */

p {
    margin-bottom: 1rem;
}

a {
    color: var(--budissa-blau);

    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--budissa-dunkelblau);
}


/* =====================================================
   7. BUTTONS
   ===================================================== */

.btn-primary {
    background: var(--budissa-blau);
    border-color: var(--budissa-blau);

    border-radius: 5px;

    font-weight: 500;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--budissa-dunkelblau);
    border-color: var(--budissa-dunkelblau);
}


/* Eigene Budissa-Buttons */

.budissa-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: fit-content;
    min-height: 44px;

    padding: .75rem 1.15rem;

    background: var(--budissa-gelb);
    color: var(--budissa-dunkelblau) !important;

    border: 2px solid var(--budissa-gelb);
    border-radius: 6px;

    font-weight: 700;
    text-decoration: none !important;

    box-shadow: 0 2px 7px rgba(0, 0, 0, .12);

    transition:
        background-color .2s ease,
        color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.budissa-button:hover {
    background: var(--budissa-dunkelblau);
    color: var(--budissa-gelb) !important;

    transform: translateY(-2px);

    box-shadow: 0 5px 12px rgba(0, 0, 0, .18);
}


/* =====================================================
   8. MODULE
   ===================================================== */

.card,
.sidebar-right .moduletable,
.sidebar-left .moduletable {
    background: #ffffff;

    border: 0;
    border-top: 4px solid var(--budissa-gelb);
    border-radius: 6px;

    box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}


/* =====================================================
   9. FOOTER
   ===================================================== */

.container-footer {
    background: var(--budissa-dunkelblau);
    color: #ffffff;

    border-top: 4px solid var(--budissa-gelb);
}

.container-footer .grid-child {
    width: 100%;
    max-width: 1120px;

    margin-left: auto;
    margin-right: auto;
}

.container-footer a {
    color: var(--budissa-gelb-hell);
}


/* =====================================================
   10. ZURÜCK-NACH-OBEN
   ===================================================== */

.back-to-top-link {
    background: var(--budissa-blau);
    color: #ffffff;

    border: 2px solid var(--budissa-gelb);
    border-radius: 50%;
}

.back-to-top-link:hover {
    background: var(--budissa-dunkelblau);
}


/* =====================================================
   11. STARTSEITE
   ===================================================== */

.budissa-start {
    width: 100%;
    max-width: 1180px;

    margin: 1.5rem auto 0;
}


/* Begrüßung */

.budissa-intro {
    margin-top: 1.75rem;
    margin-bottom: 2.75rem;
}

.budissa-lead {
    color: var(--budissa-dunkelblau);

    font-size: 1.15rem;
    line-height: 1.7;
}


/* Karten */

.budissa-karten {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    align-items: stretch;

    gap: 1.75rem;

    margin: 2.5rem 0 3rem;
}

.budissa-karte {
    display: flex;
    flex-direction: column;

    height: 100%;

    padding: 1.8rem;

    background: #ffffff;

    border: 1px solid rgba(16, 52, 95, .08);
    border-top: 5px solid var(--budissa-gelb);
    border-radius: 8px;

    font-size: 1rem;
    line-height: 1.6;

    box-shadow: 0 4px 18px rgba(0, 0, 0, .08);
}

.budissa-karte h2 {
    margin-top: .5rem;
    margin-bottom: 1rem;

    font-size: 1.5rem;
    line-height: 1.25;
}

.budissa-karten-kicker {
    margin-bottom: .25rem;

    color: var(--budissa-blau);

    font-size: .85rem;
}

.budissa-highlight {
    color: var(--budissa-dunkelblau);
    font-weight: 700;
}


/* Links in den drei Karten als Buttons */

.budissa-karte a,
.budissa-karte a.budissa-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: fit-content;
    min-width: 150px;
    min-height: 44px;

    margin-top: auto;

    padding: .7rem 1.1rem;

    background: var(--budissa-gelb);
    color: var(--budissa-dunkelblau) !important;

    border: 2px solid var(--budissa-gelb);
    border-radius: 6px;

    font-weight: 700;

    text-align: center;
    text-decoration: none !important;

    box-shadow: 0 2px 7px rgba(0, 0, 0, .12);
}

.budissa-karte a:hover {
    background: var(--budissa-dunkelblau);
    color: var(--budissa-gelb) !important;
}


/* Falls JCE den Button in einen Absatz steckt */

.budissa-karte p:has(> a:last-child) {
    margin-top: auto;
    margin-bottom: 0;
}


/* Lulu */

.budissa-lulu {
    margin-top: 2.5rem;

    padding: 1.5rem 1.75rem;

    background:
        linear-gradient(
            135deg,
            var(--budissa-dunkelblau),
            var(--budissa-blau)
        );

    color: #ffffff;

    border-left: 6px solid var(--budissa-gelb);
    border-radius: 8px;
}

.budissa-lulu strong {
    display: block;

    margin-bottom: .25rem;

    color: var(--budissa-gelb);

    font-size: 1.5rem;
}

.budissa-lulu p {
    margin: 0;
}


/* =====================================================
   12. SASSENLISTE
   ===================================================== */

.sassenliste {
    width: 100% !important;
    max-width: 100% !important;

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

    table-layout: auto !important;
}

.sassenliste td {
    padding: .22rem .4rem;

    vertical-align: top;

    line-height: 1.45;
}

.sassenliste td:first-child {
    width: 55px !important;
    min-width: 55px;

    padding-right: 1rem;

    color: var(--budissa-blau);

    font-weight: 600;

    white-space: nowrap;
}

.sassenliste td:nth-child(2) {
    width: auto !important;
}

.sassenliste tr:hover td {
    background: rgba(242, 194, 48, .08);
}


/* =====================================================
   13. SCHLARAFFIA & BUDISSA
   ===================================================== */

.budissa-info {
    max-width: 1050px;
    margin: 0 auto;
}


/* kleine Abschnittsüberschrift */

.budissa-eyebrow {
    margin-bottom: .35rem;

    color: var(--budissa-blau);

    font-size: .82rem;
    font-weight: 700;

    letter-spacing: .08em;
    text-transform: uppercase;
}


/* Einleitung */

.budissa-info-intro {
    max-width: 900px;
    margin-bottom: 2.5rem;
}

.budissa-info-lead {
    color: var(--budissa-dunkelblau);

    font-size: 1.2rem;
    line-height: 1.65;
}


/* Freundschaft / Kunst / Humor */

.budissa-werte {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 1.25rem;

    margin: 2.5rem 0 3.5rem;
}

.budissa-wert {
    padding: 1.5rem;

    background: #ffffff;

    border-top: 4px solid var(--budissa-gelb);
    border-radius: 8px;

    box-shadow: 0 4px 17px rgba(0, 0, 0, .07);
}

.budissa-wert-buchstabe {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    margin-bottom: .8rem;

    background: var(--budissa-blau);
    color: var(--budissa-gelb);

    border-radius: 50%;

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

.budissa-wert h2 {
    margin: 0 0 .6rem;

    font-size: 1.3rem;
}


/* Sippung */

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

    gap: 2rem;

    align-items: center;

    margin: 3rem 0 4rem;

    padding: 2rem;

    background: #f7f9fc;

    border-left: 5px solid var(--budissa-gelb);
    border-radius: 8px;
}

.budissa-sippung h2 {
    margin-top: 0;
}

.budissa-sippung-zitat {
    padding: 1.5rem;

    background: var(--budissa-dunkelblau);
    color: #ffffff;

    border-radius: 8px;

    font-size: 1.15rem;
    line-height: 1.55;
}


/* Geschichte */

.budissa-geschichte {
    margin-top: 4rem;
}

.budissa-geschichte-intro {
    max-width: 850px;

    margin-bottom: 3rem;

    font-size: 1.05rem;
}


/* Timeline */

.budissa-timeline {
    position: relative;

    margin: 2rem 0 4rem;
}

.budissa-timeline::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 77px;

    width: 3px;

    background: rgba(23, 75, 134, .16);
}

.budissa-timeline-item {
    position: relative;

    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);

    gap: 1.5rem;

    margin-bottom: 1.7rem;
}

.budissa-jahr {
    position: relative;
    z-index: 2;

    align-self: start;

    padding: .45rem .5rem;

    background: var(--budissa-blau);
    color: #ffffff;

    border: 3px solid #ffffff;
    border-radius: 6px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);

    font-size: .9rem;
    font-weight: 700;

    text-align: center;
}

.budissa-timeline-inhalt {
    padding: 1.25rem 1.5rem;

    background: #ffffff;

    border-radius: 8px;

    box-shadow: 0 3px 15px rgba(0, 0, 0, .06);
}

.budissa-timeline-inhalt h3 {
    margin-top: 0;
    margin-bottom: .6rem;
}

.budissa-timeline-inhalt p:last-child {
    margin-bottom: 0;
}


/* dunkle Epoche */

.budissa-timeline-dunkel .budissa-jahr {
    background: #4e5965;
}


/* 2003 hervorheben */

.budissa-timeline-highlight .budissa-jahr {
    background: var(--budissa-gelb);
    color: var(--budissa-dunkelblau);
}

.budissa-timeline-highlight .budissa-timeline-inhalt {
    border: 2px solid var(--budissa-gelb);
}


/* Heute */

.budissa-heute {
    margin: 4rem 0 3rem;

    padding: 2rem 2.25rem;

    background: #f7f9fc;

    border-top: 5px solid var(--budissa-gelb);
    border-radius: 8px;
}

.budissa-heute h2 {
    margin-top: 0;
}

.budissa-heute-motto {
    margin: 1.5rem 0;

    color: var(--budissa-dunkelblau);

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

    letter-spacing: .025em;
}


/* Abschluss */

.budissa-info-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 2rem;

    margin-top: 3rem;

    padding: 2rem;

    background:
        linear-gradient(
            135deg,
            var(--budissa-dunkelblau),
            var(--budissa-blau)
        );

    color: #ffffff;

    border-left: 6px solid var(--budissa-gelb);
    border-radius: 8px;
}

.budissa-info-cta h2 {
    margin: .2rem 0 .5rem;
    color: #ffffff;
}

.budissa-info-cta p {
    margin: 0;
}

.budissa-cta-lulu {
    color: var(--budissa-gelb);

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

.budissa-info-cta .budissa-button {
    flex: 0 0 auto;
}


/* =====================================================
   14. TERMINE
   ===================================================== */

.budissa-termine {
    max-width: 1050px;
    margin: 0 auto;
}

.termine-intro {
    max-width: 850px;
    margin-bottom: 2.5rem;
}

.termine-kalender {
    margin: 2rem 0 4rem;
}


/* =====================================================
   15. TERMIN-TABELLE
   ===================================================== */

.termintabelle-wrap {
    width: 100%;

    margin: 2rem 0 3rem;
}

.termintabelle {
    width: 100%;

    border-collapse: collapse;

    background: #ffffff;

    box-shadow: 0 4px 18px rgba(0, 0, 0, .07);
}

.termintabelle th {
    padding: .7rem .6rem;

    background: var(--budissa-dunkelblau);
    color: #ffffff;

    border-bottom: 3px solid var(--budissa-gelb);

    text-align: left;
}

.termintabelle td {
    padding: .65rem .6rem;

    border-bottom: 1px solid #d8dee7;

    vertical-align: top;

    line-height: 1.35;
}

.termintabelle tbody tr:nth-child(even) {
    background: #f7f9fc;
}

.termintabelle tbody tr:hover {
    background: rgba(242, 194, 48, .08);
}


/* Datum */

.termintabelle td:first-child {
    color: var(--budissa-dunkelblau);
    font-weight: 700;
}


/* Spaltenbreiten */

.termintabelle th:nth-child(1),
.termintabelle td:nth-child(1) {
    width: 115px;
    white-space: nowrap;
}

.termintabelle th:nth-child(2),
.termintabelle td:nth-child(2) {
    width: 75px;
    white-space: nowrap;
}

.termintabelle th:nth-child(3),
.termintabelle td:nth-child(3) {
    width: 80px;
}

.termintabelle th:nth-child(5),
.termintabelle td:nth-child(5) {
    width: 180px;
}


/* Orte */

.termintabelle .ort-vorburg {
    color: var(--budissa-blau);
    font-weight: 700;
}

.termintabelle .ort-turm {
    color: #b42318;
    font-weight: 700;
}


/* besondere Termine */

.termintabelle tr.termin-highlight td {
    background: rgba(242, 194, 48, .12);
}

.termintabelle tr.termin-highlight td:first-child {
    border-left: 4px solid var(--budissa-gelb);
}


/* =====================================================
   16. SPIELSTÄTTEN
   ===================================================== */

.termine-spielstaetten {
    margin: 4rem 0;
}

.spielstaetten-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 1.5rem;

    margin-top: 1.5rem;
}

.spielstaette {
    padding: 1.6rem;

    background: #ffffff;

    border-radius: 8px;

    box-shadow: 0 4px 18px rgba(0, 0, 0, .07);
}

.spielstaette h3 {
    margin: .65rem 0 .6rem;
}

.spielstaette-label {
    display: inline-block;

    padding: .35rem .65rem;

    border-radius: 5px;

    font-size: .85rem;
    font-weight: 700;
}


/* Ortenvorburg */

.spielstaette-ortenburg {
    border-top: 5px solid var(--budissa-blau);
}

.spielstaette-ortenburg .spielstaette-label {
    background: var(--budissa-blau);
    color: #ffffff;
}


/* Schlaraffenturm */

.spielstaette-turm {
    border-top: 5px solid var(--budissa-gelb);
}

.spielstaette-turm .spielstaette-label {
    background: var(--budissa-gelb);
    color: var(--budissa-dunkelblau);
}

.spielstaette-hinweis {
    margin-top: 1rem;

    color: #b42318;

    font-weight: 700;
}


/* =====================================================
   17. KONTAKT AUF DER TERMINSEITE
   ===================================================== */

.termine-kontakt {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;

    gap: 2rem;
    align-items: center;

    margin-top: 3rem;

    padding: 2rem;

    background:
        linear-gradient(
            135deg,
            var(--budissa-dunkelblau),
            var(--budissa-blau)
        );

    color: #ffffff;

    border-left: 6px solid var(--budissa-gelb);
    border-radius: 8px;
}

.termine-kontakt h2 {
    margin-top: .2rem;
    color: #ffffff;
}

.termine-kontakt .budissa-eyebrow {
    color: var(--budissa-gelb);
}

.termine-kontaktdaten {
    display: flex;
    flex-direction: column;

    gap: .65rem;

    margin-top: 1.25rem;
}

.termine-kontaktdaten a {
    width: fit-content;

    color: #ffffff;

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

    text-decoration-color: var(--budissa-gelb);
}

.termine-kontaktdaten a:hover {
    color: var(--budissa-gelb);
}


/* Uhu */

.termine-uhu {
    text-align: center;
}

.termine-uhu img {
    display: block;

    width: 140px;
    max-width: 100%;
    height: auto;

    margin: 0 auto .5rem;
}

.termine-uhu strong {
    color: #ffffff;
}

.termine-uhu strong span {
    color: var(--budissa-gelb);
}


/* =====================================================
   18. TABLET
   ===================================================== */

@media (max-width: 850px) {

    .budissa-karten,
    .budissa-werte {
        grid-template-columns: 1fr;
    }

    .budissa-sippung {
        grid-template-columns: 1fr;
    }

    .budissa-info-cta {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* =====================================================
   19. MOBILE – ALLGEMEIN & HEADER
   ===================================================== */

@media (max-width: 768px) {

    main {
        width: 100%;
        max-width: 100%;

        margin-top: 1rem;

        padding: 1.25rem 1rem;

        border-radius: 0;

        overflow-x: hidden;
    }

    .com-content-article {
        font-size: 1rem;
    }

    h1 {
        font-size: 1.65rem;
    }


    /* Hero-Bild */

    .com-content-article .item-image img,
    .com-content-article > img:first-child,
    .com-content-article p:first-child img {
        height: 230px;
    }


    /* -------------------------
       Mobiler Header
       ------------------------- */

    .container-header .navbar-brand {
        display: grid !important;

        grid-template-columns: 92px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;

        column-gap: 1rem !important;
        row-gap: .3rem !important;

        align-items: center !important;

        width: 100% !important;

        padding: 1.1rem 1rem !important;
    }


    /* großes Wappen */

    .container-header .navbar-brand::before {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;

        width: 86px !important;
        height: 100px !important;

        flex: none !important;

        background-size: contain !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }


    /* Titel */

    .container-header .navbar-brand > a {
        grid-column: 2 !important;
        grid-row: 1 !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 1.55rem !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
    }


    /* Motto */

    .container-header .site-description {
        grid-column: 2 !important;
        grid-row: 2 !important;

        max-width: 260px !important;

        margin: 0 !important;
        padding: 0 !important;

        color: rgba(255, 255, 255, .92) !important;

        font-size: .9rem !important;
        line-height: 1.35 !important;

        text-align: left !important;
    }


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

    .container-header .container-nav {
        width: 100% !important;

        padding: .5rem 1rem 1rem !important;
    }

    .container-header .mod-menu {
        display: grid !important;
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: .4rem .75rem !important;

        width: 100% !important;
    }

    .container-header .mod-menu > li {
        margin: 0 !important;
    }

    .container-header .mod-menu > li > a {
        display: block !important;

        padding: .65rem .75rem !important;

        border-radius: 5px;

        font-size: 1rem !important;

        text-align: center !important;
    }


    /* Startseitenkarten */

    .budissa-karte {
        padding: 1.25rem;
    }

    .budissa-karte a,
    .budissa-karte a.budissa-button {
        width: 100%;

        margin-top: .75rem;
    }


    /* Spielstätten */

    .spielstaetten-grid {
        grid-template-columns: 1fr;
    }


    /* Kontakt */

    .termine-kontakt {
        grid-template-columns: 1fr;

        padding: 1.4rem;
    }

    .termine-uhu {
        margin-top: 1rem;
    }

    .termine-uhu img {
        width: 110px;
    }
}


/* =====================================================
   20. TERMIN-TABELLE MOBILE
   ===================================================== */

@media (max-width: 700px) {

    .termintabelle,
    .termintabelle tbody,
    .termintabelle tr,
    .termintabelle td {
        display: block;

        width: 100%;
    }

    .termintabelle thead {
        display: none;
    }

    .termintabelle tr {
        margin-bottom: 1rem;

        padding: .75rem 1rem;

        background: #ffffff !important;

        border-top: 4px solid var(--budissa-gelb);
        border-radius: 7px;

        box-shadow: 0 3px 12px rgba(0, 0, 0, .08);
    }

    .termintabelle td {
        position: relative;

        width: 100% !important;
        min-height: 2rem;

        padding: .35rem 0 .35rem 7rem;

        border: 0;

        white-space: normal !important;
    }

    .termintabelle td::before {
        content: attr(data-label);

        position: absolute;

        top: .35rem;
        left: 0;

        width: 6.4rem;

        color: var(--budissa-dunkelblau);

        font-weight: 700;
    }

    .termintabelle td[data-label="Thema"] {
        padding-top: .65rem;
        padding-bottom: .65rem;
    }
}


/* =====================================================
   21. KLEINE MOBILGERÄTE
   ===================================================== */

@media (max-width: 600px) {

    /* Sassenliste */

    .sassenliste {
        width: 100% !important;

        table-layout: fixed !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .sassenliste td:first-child {
        width: 38px !important;
        min-width: 0 !important;

        padding-left: 0 !important;
        padding-right: .5rem !important;

        white-space: nowrap;
    }

    .sassenliste td:nth-child(2) {
        width: auto !important;
        min-width: 0 !important;

        white-space: normal !important;

        overflow-wrap: break-word;
    }


    /* Timeline */

    .budissa-timeline::before {
        left: 18px;
    }

    .budissa-timeline-item {
        grid-template-columns: 1fr;

        gap: .6rem;

        padding-left: 38px;
        margin-bottom: 1.5rem;
    }

    .budissa-jahr {
        width: fit-content;
        min-width: 80px;

        margin-left: -38px;
    }

    .budissa-timeline-inhalt {
        padding: 1.1rem;
    }


    /* Infobereiche */

    .budissa-sippung,
    .budissa-heute,
    .budissa-info-cta {
        padding: 1.25rem;
    }

    .budissa-info-cta .budissa-button {
        width: 100%;
        text-align: center;
    }
}

/* =====================================================
   MOBILE – KOMPAKTERER HEADER & STARTSEITE
   ===================================================== */

@media (max-width: 768px) {

    /* Navigation kompakter */
    .container-header .container-nav {
        padding-top: .25rem !important;
        padding-bottom: .65rem !important;
    }

    .container-header .mod-menu {
        gap: .25rem .45rem !important;
    }

    .container-header .mod-menu > li > a {
        padding: .5rem .4rem !important;
        font-size: .95rem !important;
        line-height: 1.2 !important;
    }

    /* Letzten Menüpunkt mittig und nicht unnötig breit */
    .container-header .mod-menu > li:last-child {
        grid-column: 1 / -1;
        justify-self: center;
        width: 55%;
    }

    /* Startseitenüberschrift kleiner */
    .budissa-start h1,
    .com-content-article h1 {
        font-size: 1.8rem !important;
        line-height: 1.15 !important;
    }

    /* etwas weniger Abstand unter dem Bild */
    .com-content-article .item-image img,
    .com-content-article > img:first-child,
    .com-content-article p:first-child img {
        margin-bottom: 1.4rem !important;
    }
}

/* =====================================================
   NÄCHSTER TERMIN
   ===================================================== */

.naechster-termin {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 2rem;

    margin: 2rem 0 3.5rem;

    background: #ffffff;

    border: 1px solid rgba(16, 52, 95, .10);
    border-top: 5px solid var(--budissa-gelb);
    border-radius: 10px;

    box-shadow: 0 5px 22px rgba(0, 0, 0, .08);

    overflow: hidden;
}


/* Datum links */

.naechster-termin-datum {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 230px;

    padding: 1.5rem;

    background:
        linear-gradient(
            145deg,
            var(--budissa-dunkelblau),
            var(--budissa-blau)
        );

    color: #ffffff;

    text-align: center;
}

.naechster-tag {
    color: var(--budissa-gelb);

    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
}

.naechster-monat {
    margin-top: .5rem;

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

.naechster-jahr {
    margin-top: .1rem;

    color: rgba(255,255,255,.8);

    font-size: .9rem;
}


/* Inhalt rechts */

.naechster-termin-inhalt {
    padding: 1.6rem 2rem 1.6rem 0;
}

.naechster-termin-inhalt h2 {
    margin: .2rem 0 .5rem;

    font-size: 1.65rem;
}

.naechster-termin-thema {
    margin-bottom: 1.3rem;

    font-size: 1.05rem;
}


/* Uhrzeit / Nummer / Ort */

.naechster-termin-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 1rem;

    margin: 1.25rem 0;
}

.naechster-termin-details span {
    padding: .8rem 1rem;

    background: #f5f7fa;

    border-radius: 6px;
}

.naechster-termin-details strong {
    color: var(--budissa-dunkelblau);
}


/* Anmeldung */

.naechster-termin-hinweis {
    width: fit-content;

    margin: 1.25rem 0;

    padding: .55rem .8rem;

    background: #fff4f2;
    color: #b42318;

    border-left: 4px solid #b42318;
    border-radius: 4px;

    font-weight: 600;
}


/* Buttons */

.naechster-termin-buttons {
    display: flex;
    align-items: center;

    gap: 1rem;

    margin-top: 1.4rem;
}

.naechster-kontakt {
    font-weight: 700;
}


/* =====================================================
   NÄCHSTER TERMIN – MOBIL
   ===================================================== */

@media (max-width: 700px) {

    .naechster-termin {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .naechster-termin-datum {
        min-height: auto;

        padding: 1.2rem;

        flex-direction: row;

        gap: .6rem;
    }

    .naechster-tag {
        font-size: 2.3rem;
    }

    .naechster-monat,
    .naechster-jahr {
        margin: 0;
    }

    .naechster-termin-inhalt {
        padding: 1.3rem;
    }

    .naechster-termin-details {
        grid-template-columns: 1fr;
        gap: .5rem;
    }

    .naechster-termin-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .naechster-termin-buttons .budissa-button {
        width: 100%;
        text-align: center;
    }

    .naechster-kontakt {
        text-align: center;
    }
}

/* =====================================================
   NÄCHSTER TERMIN
   ===================================================== */

.naechster-termin {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 0;

    margin: 2rem 0 3rem;

    background: #ffffff;

    border: 1px solid rgba(16, 52, 95, .10);
    border-top: 5px solid var(--budissa-gelb);
    border-radius: 10px;

    box-shadow: 0 5px 22px rgba(0, 0, 0, .08);

    overflow: hidden;
}


/* DATUM LINKS */

.naechster-termin-datum {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 1.5rem;

    background: linear-gradient(
        145deg,
        var(--budissa-dunkelblau),
        var(--budissa-blau)
    );

    color: #ffffff;

    text-align: center;
}

.naechster-tag {
    color: var(--budissa-gelb);

    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
}

.naechster-monat {
    margin-top: .55rem;

    color: #ffffff;

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

.naechster-jahr {
    margin-top: .1rem;

    color: rgba(255,255,255,.8);

    font-size: .9rem;
}


/* INHALT RECHTS */

.naechster-termin-inhalt {
    padding: 1.6rem 2rem;
}

.naechster-termin-inhalt .budissa-eyebrow {
    margin-top: 0;
}

.naechster-termin-inhalt h2 {
    margin: .2rem 0 .4rem;

    font-size: 1.65rem;
}

.naechster-termin-thema {
    margin-bottom: 1.25rem;

    font-size: 1.05rem;
}


/* DETAILS */

.naechster-termin-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: .8rem;

    margin: 1.25rem 0;
}

.naechster-termin-details span {
    padding: .8rem 1rem;

    background: #f5f7fa;

    border-radius: 6px;
}

.naechster-termin-details strong {
    color: var(--budissa-dunkelblau);
}


/* HINWEIS */

.naechster-termin-hinweis {
    width: fit-content;

    margin: 1.25rem 0;

    padding: .55rem .8rem;

    background: #fff4f2;
    color: #b42318;

    border-left: 4px solid #b42318;
    border-radius: 4px;

    font-weight: 600;
}


/* BUTTONS */

.naechster-termin-buttons {
    display: flex;
    align-items: center;

    gap: 1rem;

    margin-top: 1.4rem;
}

.naechster-kontakt {
    font-weight: 700;
}


/* =====================================================
   NÄCHSTER TERMIN – MOBIL
   ===================================================== */

@media (max-width: 700px) {

    .naechster-termin {
        grid-template-columns: 1fr;
    }

    .naechster-termin-datum {
        flex-direction: row;

        justify-content: flex-start;

        gap: .5rem;

        padding: 1rem 1.25rem;

        text-align: left;
    }

    .naechster-tag {
        font-size: 2.4rem;
    }

    .naechster-monat {
        margin: 0;

        font-size: 1.05rem;
    }

    .naechster-jahr {
        margin: 0;
    }

    .naechster-termin-inhalt {
        padding: 1.25rem;
    }

    .naechster-termin-details {
        grid-template-columns: 1fr;

        gap: .5rem;
    }

    .naechster-termin-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .naechster-termin-buttons .budissa-button {
        width: 100%;
    }

    .naechster-kontakt {
        padding: .5rem;
        text-align: center;
    }
}

.naechster-kontakt {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;
    padding: .7rem 1rem;

    color: var(--budissa-blau);
    background: #fff;

    border: 2px solid var(--budissa-blau);
    border-radius: 6px;

    font-weight: 700;
    text-decoration: none;
}

.naechster-kontakt:hover {
    background: var(--budissa-blau);
    color: #fff;
}

.termintabelle-wrap {
    margin-top: 2.5rem;
}

/* =====================================================
   FOOTER – BUDISSA
   ===================================================== */

.container-footer {
    padding: 1.5rem 1rem;
}

.container-footer .grid-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

/* Footer-Menü */
.container-footer .mod-menu {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;

    margin: 0;
    padding: 0;

    list-style: none;
}

.container-footer .mod-menu > li > a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
}

.container-footer .mod-menu > li > a:hover {
    color: var(--budissa-gelb);
}

/* Copyright */
.budissa-copyright {
    margin: 0;
    color: rgba(255,255,255,.8);
    font-size: .9rem;
}

/* Mobil */
@media (max-width: 700px) {

    .container-footer .grid-child {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .container-footer .mod-menu {
        justify-content: center;
    }
}

.start-termin-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
    margin: 1.1rem 0 1.25rem;
}

.start-termin-details span {
    padding: .75rem 1rem;
    background: #f5f7fa;
    border-radius: 6px;
}

.start-termin-details strong {
    color: var(--budissa-dunkelblau);
}

@media (max-width: 700px) {
    .start-termin-details {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   STARTSEITE – AKTUELLER TERMIN
   ===================================================== */

.start-naechster-termin {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 0;

    margin: 2.5rem 0 3rem;

    background: #ffffff;

    border-top: 5px solid var(--budissa-gelb);
    border-radius: 10px;

    box-shadow: 0 5px 22px rgba(0,0,0,.08);

    overflow: hidden;
}


/* -------------------------
   Datum links
   ------------------------- */

.start-termin-datum {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: .8rem;

    padding: 1.5rem;

    background: linear-gradient(
        145deg,
        var(--budissa-dunkelblau),
        var(--budissa-blau)
    );

    color: #ffffff;
}

.start-termin-tag {
    color: var(--budissa-gelb);

    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
}

.start-termin-datum > span:last-child {
    font-size: .95rem;
    line-height: 1.35;
}

.start-termin-datum strong {
    color: #ffffff;
    font-size: 1.05rem;
}


/* -------------------------
   Inhalt rechts
   ------------------------- */

.start-termin-inhalt {
    padding: 1.5rem 1.8rem;
}

.start-termin-inhalt .budissa-eyebrow {
    margin: 0 0 .3rem;
}

.start-termin-inhalt h2 {
    margin: .15rem 0 .6rem;

    font-size: 1.6rem;
}

.start-termin-inhalt > p {
    margin-bottom: .8rem;
}


/* -------------------------
   Wann / Wo
   ------------------------- */

.start-termin-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: .75rem;

    margin: 1.2rem 0;
}

.start-termin-details span {
    display: block;

    padding: .8rem 1rem;

    background: #f5f7fa;

    border-radius: 6px;

    line-height: 1.4;
}

.start-termin-details strong {
    color: var(--budissa-dunkelblau);
}


/* Button etwas Abstand */

.start-termin-inhalt .budissa-button {
    margin-top: .2rem;
}


/* =====================================================
   STARTSEITEN-TERMIN – MOBIL
   ===================================================== */

@media (max-width: 700px) {

    .start-naechster-termin {
        grid-template-columns: 1fr;

        margin: 2rem 0 2.5rem;
    }

    .start-termin-datum {
        justify-content: flex-start;

        padding: 1rem 1.25rem;
    }

    .start-termin-tag {
        font-size: 2.8rem;
    }

    .start-termin-inhalt {
        padding: 1.25rem;
    }

    .start-termin-details {
        grid-template-columns: 1fr;

        gap: .5rem;
    }

    .start-termin-inhalt .budissa-button {
        width: 100%;
    }
}