/*
Theme Name: Flipper Theme
Author: Winni Riess
Version: 1.0
Author URI: https://wr-multimedia.com
Description: Theme für Schwimmschule Flipper
*/

@charset "UTF-8";

/* CSS fuer www.schwimmschule-flipper.de
Author: doris schneider - http://www.grafik-nach-mass.de
Version: 1.0, 01/12/2020
License: commercial, exclusive
License URI: http://www.schwimmschule-flipper.de */
/* --------------------------------------------------------------
01 Normalize & Reset
-------------------------------------------------------------- */
@import url("modern-normalize.css");
@import url("local-fonts.css");

/* --------------------------------------------------------------
02 Color Coding and other variables
-------------------------------------------------------------- */
:root {
    /* FLIPPER Orange */
    --color-01: rgba(236, 112, 0, 1);
    --color-01-01: rgba(241, 139, 0, 1);
    --color-01-02: rgba(246, 160, 0, 1);
    --color-01-03: rgba(250, 175, 42, 1);

    /* FLIPPER Blau */
    --color-02: rgba(17, 77, 143, 1);

    /* Himmelblau */
    --color-03: rgba(0, 136, 221, 1);
    --color-03-01: rgba(0, 136, 221, 0.5);

    /* Gelb */
    --color-04: rgba(249, 176, 0, 1);
    --color-04-01: rgba(249, 176, 0, 0.8);

    /* Dunkelblau */
    --color-05: rgba(0, 51, 153, 1);
    --color-05-01: rgba(0, 51, 153, 0.5);

    /* Türkis */
    --color-06: rgba(0, 153, 153, 1);
    --color-06-01: rgba(0, 153, 153, 0.5);

    /* Hellblau 01 */
    --color-07: rgba(204, 231, 248, 1);

    /* Hellblau 02 */
    --color-08: rgba(127, 195, 238, 1);

    /* Hellgrau */
    --color-09: rgba(153, 153, 153, 1);

    /* Weiss */
    --white: rgba(255, 255, 255, 1);
    --white-soft: rgba(255, 255, 255, 0.8);

    /* Dunkelgrau */
    --dark: rgba(51, 51, 51, 1);

    --overlay: rgba(0, 0, 0, 0.6);
    --transp: rgba(255,255,255,0);
}


/* --------------------------------------------------------------
03 Typo and Basic Styling
-------------------------------------------------------------- */
* {
    outline: none;
}

html {
    font-size: 62.5%;

    /* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */
    overflow-y: scroll;

    /* Keeps page centered in all browsers regardless of content height */
    -webkit-text-size-adjust: 100%;

    /* Prevents iOS text size adjust after orientation change, without disabling user zoom */
    -ms-text-size-adjust: 100%;

    /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
}

html,
header {
	/*background-color: rgba(0, 136, 221, 1);*/
    background-color: var(--color-03);
    background-image: -o-linear-gradient(bottom, var(--color-05) 0%, var(--color-03) 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(var(--color-05)), to(var(--color-03)));
    background-image: -o-linear-gradient(top, var(--color-05) 0%, var(--color-03) 100%);
    background-image: linear-gradient(to bottom, var(--color-05) 0%, var(--color-03) 100%);
}

html {
    background-attachment: fixed;
    background-repeat: no-repeat;
    height: 100%;
    scroll-behavior: smooth;
}

header {
    border-bottom: 5px solid var(--color-01);
}

body {
    font-family: 'Ubuntu', sans-serif;
}

footer {
    background: var(--white);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    background-color: var(--color-03);
    width: 100%;
    color: var(--white);
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.7em;
    text-transform: uppercase;
    font-weight: 500;
    padding: 0.5rem 1.5rem;
    margin-bottom: 1em;
    overflow: hidden;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
}

h3 {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.7em;
    padding: 0.15em 0.5em;
}

h4,
h5,
h6 {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.5em;
}

h5,
h6 { background: none;color: var(--white); padding: 0; }

p {
    color: var(--white);
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 1.6em;
    font-weight: 300;
    margin: 0;
    margin-bottom: 1em;
}

strong,
b {
    font-weight: 500;
}

small {
    font-size: 90%;
}

big {
    font-size: 125%;
}

ol,
ul {
    font-family: 'Ubuntu', sans-serif;
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 1.6em;
    font-weight: 300;
    margin: 0;
    padding: 0;
}

ul { list-style-type: none; }

#main li {margin-left:1.5rem;}

hr {
    background-color: var(--white);
    border: 0;
    height: 2px;
    margin-bottom: 1.5em;
}

iframe {
    display: block;
    width: 100%;
    min-height: 100%;
    border: none;
    overflow: auto;
}

img {
    display: block;
    height: auto;
    width: 100%;
}

mark { padding: 0.15em 0.25em; }

/* --------------------------------------------------------------
04 Form Elements
-------------------------------------------------------------- */
form {
    font-family: 'Ubuntu', sans-serif;
}

fieldset {
    border: none;
    padding: 0;
    margin-bottom: 1em;
}

input {
    background: var( --white);
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: normal;
    line-height: 1.6em;
    color: var(--dark);
    border: none;
    padding: 0.45em;
}

input[type='text'],
input[type='tel'],
input[type='email'],
input[type='password'] { width: 100%; }

input[type='text']:focus,
input[type='tel']:focus,
input[type='email']:focus,
input[type='password']:focus { background: var(--color-01-03); }

textarea {
    background: var( --white);
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: normal;
    line-height: 1.6em;
    color: var(--dark);
    border: none;
    padding: 0.75em;
    height: 100%;
    width: 100%;
}

select {
    display: block;
    background: var( --white) url(../images/icons/arrow-down.svg) no-repeat 98% center;
    background-size: 1em;
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: normal;
    line-height: 1.6em;
    padding: 0.75em;
    padding-right: 2.5em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    width: 100%;
}


option {
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: normal;
    line-height: 1.6em;
    padding: 0.75em;
}

button,
a.button,
input[type="button"],
input[type="reset"],
input[type="submit"],
p .more-link,
a.more-link {
    display: inline-block;
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: normal;
    line-height: 1.6em;
    background: var( --color-01);
    color: var( --white) !important;
    padding: 0.25em 1em ;
    border: none;
    border-radius: 0.25em;
	margin: 2em 0;
	cursor: pointer
}

button strong,
a.button strong,
p .more-link strong,
a.more-link strong  { color: var( --white) !important; }

button:hover,
a.button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
p .more-link:hover,
.more-link:hover,
button:focus,
a.button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
p .more-link:focus,
.more-link:focus,
button:active,
a.button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active,
p .more-link:active,
.more-link:active {
    background: var( --color-04);
    color: var( --white) !important;
}

.wpcf7 {}
.wpcf7 label br { display: none; }
.wpcf7 label { 
    background: var(--color-03);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
	-ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    font-size: 14px;
    font-size: 1.4rem;
    color: var(--white);
    font-weight: 500;
    text-transform: uppercase;
    padding-left:0.5em;
}

.wpcf7 label span {flex: 0 0 100%;}

.wpcf7 label.textarea { 
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
        align-items: stretch;
    }

.wpcf7 label.textarea textarea {width: 100%;}

.wpcf7-checkbox label {background: var(--color-03);padding: 0.5em; margin-bottom: 2px;}
.wpcf7-checkbox input[type='checkbox'] { width: 1.6em; height: 1.6em; }
.wpcf7-list-item { display: block;margin: 0;}



.wpcf7 span.intro-label { 
    background: var(--color-03);
    display: inline-block;
    width: auto;
    font-size: 14px;
    font-size: 1.4rem;
    color: var(--white);
    font-weight: 500;
    text-transform: uppercase;
    padding:0.5em;
    margin-bottom: 2px;
}
.wpcf7 span.intro-label + br { display: none;}



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

a { text-decoration: none; }

nav.menu-social-container {
    position: absolute;
    top: 1.25em;
    right: 1em;
    width: 100%;
}

nav.menu-social-container a {
    text-decoration: none;
    color: var(--white);
}

nav.menu-social-container ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    margin: 0;
}

nav.menu-social-container ul li a {
    display: block;
    position: relative;
    color: var(--transp);
    font-size: 12px;
    font-size: 1.2rem;
    width: 24px;
    margin-right: 2em;
}

nav.menu-social-container ul li a::after {
    position: absolute;
    top: 0;
    right: 0;
    font-family: "Font Awesome 5 Brands";
    font-weight: 400;
    font-size: 24px;
    font-size: 2.4rem;
    color: var(--white);
}

nav.menu-social-container ul li a:hover::after {
    color: var(--color-09);
}

nav.menu-social-container ul li a[href*="facebook"]::after {
    content: '\f082';
}

nav.menu-social-container ul li a[href*="twitter"]::after {
    content: '\f099';
}

nav.menu-social-container ul li a[href*="instagram"]::after {
    content: '\f16d';
}

.menu-button {
    background: none !important;
    border-bottom: none !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
}

.menu-button:after {
    font-family: "Font Awesome 5 Free";
	font-weight: 900;
    content: '\f0c9';
    color: var(--white);
    font-size: 2.4em;
    font-style: normal;
    position: absolute;
    right: 0.5em;
    top: 0.5em;
    cursor: pointer;
    z-index: 50000;
}

nav.menu-primary-container {
    position: relative;
    width: 100%;
    z-index: 50000;
}

nav.menu-primary-container a {
    text-decoration: none;
}

nav.menu-primary-container ul {
    margin: 0;
}

nav.menu-primary-container ul li {
    background: var(--color-01);
    color: var(--white);
}

nav.menu-primary-container ul li ul li {
    background: var(--color-01-01);
}

nav.menu-primary-container ul li ul li ul li {
    background: var(--color-01-02);
}

nav.menu-primary-container ul li ul li ul li ul li {
    background: var(--color-01-03);
}

nav.menu-primary-container ul li ul,
nav.menu-primary-container ul li ul li ul,
nav.menu-primary-container ul li ul li ul li ul {
    display: none;
}

nav.menu-primary-container ul li a {
    position: relative;
    display: block;
    width: 100%;
    font-weight: 500;
    font-size: 14px;
    font-size: 1.4rem;
    text-transform: uppercase;
    color: var(--white);
    padding: 0.5em;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    border-bottom: 1px solid var(--transp);
}

nav.menu-primary-container ul li a:hover,
nav.menu-primary-container ul li a:focus {
    background: var(--color-04) !important;
}

nav.menu-primary-container ul li a.current {
    background: var(--color-04) ;
}

nav.menu-primary-container ul li ul li ul li a {
    padding-left: 1em;
}

nav.menu-primary-container ul li > a:after {
    font-family: "Font Awesome 5 Free";
	font-weight: 900;
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    content: '\f078';
}

nav.menu-primary-container ul li > a:only-child:after {
    display: none !important;
}

/* Responsive Navigation with Slicknav WP Plugin */
			.slicknav_menu {
				padding: 0;
			}

			.slicknav_nav ul {
				margin: 0;
			}

			.slicknav_nav .slicknav_row,
			.slicknav_nav a {
				margin: 0 !important;
				padding: 0.5em !important;
			}

			.slicknav_nav .slicknav_row:hover,
			.slicknav_nav .slicknav_row:focus,
			.slicknav_nav .slicknav_row:active,
			.slicknav_nav a:hover,
			.slicknav_nav a:focus,
			.slicknav_nav a:active {
				border-radius: 0;
			}

			.slicknav_nav a > a {
				margin: 0 !important;
				padding: 0.5em 0 !important;
			}

			.slicknav_nav li {
				background: var(--color-01);
			}

			.slicknav_nav li ul li {
				background: var(--color-01-01);
			}

			.slicknav_nav li ul li ul li {
				background: var(--color-01-02);
			}

			.slicknav_nav li ul li ul li ul li {
				background: var(--color-01-03);
			}

			.slicknav_nav .slicknav_arrow {
				color: var(--transp);
				font-size: 1em;
			}

			.slicknav_nav .slicknav_arrow:hover,
			.slicknav_nav .slicknav_arrow:focus,
			.slicknav_nav .slicknav_arrow:active {
				color: var(--transp);
			}

			.slicknav_nav .slicknav_arrow::after {
			    font-family: "Font Awesome 5 Free";
				font-weight: 900;
				content: '\f078';
				color: var(--white);
				padding-right: 1em;
			}

nav.menu-secondary-container {
}

nav.menu-secondary-container a {
    text-decoration: none;
}

nav.menu-secondary-container ul li {
    background: var(--color-01);
    color: var(--white);
}

nav.menu-secondary-container ul li a {
    position: relative;
    display: block;
    width: 100%;
    font-weight: 500;
    font-size: 14px;
    font-size: 1.4rem;
    text-transform: uppercase;
    color: var(--white);
    padding: 0.5em 1.5em;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
}

nav.menu-secondary-container ul li a[target="_blank"]::after {
    margin-left: 1em;
    font-family: "Font Awesome 5 Free";
	font-weight: 900;
    content: '\f061';
}

nav.menu-legal-container {
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: 500;
    width: 100%;
}

nav.menu-legal-container ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    width: 100%;
}

nav.menu-legal-container li {
    display: block;
    width: auto;
}

nav.menu-legal-container a {
    display: block;
	font-weight: 600;
    text-decoration: none;
    color: var(--color-02);
    padding: 0.5em 1em;
}

nav.menu-legal-container a:hover {
    color: var(--dark);
}

/* --------------------------------------------------------------
06 Layout Basics
-------------------------------------------------------------- */
#wrapper {
    width: 100%;
    height: 100%;
}

#site {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    min-height: 100vh;
    height: 100vh;
    max-width: 1600px;
    margin: 0 auto;
}

header,
main,
footer {
    width: 100%;
}

header {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    padding: 1em;
    padding-top: 5em;
}

.site-logo {
    width: 24vw;
    height: auto;
    margin: 0;
}

.site-logo img {
    width: 100%;
    height: auto;
}

.site-title {
    display: none;
}

.site-claim {
    display: block;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    height: auto;
    text-align: left;
    padding-left: 2em;
}

.site-claim span {
    display: inline-block;
    background-color: var(--color-03);
    font-size: 4vw;
    color: var(--white);
    font-weight: 500;
    padding: 0.15em 0.5em;
}

.site-claim span + br + span {
    margin-top: 0.25em;
    margin-left: 1.5em;
}

.site-search {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 2em;
    height: 2em;
    text-align: center;
    font-size: 20px;
    font-size: 2rem;
    padding: 0;
}

.site-search form {}

.site-search input[type="search"] {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--transp);
    color: var(--transp);
    width: 2em;
    height: 2em;
    text-align: center;
    font-size: 20px;
    font-size: 2rem;
    padding: 0;
    border: none;
    z-index: 20000;
    cursor: pointer;
    -webkit-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}

.site-search input[type="search"]::-webkit-input-placeholder {color: var(--transp);}
.site-search input[type="search"]::-moz-placeholder {color: var(--transp);}
.site-search input[type="search"]:-ms-input-placeholder {color: var(--transp);}
.site-search input[type="search"]::-ms-input-placeholder {color: var(--transp);}
.site-search input[type="search"]::placeholder {color: var(--transp);}

.site-search input[type="submit"] {
    text-align: center;
    font-family: "Font Awesome 5 Free";
	font-weight: 900;
    background-color: var(--transp);
    color: var(--white);
    font-size: 20px;
    font-size: 2rem;
    padding: 0.25em;
    cursor: pointer;
}

.site-search input[type="search"]:focus {
    width: 12em;
    height: 2em;
    right: 2em;
    background: var(--white);
    color: var(--dark);
    border-radius: 0;
}

.site-search input[type="search"]:focus::-webkit-input-placeholder {color: var(--dark);}
.site-search input[type="search"]:focus::-moz-placeholder {color: var(--dark);}
.site-search input[type="search"]:focus:-ms-input-placeholder {color: var(--dark);}
.site-search input[type="search"]:focus::-ms-input-placeholder {color: var(--dark);}
.site-search input[type="search"]:focus::placeholder {color: var(--dark);}

#main {
    position: relative;
	-webkit-box-flex: 1;
    -ms-flex: 1;
        flex: 1;
    padding-top: 2em;
}

.content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding: 1em 0 0 0 ;
}

footer img {
    width: auto;
    height: 9vw;
    margin: 0 1vw;
}

footer img::first-of-type {
    margin-left: 0;
}

footer img::last-of-type {
    margin-right: 0;
}

.sponsoren,
.zertifikate,
.legal {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    padding: 0.75em 0.5em;
}

.legal {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    width: 100%;
}

.legal p {
    color: var(--color-02);
    font-weight: bold;
    text-align: center;
    padding: 0.5em 1em;
    margin: 0;
}

/* --------------------------------------------------------------
07 Homepage Styling
-------------------------------------------------------------- */


                /* Pure CSS Slider, fest definiert für 6 Bilder! */

                @-webkit-keyframes slider-animation {
                    from { left: 0;}
                    to {left: -100%;}
                }

                @keyframes slider-animation {
                    from { left: 0;}
                    to {left: -100%;}
                }

                .slideshow {
                    position: relative;
                    width: 100%;
                    overflow-x: hidden;
                }

                .slideshow ul {
                    list-style: none;
                    position: relative;
                    width: 100%;
                    white-space: nowrap;
                    margin: 0;
                    padding: 0;
                    -webkit-animation: slider-animation 12s ease-in-out 3s infinite alternate; /* Safari 4.0 - 8.0 */
                    animation: slider-animation  12s ease-in-out 3s infinite alternate;
                }

                .slideshow ul:hover {
                    -webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
                    animation-play-state: paused;
                }  

                .slideshow ul li {
                    display: inline-block;
                    width: calc(100%/12*4);
                    position: relative;
                    margin: 0 -2px;
                }

                /* Bilder responsive */
                .slideshow ul img {
                    display: block;
                    width: 100%;
                    height: auto;
                    border: none;
                    margin: 0;
                    padding: 0;
                }

                /* Sponsoring/Sportbotschafter */

                .sportbotschafter {
                    position: fixed;
                    width: 100%;
                    z-index: 100000;
                    bottom: 0;
                    left: 0;
                }

                .js-off .sportbotschafter { position: relative;display: block; }

                .sportbotschafter p {
                    background-color: var(--color-03);
                    width: 100%;
                    color: var(--white);
                    text-align: center;
                    top: -1em;
                    padding: 0.5em;
                    border: 3px solid var(--white);
                    border-radius: 0.5em;
                    margin-bottom: 1em;
                }
                

                .presse h3 { background: var(--color-05)}


                /* Homepage Kursmenues */

                .home-menues { 
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -ms-flex-wrap: wrap;
                        flex-wrap: wrap;
                    -webkit-box-align: start;
                        -ms-flex-align: start;
                            align-items: flex-start;
                    width: 100%;
                 }

                 .home-menues article { padding-left: 0 !important;}

                 .home-menues details { position: relative; width: 100%;}   
       
                 .home-menues summary {
                    list-style: none;
                    position: relative;
                    display: block;
                    width: 100%;
                    font-weight: 500;
                    font-size: 14px;
                    font-size: 1.4rem;
                    text-transform: uppercase;
                    color: var(--white);
                    padding: 0.5em;
                    -o-text-overflow: ellipsis;
                       text-overflow: ellipsis;
                    border-bottom: 1px solid var(--transp);
                    cursor: pointer;
                    }
 
                    /* Style für Webkit-Browser */
                    summary::-webkit-details-marker {
                    display: none; /* Triangle not shown */
                    }
                    summary::before {
                    margin-right: 1em;
                    font-family: "Font Awesome 5 Free";
                    font-weight: 900;
                    content: '\f078';
                    }

                    details[open] summary::before {
                    margin-right: 1em;
                    font-family: "Font Awesome 5 Free";
                    font-weight: 900;
                    content: '\f077';
                    }

                .home-menues details.menu-kinderschwimmkurse summary { background-color: var(--color-01); }      
                .home-menues details.menu-erwachsenenschwimmkurse summary { background: var(--color-03); }      
                .home-menues details.menu-aquafitnesskurse summary { background: var(--color-05); }      
                .home-menues details.menu-technikkurse summary { background: var(--color-06); }      
                .home-menues details.menu-standorte summary { background: var(--color-04); }   

                .home-menues nav { position: relative; width: 100%;}              
                .home-menues nav ul { width: 100%; }
                .home-menues nav ul li { width: 100%; color: var(--white); }      
                .home-menues nav ul.menu-kinderschwimmkurse li {  background: var(--color-01-01); }      
                .home-menues nav ul.menu-erwachsenenschwimmkurse li {  background: var(--color-03-01); }      
                .home-menues nav ul.menu-aquafitnesskurse li {  background: var(--color-05-01); }      
                .home-menues nav ul.menu-technikkurse li {  background: var(--color-06-01); }      
                .home-menues nav ul.menu-standorte li {  background: var(--color-04-01); }      
    
                .home-menues nav ul li a {
                    position: relative;
                    display: block;
                    width: 100%;
                    font-weight: 500;
                    font-size: 14px;
                    font-size: 1.4rem;
                    text-transform: uppercase;
                    color: var(--white);
                    padding: 0.5em;
                    -o-text-overflow: ellipsis;
                       text-overflow: ellipsis;
                    border-bottom: 1px solid var(--transp);
                }
                
                .home-menues nav ul li a:hover,
                .home-menues nav ul li a:focus { background: var(--color-04) !important; }

                .home-menues details[open] summary ~ * { 
                    -webkit-animation: sweep .3s ease-in-out;
                    animation: sweep .3s ease-in-out; 
                    } 
                    @-webkit-keyframes sweep { 
                        0% {opacity: 0;} 
                        100% {opacity: 1; } 
                    } 
                    @keyframes sweep { 
                        0% {opacity: 0;} 
                        100% {opacity: 1; } 
                    }



/* --------------------------------------------------------------
08 Loop, Page and Post Styling
-------------------------------------------------------------- */

.content .page-title {
    width: 100%;
    margin: 0;
    margin-bottom: 1em;
}

.content article {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    width: 100%;
    padding: 1.5em;
}

.content aside.sidebar { width: 100%;padding: 1.5em;}
.content aside.sidebar article { 
    background: var(--white);
    padding: 0;
    margin-bottom: 2em;
    }
.content aside.sidebar article h2,
.content aside.sidebar article h3 { width: 100%;margin: 0; margin-bottom: 1em;}
.content aside.sidebar article p { width: 100%;color: var(--dark);padding: 0 1em;}
.content aside.sidebar article p br { width: 100%;display: block;margin-bottom: 0.25em;}

.content aside.sidebar article p a { color: var(--color-05); font-weight: 700;}
.content aside.sidebar article p a:hover,
.content aside.sidebar article p a:focus,
.content aside.sidebar article p a:active { color: var(--color-09); font-weight: 700;}
.content aside.sidebar article .more-link { margin: 1em; }

.content aside.sidebar #news p.iframe { font-size: 1.6rem;padding: 0;margin: 0;margin-top: -1em; }
.content aside.sidebar #news p.iframe + p { margin-top: 2em; }

.content aside.sidebar img.size-full { width: calc(100% + 2em); margin: -1.1em -1em 1em -1em;}


.post-thumbnail { width: 100%; margin-bottom: 2em;}
.post-thumbnail img {
    width: 100%;
    height: auto;
    border: 3px solid var(--white);
    border-radius: 0.5em;
}

.entry {width: 100%;padding: 2rem 0;}
.entry a { color: var(--white); font-weight: 700;}
.entry a:hover,
.entry a:focus,
.entry a:active { color: var(--color-09); font-weight: 700;}

.entry a[target='_blank'] {
    background-color: var(--color-03);
    color: var(--white);
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.7em;
    font-weight: 500;
    padding: 0.25em 0.75em;
    margin-bottom: 1em;
    overflow: hidden;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
}

.entry a[target='_blank']:hover,
.entry a[target='_blank']:focus,
.entry a[target='_blank']:active { background-color: var(--color-04);}

.entry h1,
.entry h2,
.entry h3,
.entry h4,
.entry h5,
.entry h6 {
    display: inline-block;
    margin-top: 2em;
}

.entry ul,
.entry ol { margin: 2em 1em;}

.entry li { color: var(--white);}

.entry ul li::before {     
	margin-right: 1em;
    font-family: "Font Awesome 5 Free";
	font-weight: 900;
    content: '\f061';
}

.entry img { 
    /*background: var(--white);
    border: 4px solid var(--white);
    border-radius: 0.5em;*/
    margin-bottom: 3em;
}

/*.entry table,
.entry table tr,
.entry table td { border: none; font-size: 1.5rem !important;font-weight: 300;}

.entry table tr:nth-of-type(odd) {background:rgba(0, 0, 0, 0.1);}
.entry table tr:first-of-type {background:rgba(255, 255, 255, 0.2); font-weight: 400;}*/

.die-baderegeln .wp-block-image .aligncenter { margin: 0 !important;}
.die-baderegeln figure img { background: var(--white);max-width: 70%;border: 5px solid var(--white);margin: 0 auto;}
.die-baderegeln figcaption { 
	font-size: 1.5rem ;
	font-weight: 400;
	color: var(--white);
	text-align: center;
	text-transform: uppercase;
	line-height: 1.6em;
	margin-top: 2rem;
}


.the-loop {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 100%;
}

.the-loop .post-title,
.the-loop .loop-item,
.the-loop .post-thumbnail,
.the-loop .post-meta,
.the-loop .post-excerpt,
.the-loop .post-content { width: 100%;}
.the-loop .loop-item {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
		-ms-flex-direction: column;
			flex-direction: column;
 }

.the-loop .post-title {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.7em;
    margin: 0;
}

.the-loop .post-thumbnail {
	-webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
        order: 0;
        margin-bottom: 0;
}
.the-loop .post-thumbnail img {border: none;border-radius: 0;}
.the-loop .post-meta { background: var(--white); padding: 1em; }

.post-meta a { color: var(--color-05); font-weight: 700;}
.post-meta a:hover,
.post-meta a:focus,
.post-meta a:active { color: var(--color-09); font-weight: 700;}

.the-loop .post-excerpt {
	display: block;
	-webkit-box-flex: 1;
	    -ms-flex-positive: 1;
	        flex-grow: 1;
	background: var(--white);
	padding: 1em;
}

.the-loop p { 
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; 
    -ms-flex-wrap: wrap; 
        flex-wrap: wrap;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
            margin: 0;
            margin-bottom: 2em;
}

.the-loop .post-excerpt p {color: var(--dark);}
.the-loop .post-excerpt strong,
.the-loop .post-excerpt b {color: var(--color-05);}

.the-loop .loop-item p a {color: var(--color-05);}
.the-loop .loop-item p a:hover,
.the-loop .loop-item p a:active,
.the-loop .loop-item p a:focus {color: var(--dark); }


p .more-link,
.more-link { 
    -ms-flex-item-align: end;
    align-self: flex-end;
    margin: 2em 0 -1em 0;
}


.search-results .navigation { width: 100%;}
.search-results .navigation .nav-links { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around;width: 100%;font-size: 16px; font-size: 1.6rem;font-weight: bold; color: var(--white)}
.search-results .navigation .nav-links .prev,
.search-results .navigation .nav-links .next { -webkit-box-flex: 0; -ms-flex: 0 0 20%; flex: 0 0 20%;}
.search-results .navigation .nav-links .prev { text-align: right;}



.single-page .post-content { width: 100%; }

/* Special Links */

.content a[target="_blank"]::after {
    margin-left: 0.5em;
    font-family: "Font Awesome 5 Free";
	font-weight: 900;
    content: '\f061';
}

.content a[href^='mailto'],
.content a.mail { 
    background-color: var(--color-03);
    color: var(--white) !important;
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.7em;
    font-weight: 500;
    padding: 0.25em 0.75em;
    margin-bottom: 1em;
    overflow: hidden;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
 }

.content a[href^='mailto']:hover,
.content a[href^='mailto']:focus,
.content a[href^='mailto']:active,
.content a.mail:hover,
.content a.mail:focus,
.content a.mail:active { background-color: var(--color-04);color: var(--white) !important;}


/* Widgets */

.widget {
    margin-bottom: 2em;
}

.widgettitle { margin: 0; }

.widget ul {}

.widget .textwidget,
.widget .custom-html-widget {
    background: var(--white);
    padding: 10px; padding: 1rem;
    margin-bottom: 1em;
}

.widget p {
    color: var(--dark);
}

.widget a {
    color: var(--dark);
    text-decoration: underline;
}

.widget a:hover,
.widget a:focus,
.widget a:active {
    color: var(--color-05);
    text-decoration: none;
}

.widgert li { padding: 10px; padding: 1rem; }

.widget li a {
    color: var(--color-05);
    font-weight: 700;
    text-decoration: none;
    margin-bottom: 1em;
}

.widget li a::before {
    margin-right: 1em;
    font-family: "Font Awesome 5 Free";
	font-weight: 900;
    content: '\f061';
}

.widget li a:hover,
.widget li a:focus,
.widget li a:active,
.widget li a:hover::before,
.widget li a:focus::before,
.widget li a:active::before { color: var(--color-09); }

.widget img { width: 100%; height: auto; }


/* -------------------------
Specials
------------------------- */

/* Tabs Spielend Schwimmen lernen */

.thebutton { display: block;width: 100%;}

.thebutton a { 
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; 
    -ms-flex-wrap:wrap; 
        flex-wrap:wrap;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%; 
    height: 4em;
    background: var(--color-03);
    color: var(--white);
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.6em;
    text-align: center;
    border: 1px solid var(--white);
    margin-bottom: 1em;
 }

 .thebutton a:hover,
 .thebutton a:active,
 .thebutton a:focus  { background: var(--overlay); color: var(--white); }
 .thebutton a br { display: none; }

 div[id^="win"] ul { 
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
     margin-left: 0;
     } 

 div[id^="win"] li { 
    display: inline-block;
    background-color: var(--color-03);
    color: var(--white);
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.7em;
    text-transform: uppercase;
    font-weight: 500;
    padding: 0.25em 0.75em;
    margin-bottom: 1em;
    overflow: hidden; 
}

/* Presse */

#mitteilungen { border-bottom: 2px solid var(--white); }

/* Maps */

.awmp-map { margin-bottom: 2em;border: none;}


/* --------------------------------------------------------------
09 Single Post und Custom Post Type Styling
-------------------------------------------------------------- */

.single .post-content img.alignleft { float: left; max-width: 30%; margin: 1% 3% 1% 0;}
.single .post-content img.alignright { float: right; max-width: 30%; margin: 1% 0 1% 3%;}

body:not(.page-template-index) .single-page .page-title,
body:not(.page-template-index) .single-page .post-thumbnail { margin-bottom: 0;}
body:not(.page-template-index) .single-page .post-thumbnail img { border: none; border-radius: 0;}
body:not(.page-template-index) .single-page .post-content { background: var(--white); padding: 1.5rem; }
body:not(.page-template-index) .single-page .post-content p { color: var(--dark); }
body:not(.page-template-index) .single-page .post-content ul { margin-bottom: 1em; }
body:not(.page-template-index) .single-page .post-content a { color: var(--color-05); font-weight: 700;}
body:not(.page-template-index) .single-page .post-content a:hover,
body:not(.page-template-index) .single-page .post-content a:focus,
body:not(.page-template-index) .single-page .post-content a:active { color: var(--color-09); font-weight: 700;}
body:not(.page-template-index) .single-page .post-content a.button { color: var(--white);}
body:not(.page-template-index) .single-page .post-content a.button:hover,
body:not(.page-template-index) .single-page .post-content a.button:focus,
body:not(.page-template-index) .single-page .post-content a.button:active { color: var(--white);}
body:not(.page-template-index) .single-page .post-content strong,
body:not(.page-template-index) .single-page .post-content b {color: var(--color-05);}

body.page-template-fullsize {}
body.page-template-fullsize .entry img { 
    float: none; 
    width: 100%;
    height: auto;
    margin: 0;
    border: none;
    border-radius: 0;
}


.kurstyp-kinderschwimmkurse h1,
.kurstyp-kinderschwimmkurse h2,
.kurstyp-kinderschwimmkurse h3,
.kurstyp-kinderschwimmkurse h4,
.kurstyp-kinderschwimmkurse .kurstyp-list .kurstyp-post-title,
.term-kinderschwimmkurse .page-title,
.term-kinderschwimmkurse .post-title { background: var(--color-01); }
.kurstyp-kinderschwimmkurse .kurstyp-list .kurstyp-post-title:hover { background: var(--color-01-01);}

.kurstyp-erwachsenenschwimmkurse h1,
.kurstyp-erwachsenenschwimmkurse h2,
.kurstyp-erwachsenenschwimmkurse h3,
.kurstyp-erwachsenenschwimmkurse h4,
.kurstyp-erwachsenenschwimmkurse .kurstyp-list .kurstyp-post-title,
.term-erwachsenenschwimmkurse .page-title,
.term-erwachsenenschwimmkurse .post-title { background: var(--color-03); }
.kurstyp-erwachsenenschwimmkurse .kurstyp-list .kurstyp-post-title:hover { background: var(--color-03-01);}

.kurstyp-aquafitnesskurse h1,
.kurstyp-aquafitnesskurse h2,
.kurstyp-aquafitnesskurse h3,
.kurstyp-aquafitnesskurse h4,
.kurstyp-aquafitnesskurse .kurstyp-list .kurstyp-post-title,
.term-aquafitnesskurse .page-title,
.term-aquafitnesskurse .post-title { background: var(--color-05); }
.kurstyp-aquafitnesskurse .kurstyp-list .kurstyp-post-title:hover { background: var(--color-05-01);}

.kurstyp-technikkurse h1,
.kurstyp-technikkurse h2,
.kurstyp-technikkurse h3,
.kurstyp-technikkurse h4,
.kurstyp-technikkurse .kurstyp-list .kurstyp-post-title,
.term-technikkurse .page-title,
.term-technikkurse .post-title { background: var(--color-06);}
.kurstyp-technikkurse .kurstyp-list .kurstyp-post-title:hover { background: var(--color-06-01);}

/* Farbvarianten Buttons */

.kurstyp-kinderschwimmkurse a.button { background: var(--color-01);}
.kurstyp-kinderschwimmkurse a.button:hover { background: var(--color-01-01);}
.kurstyp-kinderschwimmkurse button { background: var(--color-01);}
.kurstyp-kinderschwimmkurse button:hover { background: var(--color-01-01) }

.kurstyp-erwachsenenschwimmkurse a.button { background: var(--color-03); }
.kurstyp-erwachsenenschwimmkurse a.button:hover { background: var(--color-03-01); }
.kurstyp-erwachsenenschwimmkurse button { background: var(--color-03); }
.kurstyp-erwachsenenschwimmkurse button:hover { background: var(--color-03-01); }

.kurstyp-aquafitnesskurse a.button { background: var(--color-05); }
.kurstyp-aquafitnesskurse a.button:hover { background: var(--color-05-01); }
.kurstyp-aquafitnesskurse button { background: var(--color-05); }
.kurstyp-aquafitnesskurse button:hover { background: var(--color-05-01); }

.kurstyp-technikkurse a.button { background: var(--color-06); }
.kurstyp-technikkurse a.button:hover { background: var(--color-06-01); }
.kurstyp-technikkurse button { background: var(--color-06);; }
.kurstyp-technikkurse button:hover { background: var(--color-06-01); }


/* Highlight-Farben für Links im Content */

.highlight-01,
.highlight-02,
.highlight-03,
.highlight-04,
.highlight-05,
.highlight-06 { display:inline-block; width: auto;color: var(--white) !important; font-weight: bold;text-transform: uppercase;padding: 0.25em 0.75em;}

.highlight-01 { background: var(--color-01);}
.highlight-02 { background: var(--color-02);}
.highlight-03 { background: var(--color-03);}
.highlight-04 { background: var(--color-04);}
.highlight-05 { background: var(--color-05);}
.highlight-06 { background: var(--color-06);}

a[class^='highlight-'] { display:inline-block; width: auto;color: var(--white) !important;font-weight: bold;text-transform: uppercase;padding: 0.25em 0.75em;}
a[class^='highlight-']:hover,
a[class^='highlight-']:active,
a[class^='highlight-']:focus { background: var(--color-04-01);}



/* Kurstyp Listing Sidebar */

.kurstyp-list ul { display: -webkit-box; display: -ms-flexbox; display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap; width: 100%; }
.kurstyp-list li { display: -webkit-box; display: -ms-flexbox; display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column; width: 100%; margin-bottom: 1em; }
.kurstyp-list li a::before { display: none; }
.kurstyp-list .kurstyp-post-thumbnail {}
.kurstyp-list .kurstyp-post-title { 
    color: var(--white);
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 1.6em;
    text-transform: uppercase;
    font-weight: 500;
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    padding: 0.5em 0.75em;
}

.kurstyp-list .kurstyp-post-title a { color: var(--white);}
.kurstyp-list .kurstyp-post-title a:hover,
.kurstyp-list .kurstyp-post-title a:active,
.kurstyp-list .kurstyp-post-title a:focus { color:var(--white);}

.content aside.sidebar .kurstyp-list .kurstyp-post-thumbnail img { width: 100%; height: auto; }


/* --------------------------------------------------------------
10 Media Queries - Mobile First
-------------------------------------------------------------- */

@media only screen and (min-width: 480px) {

    header { padding: 2em; }
    /*.entry img { float: right; width: 30%;height:auto;margin: 0 0 3em 3em;}*/
    div[id^="win"] p { overflow: hidden; }

    .content aside.sidebar img { width: 45%; float:right;margin-left: 1em;}
    .content aside.sidebar img.size-full { float:none;}
}

@media only screen and (min-width: 600px) {

    .sportbotschafter { width: calc(100%/12*4);}

    .home-menues article {width: calc(100%/12*6)}

    /*.entry img { width: 20%;}*/


    .post-thumbnail {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
        width: calc(100%/12*4);
    }

    .post-content {
        width: calc(100%/12*8);
        padding-right: 2vw;
    }

    .single-page { position: relative; }
    .single-page .post-thumbnail { position: absolute;top: 2em;right: 0; }
    body:not(.page-template-index) .single-page .post-thumbnail img { border: 3px solid var(--white); border-radius: 0.5em;}
    body:not(.page-template-index) .single-page .page-title,
    body:not(.page-template-index) .single-page .post-content { width: 95%; /*padding-right: calc(100%/12*4);*/}
	body:not(.page-template-index) .single-page .post-thumbnail + .post-content p,
	body:not(.page-template-index) .single-page .post-thumbnail + .page-title + .post-content p { padding-right: calc(100%/12*4); }
	body:not(.page-template-index) .single-page .post-thumbnail + .post-content h3 + p { padding-right: 0; }
	body:not(.page-template-index) .single-page .post-thumbnail + .post-content h3 + p { padding-right: 0; }
	body:not(.page-template-index) .single-page .post-content h3,
	body:not(.page-template-index) .single-page .post-content h4,
	body:not(.page-template-index) .single-page .post-content h5 { margin: 1em -1em;width: calc(100% + 2em);}

    body:not(.page-template-index) .single-page .kurstyp-list li { width: calc(100%/3); padding: 0.5em; }

    .single-page .post-thumbnail + .page-title { width: 95%; padding-right: calc(100%/12*4);margin-top: 3em;}
    .single-page .post-thumbnail + .page-title + .entry { width: 95%; padding-right: calc(100%/12*4);}

    body.home .single-page { padding-top: 1.5rem;}
    body.home .single-page .page-title { width: 100%; padding-right: 1.5rem;}

    body.page-template-global .single-page { padding-top: 0; }
	
	body.page-template-fullsize .single-page .post-thumbnail { width: calc(100%/12*3); }
	body.page-template-fullsize .single-page .page-title,
	body.page-template-fullsize .single-page .post-content { width: 95%;}

    .the-loop .loop-item {
        width: calc(100%/2);
    }

    .content aside.sidebar img { width: 30%; float:right;}
	
    .wpcf7 { width: 95%;}
	.wpcf7 label span { -ms-flex-preferred-size: 80%;flex-basis: 80%; }
	.wpcf7 label { 	-ms-flex-wrap: nowrap; flex-wrap: nowrap; }


    /* Tabs Spielend Schwimmen lernen */

    .thebutton { display: inline-block;width: 33%; }

    /* Buchung */

    .buchung { width: 95%;}


}

@media only screen and (min-width: 900px) {
    header {
        border-bottom: none;
        padding: 2em;
    }

   .site-logo {
        width: 17vw;
    }

    .site-claim {
        margin-left: 3vw;
    }

    .site-claim span {
        font-size: 3vw;
    }

    .menu-button {
        display: none;
    }

    nav.menu-primary-container ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }

    nav.menu-primary-container ul li {
        position: relative;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        white-space: nowrap;
    }
	
	nav.menu-primary-container ul li a { font-size: 12px; font-size: 1.2rem; }

    nav.menu-primary-container ul li ul {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        display: none;
        position: absolute;
    }

    nav.menu-primary-container ul li ul li {
        position: relative;
        display: block;
        white-space: normal;
    }

    nav.menu-primary-container ul li ul li ul {
        display: block;
        position: absolute;
        top: 0;
        left: 100%;
    }

    nav.menu-primary-container ul li ul li ul li {
        position: relative;
        display: block;
        white-space: normal;
    }

    nav.menu-primary-container ul li ul li ul li ul {
        display: block;
        position: absolute;
        top: 0;
        left: 100%;
    }

    nav.menu-primary-container ul li ul li ul li ul li {
        position: relative;
        width: auto;
        white-space: normal;
    }

    nav.menu-primary-container ul li ul li > a {
        padding-right: 1.5em;
    }

    nav.menu-primary-container ul li ul li > a:after {
        content: '\f054';
        right: 0.5em;
    }

    nav.menu-primary-container ul li:hover ul {
        display: block;
    }

    nav.menu-primary-container ul li:hover ul li ul {
        display: none;
    }

    nav.menu-primary-container ul li ul li:hover ul {
        display: block;
    }

    nav.menu-primary-container ul li ul li:hover ul li ul {
        display: none;
    }

    nav.menu-primary-container ul li ul li ul li:hover ul {
        display: block;
    }

    nav.menu-primary-container ul li ul li ul li:hover ul li ul {
        display: none;
    }

    nav.menu-primary-container ul li ul li ul li a {
        padding-left: 0.5em !important;
    }

    nav.menu-secondary-container ul {
        background: var(--color-01);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        width: 100%;
        padding-right: 2em;
    }

    nav.menu-secondary-container ul li {
        position: relative;
        white-space: nowrap;
    }

    nav.menu-secondary-container  a[target="_blank"]::after {
        position: absolute;
        top: 60%;
        right: 1em;
        margin-top: -1em;
    }

    nav.menu-secondary-container  a[target="_blank"] {
        margin-right: 0.75em;
    }

    nav.menu-secondary-container  a[target="_blank"]:hover::after {
        -webkit-transition: all 0.5s ease-in;
        -o-transition: all 0.5s ease-in;
        transition: all 0.5s ease-in;
        -webkit-transform: rotate(-30deg);
        -ms-transform: rotate(-30deg);
        transform: rotate(-30deg);
    }

    footer img {
        height: 6vw;
    }

    .sponsoren {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        width: calc(100%/12*7);
    }

    .zertifikate {
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        width: calc(100%/12*5);
    }

    nav.menu-legal-container {
        width: calc(100%/12*7);
    }

    nav.menu-legal-container ul {
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }

    .legal p {
        width: calc(100%/12*5);
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
        order: -1;
        text-align: left;
        margin: 0;
    }


    .content {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }

    body:not(.page-template-page) .kurstyp-list li { width: calc(100%/3);padding: 0.5em; }

    .the-loop .loop-item {
        width: calc(100%/3);
    }

    .the-loop.left {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    }

    .the-loop.left .loop-item { width: calc(100%/3.3);margin-right: 1%; }

    .search-results .entry { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start;-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start;}
    .search-results .entry .search-result { width: calc(100% / 3);padding-right: 1rem;}
    .search-results .entry .search-result:nth-of-type(3n + 3) { padding-right: 0;}

    }

@media only screen and (min-width: 1280px) {
    .site-logo {
        width: 15vw;
    }

    .site-claim {
        margin-left: 2vw;
    }

    .site-claim span {
        font-size: 2.6vw;
    }
	
	nav.menu-primary-container ul li a { font-size: 14px; font-size: 1.4rem; }

    footer img {
        height: 4vw;
    }

    .content .the-loop,
    .content .single-page {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
    }

    .sportbotschafter { width: calc(100%/12*3);}

    body:not(.page-template-index) .kurstyp-list li { width: calc(100%/3);padding: 0.5em; }

    .content aside.sidebar {
        width: calc(100%/12*6);
    }

    .wpcf7-checkbox { 
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; 
        -ms-flex-wrap: wrap; 
            flex-wrap: wrap;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        width: 100%;
    }

    .wpcf7-checkbox .wpcf7-list-item { /*width: 49.9%;*/width: 100%;}

}

@media only screen and (min-width: 1600px) {
    .site-logo {
        width: 14vw;
    }

    .site-claim {
        margin-left: 1vw;
    }

    .site-claim span {
        font-size: 2vw;
    }

    footer img {
        height: 3vw;
    }

    .sportbotschafter { width: calc(100%/12*2);}

    .the-loop .loop-item {
        width: calc(100%/4.1);
    }

    .content article { padding: 1.5em 0; }
    .content aside.sidebar { padding-right: 0; }
}

@media only screen and (min-width: 2000px) {
    .site-logo {
        width: 9vw;
    }

    .site-claim span {
        font-size: 1.25vw;
    }
}

/* Presse */

#stimmen p a, #mitteilungen p a, .wp-block-file a {
display: inline-block;
font-size: 14px;
font-size: 1.4rem;
font-weight: normal;
line-height: 1.6em;
background: var( --color-01);
color: var( --white);
padding: 0.25em 1em;
border: none;
border-radius: 0.25em;
margin: 1em;
margin-left: 0;
cursor: pointer;
}