/* =========================================================
   TSV Mimmenhausen Volleyball
   Eigenes Jimdo-Layout
   Version 3.0 – Typografie + Responsive
   ========================================================= */


/* =========================================================
   1. WEBSCHRIFTEN
   ========================================================= */

/*
   Lato entspricht der Typografie des früheren Jimdo-Layouts.
   Fließtexte bleiben bewusst in Arial/Helvetica.
*/

@import url("https://fonts.jimstatic.com/css?family=Lato:300,400,700&subset=latin");


/* =========================================================
   2. DESIGN-VARIABLEN
   ========================================================= */

:root {
    --tsv-blue-dark: #003561;

    --tsv-blue-nav-1: #0098ec;
    --tsv-blue-nav-2: #16a6e8;
    --tsv-blue-nav-3: #35b4eb;

    --tsv-yellow: #ffed00;

    --tsv-text: #12365a;
    --tsv-text-dark: #333333;
    --tsv-link: #076da8;

    --tsv-border: #d4d9dd;
    --tsv-border-dark: #b9c1c7;
    --tsv-surface-soft: #eef3f6;

    --tsv-radius: 6px;

    --tsv-font-display: "Lato", Arial, Helvetica, sans-serif;
    --tsv-font-body: Arial, Helvetica, sans-serif;

    --tsv-page-width: 1160px;
    --tsv-sidebar-width: 280px;
    --tsv-column-gap: 28px;
}


/* =========================================================
   3. RESET UND BASIS
   ========================================================= */

html {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0;
}

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

html,
body {
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    overflow-x: hidden;
    background: var(--tsv-blue-dark);
    color: var(--tsv-text);
    font-family: var(--tsv-font-body);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
}

figure {
    margin: 0;
}

iframe {
    max-width: 100%;
    border: 0 !important;
}


/* =========================================================
   4. GESAMTSEITE
   ========================================================= */

#container {
    width: 100%;
    min-height: 100vh;
    background: var(--tsv-blue-dark);
}

#page-wrapper {
    width: calc(100% - 40px);
    max-width: var(--tsv-page-width);
    margin: 0 auto;
}


/* =========================================================
   5. HEADER
   ========================================================= */

#header-wrapper,
#header {
    width: 100%;
    background: var(--tsv-blue-dark);
}

#header {
    position: relative;
    margin: 0;
    padding: 18px 0 16px;
}

#header img {
    display: block;
    width: 100%;
    max-width: var(--tsv-page-width);
    height: auto;
    margin: 0 auto;
}

#header h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}


/* =========================================================
   6. NAVIGATION – GRUNDSTRUKTUR
   ========================================================= */

#navigation {
    width: 100%;
    margin: 0 0 30px;
    padding: 0;
    overflow: hidden;
    background: transparent;
}

#navigation [data-container="navigation"],
#navigation .j-nav-variant-standard {
    width: 100%;
    margin: 0;
    padding: 0;
}

#navigation ul.mainNav1,
#navigation ul.mainNav2,
#navigation ul.mainNav3 {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

#navigation ul.mainNav1 {
    background: var(--tsv-blue-nav-1) !important;
}

#navigation ul.mainNav2 {
    background: var(--tsv-blue-nav-2) !important;
}

#navigation ul.mainNav3 {
    background: var(--tsv-blue-nav-3) !important;
}

#navigation ul.mainNav1 > li,
#navigation ul.mainNav2 > li,
#navigation ul.mainNav3 > li {
    display: block;
    flex: 0 0 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
}


/* =========================================================
   7. NAVIGATION – VERSCHACHTELTE EBENEN
   ========================================================= */

/*
   Jimdo fügt Untermenüs direkt nach dem aktiven Menüpunkt ein.
   Die Hilfscontainer werden deshalb ans Ende der jeweiligen
   Navigationsebene verschoben.
*/

#navigation ul.mainNav1 > li:has(> ul.mainNav2),
#navigation ul.mainNav2 > li:has(> ul.mainNav3) {
    order: 999;
    flex: 0 0 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background: var(--tsv-blue-dark);
}

#navigation ul.mainNav1 > li > ul.mainNav2,
#navigation ul.mainNav2 > li > ul.mainNav3 {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 2px 0 0;
    padding: 0;
}


/* =========================================================
   8. NAVIGATION – TYPOGRAFISCHE BASIS
   ========================================================= */

#navigation ul.mainNav1 > li > a,
#navigation ul.mainNav2 > li > a,
#navigation ul.mainNav3 > li > a {
    display: flex !important;
    align-items: center;
    border: 0 !important;
    color: #ffffff !important;

    font-family: var(--tsv-font-display) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.035em;

    text-decoration: none !important;
    text-transform: uppercase;
    white-space: nowrap;
}


/* =========================================================
   9. NAVIGATION – EBENE 1
   ========================================================= */

#navigation ul.mainNav1 > li > a {
    min-height: 44px;
    padding: 13px 15px !important;
    background: var(--tsv-blue-nav-1) !important;
    font-size: 13px !important;
}


/* =========================================================
   10. NAVIGATION – EBENE 2
   ========================================================= */

#navigation ul.mainNav2 > li > a {
    min-height: 42px;
    padding: 12px 15px !important;
    background: var(--tsv-blue-nav-2) !important;
    font-size: 13px !important;
}


/* =========================================================
   11. NAVIGATION – EBENE 3
   ========================================================= */

#navigation ul.mainNav3 > li > a {
    min-height: 42px;
    padding: 12px 15px !important;
    background: var(--tsv-blue-nav-3) !important;
    font-size: 13px !important;
}


/* =========================================================
   12. NAVIGATION – HOVER UND AKTIVE HIERARCHIE
   ========================================================= */

#navigation ul.mainNav1 a:hover,
#navigation ul.mainNav2 a:hover,
#navigation ul.mainNav3 a:hover,
#navigation ul.mainNav1 a.parent,
#navigation ul.mainNav2 a.parent,
#navigation ul.mainNav3 a.parent,
#navigation ul.mainNav1 a.current,
#navigation ul.mainNav2 a.current,
#navigation ul.mainNav3 a.current {
    background: var(--tsv-yellow) !important;
    color: var(--tsv-blue-dark) !important;
    box-shadow: none !important;
}


/* =========================================================
   13. HAUPTBEREICH
   ========================================================= */

#main-wrapper {
    display: grid;
    grid-template-columns:
        var(--tsv-sidebar-width)
        minmax(0, 1fr);

    gap: var(--tsv-column-gap);
    align-items: start;
    width: 100%;
    padding-bottom: 54px;
}


/* =========================================================
   14. SIDEBAR
   ========================================================= */

#sidebar {
    min-width: 0;
    padding: 18px 16px;
    overflow: hidden;

    border-radius: var(--tsv-radius);
    background: #ffffff;
    color: var(--tsv-text-dark);

    font-family: var(--tsv-font-body);
    font-size: 15px;
    line-height: 1.55;
}

#sidebar .j-module {
    max-width: 100%;
    margin-bottom: 11px;
}

#sidebar .j-module:last-child {
    margin-bottom: 0;
}

#sidebar .n {
    padding: 4px 0;
}

#sidebar .j-text {
    color: var(--tsv-text-dark) !important;
    font-family: var(--tsv-font-body) !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
}

#sidebar .j-text p {
    margin: 0 0 10px;
    color: inherit;
    font-family: inherit !important;
    line-height: inherit !important;
}

#sidebar strong,
#sidebar b {
    color: var(--tsv-text-dark);
    font-weight: 700;
}


/* =========================================================
   15. SIDEBAR – ÜBERSCHRIFTEN
   ========================================================= */

#sidebar h1,
#sidebar h2,
#sidebar h3,
#sidebar h4 {
    margin: 0 0 12px;
    padding: 0;

    color: var(--tsv-text-dark);
    font-family: var(--tsv-font-display) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-align: center;
}

#sidebar h1 {
    font-size: 23px !important;
}

#sidebar h2 {
    font-size: 21px !important;
}

#sidebar h3 {
    font-size: 19px !important;
}

#sidebar h4 {
    font-size: 17px !important;
}


/* =========================================================
   16. SIDEBAR – LINKS
   ========================================================= */

#sidebar a:link,
#sidebar a:visited {
    color: var(--tsv-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

#sidebar a:hover,
#sidebar a:active {
    color: var(--tsv-blue-dark);
    text-decoration: none;
}


/* =========================================================
   17. CONTENTBEREICH
   ========================================================= */

#content {
    min-width: 0;
    padding: 32px 36px 38px;

    border-radius: var(--tsv-radius);
    background: #ffffff;
    color: var(--tsv-text);

    font-family: var(--tsv-font-body) !important;
    font-size: 17px !important;
    line-height: 1.66 !important;
}

#content_area {
    width: 100%;
    margin: 0;
    padding: 0;
}

#content .j-module {
    max-width: 100%;
    margin-bottom: 20px;
}

#content .j-module:last-child {
    margin-bottom: 0;
}

#content .n {
    padding: 0;
}


/* =========================================================
   18. FLIESSTEXT UND JIMDO-MODULE
   ========================================================= */

#content .j-text,
#content .j-textWithImage,
#content .j-blog,
#content .j-blogarticle,
#content .j-table,
#content .j-formnew,
#content .j-downloadDocument,
#content .j-htmlCode,
#content .j-rss,
#content .j-googlemaps {
    color: var(--tsv-text) !important;
    font-family: var(--tsv-font-body) !important;
    font-size: 17px !important;
    line-height: 1.66 !important;
}

#content .j-text p,
#content .j-textWithImage p,
#content .j-blog p,
#content .j-blogarticle p,
#content .j-htmlCode p,
#content .j-rss p {
    margin: 0 0 16px;
    color: inherit;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

#content .j-text li,
#content .j-textWithImage li,
#content .j-blog li,
#content .j-blogarticle li {
    color: inherit;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}


/* =========================================================
   19. ÜBERSCHRIFTEN – TYPOGRAFISCHE BASIS
   ========================================================= */

#content h1,
#content h2,
#content h3,
#content h4,
#content .j-header h1,
#content .j-header h2,
#content .j-header h3,
#content .j-header h4 {
    color: var(--tsv-text) !important;
    font-family: var(--tsv-font-display) !important;

    overflow-wrap: break-word;
    text-rendering: optimizeLegibility;
}


/* =========================================================
   20. H1
   ========================================================= */

#content h1,
#content .j-header h1 {
    margin: 0 0 22px;
    padding: 0 0 16px;

    border-bottom: 1px solid var(--tsv-border);

    font-size: 34px !important;
    font-weight: 300 !important;
    line-height: 1.18 !important;
    letter-spacing: -0.018em;
}


/* =========================================================
   21. H2
   ========================================================= */

#content h2,
#content .j-header h2 {
    margin: 30px 0 14px;

    font-size: 27px !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em;
}


/* =========================================================
   22. H3
   ========================================================= */

#content h3,
#content .j-header h3 {
    margin: 0 0 18px;

    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: 0;
}


/* =========================================================
   23. H4
   ========================================================= */

#content h4,
#content .j-header h4 {
    margin: 22px 0 10px;

    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}


/* =========================================================
   24. LINKS UND AUSZEICHNUNGEN
   ========================================================= */

#content a:link,
#content a:visited {
    color: var(--tsv-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

#content a:hover,
#content a:active {
    color: var(--tsv-blue-dark);
    text-decoration: none;
}

#content strong,
#content b {
    font-weight: 700;
}


/* =========================================================
   25. BILDER
   ========================================================= */

#content .cc-imagewrapper,
#sidebar .cc-imagewrapper {
    display: block;
    width: 100%;
    max-width: 100%;
}
/* =========================================================
   BILDER / JIMDO-AUSRICHTUNG
   ========================================================= */

/* Grundformatierung */

#content .cc-imagewrapper img,
#sidebar .cc-imagewrapper img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0;
}

/* Jimdo-Ausrichtung respektieren */

#content .cc-m-image-align-1,
#sidebar .cc-m-image-align-1,
#content figure.cc-m-image-align-1,
#sidebar figure.cc-m-image-align-1 {
    text-align: left;
}

#content .cc-m-image-align-2,
#sidebar .cc-m-image-align-2,
#content figure.cc-m-image-align-2,
#sidebar figure.cc-m-image-align-2 {
    text-align: right;
}

#content .cc-m-image-align-3,
#sidebar .cc-m-image-align-3,
#content figure.cc-m-image-align-3,
#sidebar figure.cc-m-image-align-3 {
    text-align: center;
}

/* Bildunterschriften */

#content .j-imageSubtitle {
    margin: 4px 0 18px;
    line-height: 1.2;
}

#sidebar .j-imageSubtitle {
    margin: 4px 0 8px;
    line-height: 1.2;
}

/* =========================================================
   26. BILDUNTERSCHRIFTEN
   ========================================================= */

/*
   Jimdo setzt die betreffende Bildunterschrift als eigenes
   Textmodul direkt hinter das Bildmodul.
*/

#content .j-imageSubtitle + .j-text {
    margin-top: 8px;
    margin-bottom: 18px;

    color: var(--tsv-text);
    font-family: var(--tsv-font-body) !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    text-align: center;
}

#content .j-imageSubtitle + .j-text p {
    margin: 0 0 3px !important;
    padding: 0 !important;

    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
}

#content .j-imageSubtitle + .j-text p:last-child {
    margin-bottom: 0 !important;
}


/* =========================================================
   27. GALERIEN UND SPONSORENSLIDER
   ========================================================= */

#sidebar .j-gallery,
#sidebar .j-imageSubtitle,
#sidebar .cc-m-gallery-container,
#sidebar .bx-wrapper,
#sidebar .bx-viewport {
    width: 100% !important;
    max-width: 100% !important;
}

#sidebar .j-gallery img,
#sidebar .j-imageSubtitle img {
    max-width: 100%;
}

.bx-controls-direction,
.bx-controls-auto-item {
    display: none !important;
}


/* =========================================================
   28. TRENNLINIEN
   ========================================================= */

#content .j-hr,
#sidebar .j-hr {
    margin: 11px 0 18px;
}

#content .j-hr .hr,
#sidebar .j-hr .hr,
#content .j-hr hr,
#sidebar .j-hr hr {
    height: 1px;
    margin: 0;
    border: 0;
    background: #c9cdd1;
}


/* =========================================================
   29. LISTEN
   ========================================================= */

#content ul,
#content ol {
    margin: 0 0 20px;
    padding-left: 26px;
}

#content li {
    margin-bottom: 7px;
}


/* =========================================================
   30. TABELLEN
   ========================================================= */

#content table {
    width: 100%;
    border-collapse: collapse;

    color: var(--tsv-text);
    font-family: var(--tsv-font-body);
    font-size: 16px;
    line-height: 1.55;
}

#content th,
#content td {
    padding: 11px 12px;
    border: 1px solid var(--tsv-border);

    text-align: left;
    vertical-align: top;
}

#content th {
    background: var(--tsv-surface-soft);
    font-family: var(--tsv-font-display);
    font-weight: 700;
}


/* =========================================================
   31. FORMULARE
   ========================================================= */

#content input[type="text"],
#content input[type="email"],
#content input[type="tel"],
#content input[type="date"],
#content input[type="number"],
#content textarea,
#content select {
    max-width: 100%;
    padding: 11px 12px;

    border: 1px solid var(--tsv-border-dark);
    border-radius: 3px;

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

    font-family: var(--tsv-font-body);
    font-size: 16px;
    line-height: 1.5;
}

#content textarea {
    width: 100%;
    min-height: 150px;
}

#content input[type="submit"],
#content button[type="submit"] {
    padding: 11px 20px;

    border: 0;
    border-radius: 3px;

    background: var(--tsv-blue-nav-1);
    color: #ffffff;

    font-family: var(--tsv-font-display);
    font-size: 16px;
    font-weight: 700;

    cursor: pointer;
}

#content input[type="submit"]:hover,
#content button[type="submit"]:hover {
    background: var(--tsv-blue-dark);
}


/* =========================================================
   32. DOWNLOADS, IFRAMES UND EMBEDS
   ========================================================= */

#content iframe,
#content video,
#content embed,
#content object {
    display: block;
    max-width: 100%;
}

#content .j-downloadDocument {
    font-family: var(--tsv-font-body) !important;
    font-size: 17px !important;
    line-height: 1.55 !important;
}


/* =========================================================
   33. FOOTER
   ========================================================= */

#footer {
    position: static;
    clear: both;
    width: 100%;
    min-height: 72px;
    margin: 0;
    padding: 20px;

    background: var(--tsv-blue-dark);
    color: #ffffff;
}

#footer .gutter {
    width: calc(100% - 40px);
    max-width: var(--tsv-page-width);
    min-height: 0;
    margin: 0 auto;
    padding: 0;

    background: none;
}

#footer .sponsorengutter {
    display: none;
}

#contentfooter {
    margin: 0;

    color: #ffffff;
    font-family: var(--tsv-font-display);
    font-size: 13px;
    line-height: 1.55;
}

#contentfooter::after {
    display: table;
    clear: both;
    content: "";
}

#contentfooter .leftrow {
    float: left;
    width: 65%;
    margin: 0;

    color: #ffffff;
    text-align: left;
}

#contentfooter .rightrow {
    float: right;
    width: 32%;
    margin: 0;

    color: #ffffff;
    text-align: right;
}

#contentfooter a:link,
#contentfooter a:visited {
    color: #ffffff;
}


/* =========================================================
   34. RESPONSIVE – MITTLERE DESKTOPBREITEN
   ========================================================= */

@media (max-width: 1100px) {

    #page-wrapper {
        width: calc(100% - 24px);
    }

    #main-wrapper {
        grid-template-columns: 250px minmax(0, 1fr);
        gap: 22px;
    }

    #content {
        padding: 28px;
    }

    #navigation ul.mainNav1 > li > a,
    #navigation ul.mainNav2 > li > a,
    #navigation ul.mainNav3 > li > a {
        min-height: 40px;
        padding: 11px 10px !important;

        font-size: 12px !important;
        letter-spacing: 0.02em;
    }

}


/* =========================================================
   35. RESPONSIVE – TABLET
   ========================================================= */

@media (max-width: 820px) {

    html,
    body {
        width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    #container {
        width: 100%;
        min-width: 0;
    }

    #page-wrapper {
        width: calc(100% - 20px);
        max-width: none;
        margin: 0 auto;
    }


    /* Header */

    #header {
        padding: 10px 0 12px;
    }

    #header img {
        width: 100%;
        max-width: none;
    }


    /* Navigation */

    #navigation {
        width: 100%;
        margin: 0 0 18px;
        overflow: visible;
    }

    #navigation ul.mainNav1,
    #navigation ul.mainNav2,
    #navigation ul.mainNav3 {
        display: block;
        width: 100%;
    }

    #navigation ul.mainNav1 > li,
    #navigation ul.mainNav2 > li,
    #navigation ul.mainNav3 > li,
    #navigation ul.mainNav1 > li:has(> ul.mainNav2),
    #navigation ul.mainNav2 > li:has(> ul.mainNav3) {
        display: block;
        width: 100%;
        margin: 0;
    }

    #navigation ul.mainNav1 > li > ul.mainNav2,
    #navigation ul.mainNav2 > li > ul.mainNav3 {
        display: block;
        width: 100%;
        margin-top: 2px;
    }

    #navigation ul.mainNav1 > li > a,
    #navigation ul.mainNav2 > li > a,
    #navigation ul.mainNav3 > li > a {
        display: block !important;
        width: 100%;
        min-height: 0;

        padding: 11px 14px !important;

        border: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;

        font-size: 13px !important;
        line-height: 1.3 !important;
        letter-spacing: 0.025em;

        white-space: normal;
    }

    #navigation ul.mainNav2 > li > a {
        padding-left: 25px !important;
    }

    #navigation ul.mainNav3 > li > a {
        padding-left: 38px !important;
    }


    /* Hauptbereich */

    #main-wrapper {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 20px;
        padding-bottom: 30px;
    }

    #content {
        order: 1;
        width: 100%;
        min-width: 0;

        padding: 26px 24px 30px;

        font-size: 17px !important;
        line-height: 1.64 !important;
    }

    #sidebar {
        order: 2;
        width: 100%;
        min-width: 0;

        padding: 20px;

        font-size: 15px;
        line-height: 1.55;
    }


    /* Content-Typografie */

    #content .j-text,
    #content .j-textWithImage,
    #content .j-blog,
    #content .j-blogarticle,
    #content .j-table,
    #content .j-formnew,
    #content .j-downloadDocument,
    #content .j-htmlCode,
    #content .j-rss {
        font-size: 17px !important;
        line-height: 1.64 !important;
    }

    #content h1,
    #content .j-header h1 {
        font-size: 31px !important;
        line-height: 1.18 !important;
    }

    #content h2,
    #content .j-header h2 {
        font-size: 25px !important;
    }

    #content h3,
    #content .j-header h3 {
        font-size: 22px !important;
    }

    #content h4,
    #content .j-header h4 {
        font-size: 19px !important;
    }


    /* Bilder und Embeds */

    #content img,
    #sidebar img,
    #content .cc-imagewrapper,
    #sidebar .cc-imagewrapper,
    #content .j-imageSubtitle,
    #sidebar .j-imageSubtitle,
    #content .j-gallery,
    #sidebar .j-gallery,
    #content .bx-wrapper,
    #sidebar .bx-wrapper {
        max-width: 100% !important;
    }

    #content iframe,
    #content video,
    #content embed,
    #content object {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
    }


    /* Tabellen */

    #content .j-table,
    #content .j-table > div {
        max-width: 100%;
        overflow-x: auto;
    }

    #content table {
        min-width: 600px;
    }


    /* Footer */

    #footer {
        padding: 18px 10px;
    }

    #footer .gutter {
        width: 100%;
    }

    #contentfooter .leftrow,
    #contentfooter .rightrow {
        float: none;
        width: 100%;
        margin: 0 0 8px;
        text-align: left;
    }

}


/* =========================================================
   36. RESPONSIVE – SMARTPHONE
   ========================================================= */

@media (max-width: 560px) {

    #page-wrapper {
        width: calc(100% - 14px);
    }


    /* Header */

    #header {
        padding: 7px 0 9px;
    }


    /* Navigation */

    #navigation {
        margin-bottom: 14px;
    }

    #navigation ul.mainNav1 > li > a,
    #navigation ul.mainNav2 > li > a,
    #navigation ul.mainNav3 > li > a {
        padding-top: 10px !important;
        padding-bottom: 10px !important;

        font-size: 12px !important;
        letter-spacing: 0.02em;
    }

    #navigation ul.mainNav2 > li > a {
        padding-left: 23px !important;
    }

    #navigation ul.mainNav3 > li > a {
        padding-left: 34px !important;
    }


    /* Content */

    #content {
        padding: 22px 18px 25px;
        border-radius: 5px;

        font-size: 16px !important;
        line-height: 1.62 !important;
    }

    #content .j-text,
    #content .j-textWithImage,
    #content .j-blog,
    #content .j-blogarticle,
    #content .j-table,
    #content .j-formnew,
    #content .j-downloadDocument,
    #content .j-htmlCode,
    #content .j-rss {
        font-size: 16px !important;
        line-height: 1.62 !important;
    }

    #content .j-text p,
    #content .j-textWithImage p,
    #content .j-blog p,
    #content .j-blogarticle p {
        margin-bottom: 15px;
    }


    /* Smartphone-Überschriften */

    #content h1,
    #content .j-header h1 {
        margin-bottom: 18px;
        padding-bottom: 13px;

        font-size: 28px !important;
        font-weight: 300 !important;
        line-height: 1.18 !important;
    }

    #content h2,
    #content .j-header h2 {
        font-size: 23px !important;
        line-height: 1.28 !important;
    }

    #content h3,
    #content .j-header h3 {
        font-size: 20px !important;
        line-height: 1.32 !important;
    }

    #content h4,
    #content .j-header h4 {
        font-size: 18px !important;
    }


    /* Sidebar */

    #sidebar {
        padding: 18px 15px;
        border-radius: 5px;
    }


    /* Bildunterschriften */

    #content .j-imageSubtitle + .j-text {
        margin-top: 7px;

        font-size: 13px !important;
        line-height: 1.2 !important;
    }

    #content .j-imageSubtitle + .j-text p {
        margin-bottom: 3px !important;

        font-size: 13px !important;
        line-height: 1.2 !important;
    }


    /* Formulare */

    #content input[type="text"],
    #content input[type="email"],
    #content input[type="tel"],
    #content input[type="date"],
    #content input[type="number"],
    #content textarea,
    #content select {
        width: 100%;
        font-size: 16px;
    }

}


/* =========================================================
   37. SEHR KLEINE SMARTPHONES
   ========================================================= */

@media (max-width: 380px) {

    #page-wrapper {
        width: calc(100% - 10px);
    }

    #content {
        padding-right: 15px;
        padding-left: 15px;
    }

    #content h1,
    #content .j-header h1 {
        font-size: 26px !important;
    }

    #content h2,
    #content .j-header h2 {
        font-size: 22px !important;
    }

    #content h3,
    #content .j-header h3 {
        font-size: 19px !important;
    }

    #navigation ul.mainNav1 > li > a,
    #navigation ul.mainNav2 > li > a,
    #navigation ul.mainNav3 > li > a {
        font-size: 11px !important;
    }

}

/* =========================================================
   38. MOBILE BURGER-MENÜ
   Passend zum von Jimdo bereinigten HTML
   ========================================================= */

.mobile-menu-toggle {
    display: none;
}


/* =========================================================
   39. BURGER-MENÜ – TABLET UND SMARTPHONE
   ========================================================= */

@media (max-width: 820px) {

    .js .mobile-menu-toggle {
        position: relative;
        display: block;
        width: 100%;
        min-height: 48px;
        margin: 0 0 10px;
        padding: 11px 58px 11px 15px;

        border: 0;
        border-radius: 5px;

        background: var(--tsv-blue-nav-1);
        color: #ffffff;

        font-family: var(--tsv-font-display);
        font-size: 15px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.04em;
        text-align: left;
        text-transform: uppercase;

        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
    }

    .js .mobile-menu-toggle:hover,
    .js .mobile-menu-toggle:focus-visible,
    .js .mobile-menu-toggle[aria-expanded="true"] {
        background: var(--tsv-yellow);
        color: var(--tsv-blue-dark);
        outline: none;
    }

    .mobile-menu-toggle__label {
        display: block;
    }

    .mobile-menu-toggle::before,
    .mobile-menu-toggle::after {
        position: absolute;
        top: 50%;
        right: 16px;

        width: 25px;
        height: 2px;

        border-radius: 2px;
        background: currentColor;

        content: "";
        transform-origin: center;
        transition:
            transform 180ms ease,
            box-shadow 180ms ease,
            opacity 140ms ease,
            background-color 180ms ease;
    }

    .mobile-menu-toggle::before {
        transform: translateY(-50%);
        box-shadow:
            0 -7px 0 currentColor,
            0 7px 0 currentColor;
    }

    .mobile-menu-toggle::after {
        background: transparent;
        transform: translateY(-50%);
    }

    .mobile-menu-toggle[aria-expanded="true"]::before {
        box-shadow: none;
        transform: translateY(-50%) rotate(45deg);
    }

    .mobile-menu-toggle[aria-expanded="true"]::after {
        background: currentColor;
        transform: translateY(-50%) rotate(-45deg);
    }

    .js #navigation {
        width: 100%;
        max-height: 0;
        margin: 0;
        overflow: hidden;

        opacity: 0;
        visibility: hidden;

        transition:
            max-height 280ms ease,
            opacity 180ms ease,
            margin-bottom 280ms ease,
            visibility 0s linear 280ms;
    }

    .js #navigation.is-open {
        max-height: calc(100vh - 125px);
        margin-bottom: 18px;
        overflow-x: hidden;
        overflow-y: auto;

        opacity: 1;
        visibility: visible;

        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;

        transition:
            max-height 320ms ease,
            opacity 180ms ease,
            margin-bottom 320ms ease,
            visibility 0s;
    }

    body.mobile-menu-open {
        overflow: hidden;
    }

    .js #navigation ul.mainNav1,
    .js #navigation ul.mainNav2,
    .js #navigation ul.mainNav3 {
        display: block;
        width: 100%;
    }

    .js #navigation ul.mainNav1 > li,
    .js #navigation ul.mainNav2 > li,
    .js #navigation ul.mainNav3 > li,
    .js #navigation ul.mainNav1 > li:has(> ul.mainNav2),
    .js #navigation ul.mainNav2 > li:has(> ul.mainNav3) {
        display: block;
        width: 100%;
        margin: 0;
    }

    .js #navigation ul.mainNav1 > li > ul.mainNav2,
    .js #navigation ul.mainNav2 > li > ul.mainNav3 {
        display: block;
        width: 100%;
        margin-top: 2px;
    }

    .js #navigation ul.mainNav1 > li > a {
        display: block !important;
        width: 100%;
        min-height: 0;
        padding: 12px 15px !important;

        border: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.22) !important;

        font-size: 14px !important;
        line-height: 1.3 !important;
        letter-spacing: 0.025em;

        white-space: normal;
    }

    .js #navigation ul.mainNav2 > li > a {
        display: block !important;
        width: 100%;
        min-height: 0;
        padding: 11px 15px 11px 27px !important;

        border: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.22) !important;

        font-size: 13px !important;
        line-height: 1.3 !important;

        white-space: normal;
    }

    .js #navigation ul.mainNav3 > li > a {
        display: block !important;
        width: 100%;
        min-height: 0;
        padding: 11px 15px 11px 42px !important;

        border: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.22) !important;

        font-size: 13px !important;
        line-height: 1.3 !important;

        white-space: normal;
    }

    .js #navigation ul.mainNav1 a.parent,
    .js #navigation ul.mainNav2 a.parent,
    .js #navigation ul.mainNav3 a.parent,
    .js #navigation ul.mainNav1 a.current,
    .js #navigation ul.mainNav2 a.current,
    .js #navigation ul.mainNav3 a.current {
        background: var(--tsv-yellow) !important;
        color: var(--tsv-blue-dark) !important;
    }
}


/* =========================================================
   40. BURGER-MENÜ – KLEINE SMARTPHONES
   ========================================================= */

@media (max-width: 560px) {

    .js .mobile-menu-toggle {
        min-height: 46px;
        padding: 10px 54px 10px 13px;
        font-size: 14px;
    }

    .mobile-menu-toggle::before,
    .mobile-menu-toggle::after {
        right: 14px;
        width: 23px;
    }

    .js #navigation.is-open {
        max-height: calc(100vh - 105px);
    }

    .js #navigation ul.mainNav1 > li > a {
        padding: 11px 13px !important;
        font-size: 13px !important;
    }

    .js #navigation ul.mainNav2 > li > a {
        padding: 10px 13px 10px 24px !important;
        font-size: 12px !important;
    }

    .js #navigation ul.mainNav3 > li > a {
        padding: 10px 13px 10px 36px !important;
        font-size: 12px !important;
    }
}


/* =========================================================
   41. REDUZIERTE BEWEGUNGEN
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .mobile-menu-toggle::before,
    .mobile-menu-toggle::after,
    .js #navigation,
    .js #navigation.is-open {
        transition: none;
    }
}

/* =========================================================
   42. TYPOGRAFIE-SYSTEM V4.0
   Zentrale Neudefinition für Desktop, Tablet und Smartphone
   ========================================================= */

/*
   Schriftlogik:
   - Lato: Navigation, Überschriften, Buttons, Footer
   - Arial/Helvetica: Fließtext, Tabellen, Downloads, Sidebartexte
*/

:root {
    --tsv-font-display: "Lato", Arial, Helvetica, sans-serif;
    --tsv-font-body: Arial, Helvetica, sans-serif;

    --tsv-body-size: 17px;
    --tsv-body-line: 1.70;

    --tsv-sidebar-size: 15px;
    --tsv-sidebar-line: 1.55;

    --tsv-h1-size: 40px;
    --tsv-h2-size: 27px;
    --tsv-h3-size: 22px;
    --tsv-h4-size: 18px;

    --tsv-text-color: #24394f;
    --tsv-heading-color: #0b3d69;
    --tsv-meta-color: #65788a;
}


/* ---------------------------------------------------------
   Globale Textbasis
   --------------------------------------------------------- */

body {
    color: var(--tsv-text-color);
    font-family: var(--tsv-font-body);
    font-size: var(--tsv-body-size);
    line-height: var(--tsv-body-line);
    font-weight: 400;
}

#content,
#sidebar,
#footer {
    text-rendering: optimizeLegibility;
}


/* ---------------------------------------------------------
   Content – Fließtext
   --------------------------------------------------------- */

#content {
    color: var(--tsv-text-color);
    font-family: var(--tsv-font-body) !important;
    font-size: var(--tsv-body-size) !important;
    line-height: var(--tsv-body-line) !important;
}

#content .j-text,
#content .j-textWithImage,
#content .j-blog,
#content .j-blogarticle,
#content .j-table,
#content .j-formnew,
#content .j-downloadDocument,
#content .j-htmlCode,
#content .j-rss,
#content .j-googlemaps {
    color: var(--tsv-text-color) !important;
    font-family: var(--tsv-font-body) !important;
    font-size: var(--tsv-body-size) !important;
    line-height: var(--tsv-body-line) !important;
    font-weight: 400 !important;
}

#content .j-text p,
#content .j-textWithImage p,
#content .j-blog p,
#content .j-blogarticle p,
#content .j-htmlCode p,
#content .j-rss p {
    margin: 0 0 18px;
    color: inherit;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: inherit !important;
}

#content strong,
#content b {
    color: #173653;
    font-weight: 700;
}


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

#content h1,
#content h2,
#content h3,
#content h4,
#content .j-header h1,
#content .j-header h2,
#content .j-header h3,
#content .j-header h4 {
    color: var(--tsv-heading-color) !important;
    font-family: var(--tsv-font-display) !important;
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
}

#content h1,
#content .j-header h1 {
    margin: 0 0 26px;
    padding: 0 0 18px;
    border-bottom: 1px solid var(--tsv-border);

    font-size: var(--tsv-h1-size) !important;
    font-weight: 300 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.025em;
}

#content h2,
#content .j-header h2 {
    margin: 34px 0 16px;

    font-size: var(--tsv-h2-size) !important;
    font-weight: 700 !important;
    line-height: 1.24 !important;
    letter-spacing: -0.01em;
}

#content h3,
#content .j-header h3 {
    margin: 28px 0 14px;

    font-size: var(--tsv-h3-size) !important;
    font-weight: 700 !important;
    line-height: 1.28 !important;
    letter-spacing: 0;
}

#content h4,
#content .j-header h4 {
    margin: 24px 0 10px;

    font-size: var(--tsv-h4-size) !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}


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

#navigation ul.mainNav1 > li > a,
#navigation ul.mainNav2 > li > a,
#navigation ul.mainNav3 > li > a {
    font-family: var(--tsv-font-display) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.035em;
}

#navigation ul.mainNav1 > li > a {
    font-size: 14px !important;
}

#navigation ul.mainNav2 > li > a,
#navigation ul.mainNav3 > li > a {
    font-size: 13px !important;
}


/* ---------------------------------------------------------
   Sidebar
   --------------------------------------------------------- */

#sidebar {
    color: #303b46;
    font-family: var(--tsv-font-body);
    font-size: var(--tsv-sidebar-size);
    line-height: var(--tsv-sidebar-line);
}

#sidebar .j-text {
    color: #303b46 !important;
    font-family: var(--tsv-font-body) !important;
    font-size: var(--tsv-sidebar-size) !important;
    line-height: var(--tsv-sidebar-line) !important;
    font-weight: 400 !important;
}

#sidebar .j-text p {
    margin: 0 0 11px;
}

#sidebar h1,
#sidebar h2,
#sidebar h3,
#sidebar h4 {
    color: #222f3a !important;
    font-family: var(--tsv-font-display) !important;
    font-weight: 700 !important;
    line-height: 1.22 !important;
    letter-spacing: -0.01em;
}

#sidebar h1 {
    font-size: 24px !important;
}

#sidebar h2 {
    font-size: 22px !important;
}

#sidebar h3 {
    font-size: 20px !important;
}

#sidebar h4 {
    font-size: 17px !important;
}


/* ---------------------------------------------------------
   Downloadbereich
   --------------------------------------------------------- */

#content .j-downloadDocument {
    color: var(--tsv-text-color) !important;
    font-family: var(--tsv-font-body) !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
}

#content .j-downloadDocument strong,
#content .j-downloadDocument b {
    display: inline-block;
    margin-bottom: 3px;

    color: var(--tsv-heading-color);
    font-family: var(--tsv-font-display);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
}

#content .j-downloadDocument a {
    font-size: 16px;
    font-weight: 400;
}

#content .j-downloadDocument small {
    color: var(--tsv-meta-color);
    font-size: 14px;
    line-height: 1.4;
}


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

#content a:link,
#content a:visited,
#sidebar a:link,
#sidebar a:visited {
    color: #0077c8;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

#content a:hover,
#content a:active,
#sidebar a:hover,
#sidebar a:active {
    color: #00548c;
    text-decoration: none;
}


/* ---------------------------------------------------------
   Listen
   --------------------------------------------------------- */

#content ul,
#content ol {
    margin: 0 0 22px;
    padding-left: 28px;
}

#content li {
    margin-bottom: 8px;
    line-height: 1.6;
}


/* ---------------------------------------------------------
   Tabellen
   --------------------------------------------------------- */

#content table {
    color: var(--tsv-text-color);
    font-family: var(--tsv-font-body);
    font-size: 16px;
    line-height: 1.5;
}

#content th {
    color: var(--tsv-heading-color);
    font-family: var(--tsv-font-display);
    font-size: 16px;
    font-weight: 700;
}

#content td {
    font-size: 16px;
}


/* ---------------------------------------------------------
   Bildunterschriften und Metatext
   --------------------------------------------------------- */

#content .j-imageSubtitle + .j-text {
    color: var(--tsv-meta-color);
    font-family: var(--tsv-font-body) !important;
    font-size: 14px !important;
    line-height: 1.22 !important;
}

#content .j-imageSubtitle + .j-text p {
    margin: 0 0 3px !important;
    font-size: 14px !important;
    line-height: 1.22 !important;
}


/* ---------------------------------------------------------
   Formulare und Buttons
   --------------------------------------------------------- */

#content input[type="text"],
#content input[type="email"],
#content input[type="tel"],
#content input[type="date"],
#content input[type="number"],
#content textarea,
#content select {
    color: var(--tsv-text-color);
    font-family: var(--tsv-font-body);
    font-size: 16px;
    line-height: 1.5;
}

#content input[type="submit"],
#content button[type="submit"],
.mobile-menu-toggle {
    font-family: var(--tsv-font-display) !important;
    font-weight: 700;
    letter-spacing: 0.03em;
}


/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */

#contentfooter {
    font-family: var(--tsv-font-display);
    font-size: 13px;
    line-height: 1.55;
}


/* =========================================================
   43. TYPOGRAFIE – TABLET
   ========================================================= */

@media (max-width: 820px) {

    :root {
        --tsv-body-size: 17px;
        --tsv-body-line: 1.66;

        --tsv-h1-size: 32px;
        --tsv-h2-size: 25px;
        --tsv-h3-size: 21px;
        --tsv-h4-size: 18px;
    }

    #content h1,
    #content .j-header h1 {
        margin-bottom: 22px;
        padding-bottom: 16px;
    }

    #content h2,
    #content .j-header h2 {
        margin-top: 30px;
    }

    #navigation ul.mainNav1 > li > a {
        font-size: 14px !important;
    }

    #navigation ul.mainNav2 > li > a,
    #navigation ul.mainNav3 > li > a {
        font-size: 13px !important;
    }
}


/* =========================================================
   44. TYPOGRAFIE – SMARTPHONE
   ========================================================= */

@media (max-width: 560px) {

    :root {
        --tsv-body-size: 16px;
        --tsv-body-line: 1.62;

        --tsv-sidebar-size: 15px;
        --tsv-sidebar-line: 1.55;

        --tsv-h1-size: 28px;
        --tsv-h2-size: 23px;
        --tsv-h3-size: 20px;
        --tsv-h4-size: 18px;
    }

    #content .j-text p,
    #content .j-textWithImage p,
    #content .j-blog p,
    #content .j-blogarticle p {
        margin-bottom: 16px;
    }

    #content h1,
    #content .j-header h1 {
        margin-bottom: 20px;
        padding-bottom: 14px;
        letter-spacing: -0.02em;
    }

    #content h2,
    #content .j-header h2 {
        margin: 28px 0 13px;
    }

    #content h3,
    #content .j-header h3 {
        margin: 24px 0 12px;
    }

    #navigation ul.mainNav1 > li > a {
        font-size: 13px !important;
    }

    #navigation ul.mainNav2 > li > a,
    #navigation ul.mainNav3 > li > a {
        font-size: 12px !important;
    }

    #content .j-downloadDocument strong,
    #content .j-downloadDocument b {
        font-size: 17px;
    }

    #content .j-downloadDocument,
    #content .j-downloadDocument a {
        font-size: 15px !important;
    }
}


/* =========================================================
   45. TYPOGRAFIE – SEHR KLEINE SMARTPHONES
   ========================================================= */

@media (max-width: 380px) {

    :root {
        --tsv-h1-size: 26px;
        --tsv-h2-size: 22px;
        --tsv-h3-size: 19px;
    }

    #content {
        font-size: 16px !important;
    }
}