/* =========================================================
   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%;
}

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

#content .j-imageSubtitle {
    margin-bottom: 20px;
}

#sidebar .j-imageSubtitle {
    margin-bottom: 8px;
}


/* =========================================================
   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;
    }

}