* {margin:0; padding:0; border:0;}
html {height:100%; overflow-y:scroll; background:#c5e1ce;}
body {height:100%; min-width:60em; background:#c5e1ce; font-size:100%; text-align:left; color:#333; word-wrap:break-word;}
body, .p4 span {font-family: Arial, Helvetica, "Trebuchet MS", Tahoma, Geneva, clean, sans-serif;}
.clear {clear:both;}
.hidden{display:none;}

/*Layout*/
.zentriert {position:relative; width:57em; margin:0 auto; text-align:left; overflow:hidden;}
.kopf{position:fixed; width:100%; z-index:999; padding-top:2em; background:#c5e1ce;}
.kopf .zentriert{border-bottom:1px solid #033731;}

/*Kopfmenü*/
#kopfmenu{float:right; width:37em; text-align: right; padding-top:0.75em;}
#kopfmenu ul{display:inline-block;}
#kopfmenu ul li{float:right; margin:0.25em 0 0.25em 2.25em; padding:0; display:block; height:1.5em; text-align:center;}
#kopfmenu ul li a{display:block; height:100%; color:#666; font-size:18px;}
#kopfmenu ul li a.aktiv, #kopfmenu ul li a:hover, #kopfmenu ul li a:focus{color:#033731; text-decoration:none; outline:none;}

/*Fuss*/
#fussmenu{padding:1em 0;}
#fussmenu ul{float:left; width:36%; text-align:left;}
#fussmenu ul li{margin:0.25em 0.5em; padding:0; display: inline-block; max-width:9em; height:2.5em; text-align: center; font-size:14px;}
#fussmenu ul li a{color:#666;}
#fussmenu ul li a:hover, #fussmenu ul li a:focus, #fussmenu ul li a.aktiv{color:#033731; text-decoration:none;}
#fussmenu p{font-size:0.75em; text-align:right; float:right; width:49%; line-height:150%;}

/*Bereiche*/
.bereich-1 .inhalt-baustein-spalte-rechts{clear:right; float:left; overflow:hidden; width:64%;}
.bereich-1 .inhalt-baustein-spalte-links{clear:left; float:left; overflow:hidden; width:34%;}
.inhalt-hellgrau {background-color:#fff; margin:2em 2em 0;}
.inhalt-hellgrau .inhalt-beitrag{padding:1em 0 2em;}
.inhalt-hellgrau h2{padding:0.25em 0 1em; color:#474747; font-weight:normal; font-style:normal;}
.inhalt-hellgrau p{padding:0.8125em;}
.inhalt-hellgrau a:hover, .inhalt-hellgrau a:focus, .inhalt-hellgrau a:active{text-decoration: underline;}
.bereich-2{width:100%; position:relative;}
.bereich-2 .zentriert{padding-top:1em;}
.bereich-2 .inhalt-baustein-3spalten{padding:0.5em 0 0 1em;}
.bereich-2 p{font-size:0.6875em; text-align: left;}
.bereich-2 a{font-weight:normal;}
.bereich-2 a:hover, .bereich-2 a:focus, .bereich-2 a:active{text-decoration:underline;}

/*Bausteine*/
.inhalt-relativ{position:relative;}
.inhalt-baustein-4spalten{clear:both; display:block; height:auto; position:relative; padding:0 3.5em; text-align:left;}
.inhalt-baustein-4spalten .inhalt-baustein-2spalten{clear:none; float:left; overflow:hidden; padding:2.75em 0 3em;}
.inhalt-baustein-4spalten .inhalt-baustein-2spalten.inhalt-baustein-spalten-links{width:42%;}
.inhalt-baustein-4spalten .inhalt-baustein-2spalten.inhalt-baustein-spalten-rechts{width:56%;}
.inhalt-baustein-2spalten, .inhalt-baustein-1spalte{position:relative; padding:2em 0; border-bottom:1px solid #033731;}
.inhalt-baustein-spalte-rechts, .inhalt-baustein-spalte-links{clear:left; float:left; overflow:hidden; width:49%; text-align:right;}
.inhalt-beitrag{width:100%; clear:both; display:block; position:relative;}
.inhalt-beitrag-links{float:left; width:48%; clear:left;}
.inhalt-beitrag-rechts{float:right; width:48%; clear:right;}
.inhalt-baustein-spalte-rechts{clear:right; float:right; text-align:left;}
.inhalt-baustein-4spalten .inhalt-baustein-spalten-rechts{float:right;}
.inhalt-baustein-3spalten .inhalt-baustein-spalte-links {float:left; clear:left; width:31%; min-height:1px; overflow:hidden;}
.inhalt-baustein-3spalten .inhalt-baustein-spalte-mitte {float:left; width:31%; margin-left:1.5%; min-height:1px; overflow:hidden;}
.inhalt-baustein-3spalten .inhalt-baustein-spalte-rechts {float:right; width:31%; overflow:hidden;}

/*Mediaelemente*/
.inhalt-media{margin:0 1em 1em;}
.inhalt-media-links{float:left; margin-right:3em;}
.inhalt-media-rechts{float:right; margin-left:0.75em; margin-top:0.75em}
.inhalt-media-35{width:35%;}
.inhalt-media-22{width:22%;}
.inhalt-media img{box-shadow:2px 2px 8px #555; width:90%;}
/*.inhalt-media p{box-shadow:2px 2px 8px #555; width:auto; background:#a84698; color:#f7dfcd; padding:5em 2em; text-align:center; font-weight:bold; border:1em solid #fff; margin:0;}*/

/*Textformatierung*/
h1{color:#033731; font-weight:bold; font-style:normal; padding:1.5em 0 0.5em; font-size:1em; line-height:123%;}
h1 span{ font-size:3em; line-height:135%;}
h2{color:#033731; font-weight:bold; font-size:30px; margin:0.75em 0 0 1rem;}
h3{font-size:20px; padding-top:1em;}
h4{padding-top:1em;}
p{font-size:18px; line-height:135%; margin:1em 0 1em 1rem; display: table;}
.p2{display:block; margin:0 0 2em 0;}
p.text-kleiner{font-size: 0.875em;}
p.text-right{text-align:right;}
.text-gruen{color:#033731;}
.text-center{display:block; text-align:center;}
address{margin:1em 0 1em 1rem; line-height:135%; font-size:18px;}
address p, address h2{padding-right:0;}
address h2{padding-top:0.5em;}
ol, ul{margin:0 0 0 1rem; display:table;}
li{font-size:18px;}
ul.hacken li{position:relative; list-style:none; padding:0.25em 0.5em 0.25em 1.75em;}
ul.hacken li:before{content:'\2713'; color:#033731; font-weight: bold; position:absolute; left:0.25em; top:0.25em; width:1.25em; height:1.25em;}
a{text-decoration:none; color:#033731;}
a:hover, a:focus, a:active{text-decoration:underline;}
li{padding:0; display:list-item;}
img{display:inline-block;}

/*(Call-to-Action)-Buttons*/
p.button{max-width:100%; padding:1em 0;}
p.button a{display:inline-block; padding:0.5em 0.75em; height:auto; font-size:1em;}
p.button a, p.button a:visited{text-decoration:none; color:#033731; cursor:pointer; border:2px solid #033731; border-radius:2em;}
p.button a:hover, p.button a:focus, p.button a:active{text-decoration:none; background-color:#033731; color:#fff;}
p.button a:after{content:"\00A0\00BB";}

/*Allgemeine Formatierungen*/
.mt-3{margin-top:3em;}
.mt-2{margin-top:2em;}
.mt-0{margin-top:0;}
.mb-0{margin-bottom:0;}
.mb-1{margin-bottom:1em;}

/*Rechtliches Datenschutz*/
#dsgvo-auto-datenschutz p, #dsgvo-auto-datenschutz .p, #dsgvo-auto-datenschutz dd, #dsgvo-auto-datenschutz address {max-width:60em;}
#dsgvo-auto-datenschutz ol li {list-style-type:none;}
#dsgvo-auto-datenschutz ol.ol-liste-ebene1 {counter-reset:listenpunkt_ebene1; list-style-type:none;}
#dsgvo-auto-datenschutz ol.ol-liste-ebene1 li:before {content: counter(listenpunkt_ebene1) ". "; counter-increment:listenpunkt_ebene1;}
#dsgvo-auto-datenschutz ol.ol-liste-ebene2 {counter-reset:listenpunkt_ebene2; list-style-type:none;}
#dsgvo-auto-datenschutz ol.ol-liste-ebene2 li:before {content: counter(listenpunkt_ebene1)"."counter(listenpunkt_ebene2,decimal) ". "; counter-increment:listenpunkt_ebene2;}
#dsgvo-auto-datenschutz ol.ol-liste-ebene2 li.inhalt-hide-nummerierung:before {content:""}
.inhalt-formular-dsgvo-datenschutz .inhalt-formular-checkbox-input {width:auto;}
.inhalt-formular-dsgvo-datenschutz .inhalt-formular-checkbox-label {width:auto; float:left; margin-left: 0.4em;}
#dsgvo-auto-datenschutz h2{padding-left:0; padding-right:0;}

/*Besonderheiten*/
.bg-weiss{background:#fff; padding:0.5em 0;}
#Intro{text-align:center; padding-top:10.5em;}
#Intro p{font-size:1.25em; color:#666; padding:0;}
#Intro p span{font-size:1.5em;}
#Intro p.p4{text-align: center; padding:5em 0 1em;}
#Intro p.p4 span{font-size:14px;}
#Petra-innen strong{display:inline-block; width:5.5em; float:left;}
#Petra-innen strong.mehrzeilig{padding-bottom:2em;}
#Kontakt-innen address{font-style:normal;}
.kontakt{display:block; background:#fff; height:5.5em;}
.kontakt .kontakt-icons{float:left; width:3em; padding-top:0.5em;}
.kontakt .kontakt-icons-sm{width:10em;}
.kontakt .kontakt-icons-sm a{float:left; width:3em;}
.kontakt .kontakt-icons a{display:block; height:2.25em;}
.kontakt .kontakt-icons a:hover, .kontakt .kontakt-icons a:focus{}
.kontakt .kontakt-icons img{width:2em; display:block; border:0;}
.kontakt .kontakt-infos{float:left; width:16em; display:block; padding:1em 0;}
.kontakt .kontakt-infos a{display:block; padding-top:0.75em;}

/*Mobilansicht*/
#menue-burger-button {display:none;}
#menue-burger-button {position:absolute; width:48px; height:48px; right:0.75em; top:0; background:transparent; z-index:9999; cursor:pointer;}
#menue-burger-button .menue-burger-button-line{display:block; margin:8px 12px; width:22px; height:2px; background-color:#033731;}
#menue-burger-button.offen span{background-color:#033731;}
#menue-burger-button.offen .menue-burger-button-line-1{-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}
#menue-burger-button.offen .menue-burger-button-line-2{position:absolute; top:15px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
#menue-burger-button.offen .menue-burger-button-line-3{display:none;}

@media screen and (max-width: 960px) {
    body{min-width:250px;}
    .zentriert{width:100%;}
    .kopf .zentriert{width:100%; padding:1em 0; overflow:initial;}
    #kopfmenu{width:25em;}
    #kopfmenu ul{margin: 1em 1em 1em 0;}
    #kopfmenu ul li{margin-left:1em;}
    #kopfmenu ul li:last-child{margin-left:0;}
    p{margin: 1em 1rem 1em 1rem;}
    .kontakt{padding:0 1em;}
}
@media screen and (max-width: 750px) {
    #menue-burger-button {display: block;}
    #kopfmenu{position:absolute; top:0; right:-23em; width:20em; height:auto; background:#fff; background:rgba(255,255,255,0.85); float:none; transition: right 0.5s ease-in-out;}
    #kopfmenu li{float:none; width:100%; text-align:right;}
    #kopfmenu.offen{right:-2em;}

    h1 span{font-size:2em;}
    #Intro p span{font-size:1.25em;}

    .inhalt-media-links{float:none; width:auto; margin-right:1em;}
    .inhalt-media-rechts{float:none; width:auto; margin-left:1em;}

    #fussmenu ul, #fussmenu p{width:100%; float:none; text-align: center; margin:1em 0;}
    #fussmenu ul li a{padding:1em;}

}

@media screen and (max-width: 500px) {
    .kontakt{height:auto;}
    .kontakt .kontakt-icons a{height:3.25em; width:3.25em;}
    .kontakt .kontakt-infos{width:12em; padding:1em 0 2em;}
    .kontakt .kontakt-infos a{padding-top:2em;}

    .inhalt-beitrag-links, .inhalt-beitrag-rechts, .inhalt-baustein-spalte-links, .inhalt-baustein-spalte-rechts{float:none; width:100%; text-align: left;}
    .p2{margin-left:1rem;}
    #dsgvo-auto-datenschutz p, #dsgvo-auto-datenschutz .p, #dsgvo-auto-datenschutz dd, #dsgvo-auto-datenschutz address {max-width:unset;}
}


/*Von Chat:*/
:root {
    --petrol:#004235;
    --petrol-dark:#003429;
    --mint:#b8ead9;
    --mint-soft:#e6f7f1;
    --green:#4f856e;
    --white:#ffffff;
    --text:#17342d;
    --muted:#5f746d;
    --shadow:0 18px 45px rgba(0,0,0,.16);
    --radius:24px;
}
* {
    box-sizing:border-box;
}
body {
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    color:var(--text);
    background:#f4faf7;
    line-height:1.6;
}
img {
    max-width:100%;
    height:auto;
    display:block;
}
a {
    color:inherit;
}
.wrap {
    width:min(1120px, calc(100% - 40px));
    margin-inline:auto;
}
.topbar {
    background:var(--petrol-dark);
    color:var(--white);
    font-size:.95rem;
}
.topbar .wrap {
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:10px 0;
    flex-wrap:wrap;
}
.header {
    position:sticky;
    top:0;
    z-index:10;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(0,66,53,.12);
}
.nav {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:16px 0;
}
.logo {
    position:relative;
    width:425px;
    height:5em;
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:800;
    font-size:1.15rem;
    text-decoration:none;
    color:var(--petrol);
}
.logo img{
    position:absolute;
    top:0;
    left:0;
    width:240px;
    height:auto;
    font-weight:900;

}
.menu {
    display:flex;
    gap:22px;
    align-items:center;
    font-weight:700;
    font-size:.95rem;
}
.menu a {
    text-decoration:none;
    color:var(--text);
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:13px 20px;
    border-radius:999px;
    background:var(--petrol);
    color:var(--white);
    text-decoration:none;
    font-weight:800;
    box-shadow:0 10px 25px rgba(0,66,53,.22);
    border:0;
}
.button.secondary {
    background:var(--mint);
    color:var(--petrol);
    box-shadow:none;
}
.hero {
    background:linear-gradient(135deg, #c1e0cb, #ffffff 48%, #d5f3e8);
    overflow:hidden;
}
.hero-grid {
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:52px;
    align-items:center;
    padding:0 0 74px;
}
.eyebrow {
    display:inline-block;
    padding:8px 14px;
    background:rgba(79,133,110,.4);
    border-radius:999px;
    font-weight:800;
    margin-bottom:18px;
}
h1, h2, h3 {
    line-height:1.1;
    margin:0 0 18px;
    color:var(--petrol);
}
h1 {
    font-size:clamp(2.4rem, 6vw, 5rem);
    letter-spacing:-.04em;
}
h2 {
    font-size:clamp(2rem, 4vw, 3.3rem);
    letter-spacing:-.03em;
}
h3 {
    font-size:1.35rem;
}
.lead {
    font-size:1.22rem;
    max-width:620px;
    color:#24443c;
    margin:0 0 28px;
}
.hero-actions {
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:26px;
}
.hero-card {
    position:relative;
    background:var(--petrol);
    color:var(--white);
    border-radius:36px;
    padding:1.75em;
    min-height:32em;
    box-shadow:var(--shadow);
    isolation:isolate;
}
.hero-card .ball {
    position:relative;
    width:1.5em;
    height:0.25em;
    margin-left:auto;
    color:var(--petrol);
    font-size:4.6rem;
    line-height:100%;
    text-align:right;
    z-index:1;
}
.quickfacts {
    display:grid;
    gap:14px;
}
.quickfact {
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.18);
    padding:16px 18px;
    border-radius:18px;
}
.quickfact strong {
    display:block;
    font-size:1.05rem;
    color:var(--mint);
}
section {
    padding:78px 0;
}
.section-intro {
    max-width:760px;
    margin-bottom:34px;
}
.cards {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
}
.card {
    background:var(--white);
    padding:28px;
    border-radius:var(--radius);
    box-shadow:0 12px 32px rgba(0,66,53,.08);
    border:1px solid rgba(0,66,53,.08);
}
.card p{margin-left:0;}
.icon {
    width:48px;
    height:48px;
    border-radius:16px;
    background:var(--mint-soft);
    display:grid;
    place-items:center;
    font-size:1.6rem;
    margin-bottom:18px;
}
.split {
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:46px;
    align-items:center;
}
.coach-box {
    background:var(--petrol);
    color:var(--white);
    border-radius:34px;
    padding:36px;
    box-shadow:var(--shadow);
}
.coach-box p{margin-left:0;}
.coach-box h2, .coach-box h3 {
    color:var(--mint);
}
.coach-photo-placeholder {
    aspect-ratio:4 / 5;
    border-radius:34px;
    background:linear-gradient(135deg, var(--mint), #ffffff);
    display:grid;
    place-items:center;
    color:var(--petrol);
    font-weight:900;
    text-align:center;
    padding:30px;
    box-shadow:0 12px 32px rgba(0,66,53,.12);
}
.list {
    list-style:none;
    margin:18px 0 0;
    padding:0;
    display:grid;
    gap:10px;
}
.list li {
    position:relative;
    padding-left:28px;
}
.list li:before {
    content:"⚽";
    position:absolute;
    left:0;
    top:0;
    font-size:.95rem;
}
.cta {
    background:var(--petrol);
    color:var(--white);
    border-radius:40px;
    padding:46px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:30px;
    align-items:center;
    box-shadow:var(--shadow);
}
.cta h2 {
    color:var(--white);
    margin-bottom:10px;
}
.cta p {
    margin:0;
    color:#d6eee6;
    font-size:1.1rem;
}
.contact-grid {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:18px;
    margin-top:28px;
}
.contact-item {
    background:var(--white);
    padding:24px;
    border-radius:22px;
    border:1px solid rgba(0,66,53,.08);
}
.footer {
    background:var(--petrol-dark);
    color:#d6eee6;
    padding:36px 0;
    margin-top:70px;
}
.footer .wrap {
    display:flex;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
    align-items:center;
}
.footer a {
    color:#d6eee6;
    text-decoration:none;
    margin-left:18px;
}
@media (max-width:880px) {
    .hero-grid, .split, .cta {
        grid-template-columns:1fr;
    }
    .cards, .contact-grid {
        grid-template-columns:1fr;
    }
    .menu {
        display:none;
    }
    .hero-grid {
        padding:58px 0;
    }
    section {
        padding:56px 0;
    }
    .cta {
        padding:32px;
    }
}