@charset "utf-8";
/* CSS Document */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}


@font-face {
    font-family: "Open Sans Condensed";
    src: url('https://wort-claud.de/img/OpenSansCondensed-Light.ttf') format('truetype');
	src: url('https://wort-claud.de/img/OpenSansCondensed-Light.woff2') format('woff2');
    font-style: normal;
	font-display: swap
} 
@font-face {
    font-family: "Open Sans Condensed";
    src: url('https://wort-claud.de/img/OpenSansCondensed-SemiBold.ttf') format('truetype');
	src: url('https://wort-claud.de/img/OpenSansCondensed-SemiBold.woff2') format('woff2');
    font-style: normal;
    font-weight: bold;
	font-display: swap
} 



* { box-sizing:border-box; -webkit-appearance: none;}

body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
html { min-height: 100%; font-size: 2.3vh;}
body { background-color: #dedede; background-image:url(img/bg.jpg); background-size:cover; min-height: 100%; font-family: arial;  color: #1F3961; font-family: 'Open Sans Condensed', sans-serif; letter-spacing: .08rem; background-attachment:fixed;  }
a { text-decoration: none; color: #1F3961 }
li a { text-decoration: none; color: white }
.wrapper { width: 30.5rem;  opacity: 0; transition: opacity 0.4s; position:relative; margin: 0.59rem auto 25vh auto;   }
#home_img {  position:absolute; width: 100%; height: 17.06rem; top: 0; left: 0; z-index: 0; overflow:hidden; background-color: #4A7FA4}
#home_img div:first-child { background-image:url(img/home_bg.jpg); background-size: 100% 100%; position:absolute; width: 100%; height: 100%; z-index: 0; top: 0; left: 0; opacity: 0.7; }
#home_img div:last-child { background-image:url(img/claudi.webp); background-size: 45% auto; position:absolute; width: 100%; height: 100%; z-index: 1; background-repeat:no-repeat; background-position:bottom right;  }
.no_webp  #home_img div:last-child { background-image: url(img/claudi.png);}

#home_img div:last-child:after { content: ""; position: absolute; width: 100%; height: 9%; bottom: 0; left: 0; background: linear-gradient(0deg, rgba(0,89,121,1) 0%,  rgba(0,89,121,0) 100%);}

.home #home_img div:first-child { animation-name: wolken; animation-duration: 70s; animation-iteration-count: infinite; animation-timing-function: ease-in-out;}

@keyframes wolken {
    0% {  transform: scale(1, 1) rotate(0deg) translate(0,0);  opacity: .7; }
    15%   {  transform: scale(1.2, 1.3) rotate(-10deg) translate(1%,10%);  opacity: 1 }
    25%   {  transform: scale(1.2, 1.3) rotate(-10deg) translate(1%,10%);  opacity: 1 }
   
    70%   {  transform: scale(1, 1) rotate(0deg) translate(0%,0%);  opacity: .7   }
  }

#home_ueb { padding-top: 11.76rem;  position:relative; z-index: 1; margin-bottom: 1.76rem }
#home_ueb p:last-child { font-size: 2.7rem; margin-bottom: 2rem;}
#home_ueb p:first-child { font-size: 1.4rem; margin-bottom: 1rem}

h1, h2, h3 {  font-size: 1.75rem; line-height: 2.1rem; margin: 1.5rem 0 1.2rem 0;    }
h1:first-child, h2:first-child, h3:first-child { margin-top: 1rem}
ul { padding-left: 1.06rem; position:relative; }
section li:last-child { margin-bottom: 0 !important}
li { list-style-type: none; font-style:italic;  line-height: 1.55rem; }
li:before { content: "•"; position:absolute; left: 0; font-size: 1.18rem; font-style:normal}
.unterricht li, .coaching li { font-style:normal; margin-bottom: .8rem; line-height: 1.5rem;}
section { position:relative; color: white; background: #005979; padding: 2.06rem 2.24rem; box-shadow: 0.06rem 0.06rem 0.06rem 0.00rem rgba(0,0,0,0.5);  }
.coaching section { background: #4A80A4}
.white_bg { background: white !important; color: #005979 !important; }
.white_bg p, .white_bg li {color: #00374C }
.kurse section { background: #4A80A4;}
.home h1:first-child { margin-top: 1.76rem; }
#tel p { margin-bottom: 0.29rem; text-align:right}
.kurse #tel { background: #4A80A4 !important; color: white !important;}
.kurse #tel p { color: #efefef !important;}
#tel h2 { font-size: 4rem; line-height: 4.2rem; margin: 0 !important; letter-spacing: 0.47rem; text-align:right; width: 100%;
    overflow: hidden; white-space: nowrap; letter-spacing: normal;}
#share_wrapper { background-color: white; width: 1.18rem; height: 6rem; position:absolute; top: 0; left: -1.65rem; background-image:url(img/fb.png); background-position:top center; background-size: auto 2.2rem; background-repeat:no-repeat; box-shadow: 0.00rem 0.00rem 0.00rem 0.00rem rgba(0,0,0,0.3);}

#share_wrapper:before {
    bottom: 1.2rem;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    content: "TEILEN";
    font-size: 0.69rem;
    text-align: center;
    position: absolute;
	letter-spacing: 0.12rem
}

nav {  width: 100%;  position:relative; display:flex; height: 2.2rem; line-height: 2.2rem; background: white; text-align: center; box-shadow: 0.06rem 0.06rem 0.06rem 0.00rem rgba(0,0,0,0.5); border-radius: .1rem .1rem 0 0; overflow: hidden;  }
.unterricht nav, .coaching nav { background: #4A80A4; color: white}
nav a { width: 100%; text-decoration:none; text-transform:uppercase; font-size: 0.8rem; letter-spacing: 0.08rem; font-weight: bold;}
.unterricht nav a, .coaching nav a { color: white}
nav a:first-child, nav a:nth-child(3) { width: 70%;}
.active_link { background: #4A80A4; color: white}
.unterricht .active_link, .coaching .active_link { color: #4A80A4; background: white}

img { object-fit: contain; width: 100%}

.hyphens { hyphens: auto; -webkit-hyphens: auto }
p { line-height: 1.5rem; margin-bottom: .8rem; }
footer { font-size: 0.8rem; text-align:right; font-weight:100; color: black; position:absolute; width: 100%; height: 1.76rem; line-height: 1.76rem; bottom: -2.65rem; left: 0; text-transform: uppercase;}
footer a { text-decoration:none; color: black; display:inline }
footer .active_link { color:red; background:none; text-decoration:underline }
footer div { width: 60%}
footer div span { padding: 0 0.47rem; }
footer div:last-child { text-align: right; width: 40%}


#analytics_deakt { cursor:pointer; text-decoration:underline}
#f_orm { background-color: #efefef;  margin-top: 1rem; background-image: url(img/p_share_ml.svg); background-size: 5.5rem; background-position: top 1rem right 1.5rem; background-repeat: no-repeat;}
#mehl h2 {  text-transform:uppercase; color: white}
#mehl { position:fixed; width: 23.53rem; height: 15.76rem; top: 0; left: 0; bottom: 0; top: 0; right: 0; margin:auto; padding: 0.88rem; box-shadow: 0.00rem 0.00rem 0.29rem 0.12rem rgba(0,0,0,0.75);z-index: 2; display:none; background: #4A80A4 }

#form_info { position:fixed; top: 0; left: 0; width: 100%; bottom: 0; margin:auto; color: black; text-align:center; height: 2.35rem; line-height: 2.35rem; text-transform:uppercase; font-size: 1rem; display:none; box-shadow: 0.00rem 0.24rem 0.29rem 0.00rem rgba(0,0,0,0.75); background: white; z-index: 888; margin: auto; }

#anfrage_form input { width: 100%; margin: 1rem 0; border: solid 0.06rem #aaa; display:block; border: none; border-radius: 0; height: 2.5rem; line-height: 2.5rem; padding: 0 1rem; box-sizing:border-box; font-size: 1rem; font-family: 'Open Sans Condensed', sans-serif;}

#anfrage_form textarea { width: 100%; border-radius: 0; margin:  0; min-height: 8.24rem; border: none; font-family: 'Open Sans Condensed', sans-serif; padding: 0.59rem; font-size: 1rem;}
input[type=submit] { text-transform:uppercase; height: 2.5rem; line-height: 2.5rem; font-weight: bold; background: #4A80A4; color: white; text-align:center; cursor:pointer; letter-spacing: .05rem; font-size: 1.1rem !important;}

input:focus, input:hover, textarea:hover, textarea:focus {
    background-color: #ffffd5;
  }

input[type=submit]:hover { background-color: #4A80A4; color: #ffff8c;}

#anfrage_form h2 { font-size: 2.8rem; line-height: 4.2rem; text-transform: uppercase; margin-bottom: .5rem; color: #4A80A4; opacity: .85;}

#tippziehl li { margin-bottom: .3rem;}

l-ist p { font-weight: bold; margin-bottom: .3rem; font-size: 1.1rem; color: #4A80A4 !important; }
l-ist { margin-bottom: .7rem; display: block;}
l-ist:last-child { margin-bottom: 0;}

.kurse section:nth-of-type(2).white_bg h2 { font-size: 2.3rem; color: #4A80A4 !important; margin-bottom: 1.5rem;}

.coaching li { margin-bottom: .3rem;}

.coaching #tel h2 {  color: #4A80A4 }


@media screen and (max-width: 550px) { 
html { font-size: 4.8vw;}
nav { border-radius: .25rem .25rem 0 0; }
section { padding: 1.5rem 1.5rem 2rem 1.5rem }
#home_img div:last-child { background-size: 58% auto; background-image: url(img/claudi_mob.webp);}
#home_img div:first-child { background-image: url(img/home_bg_mob.webp); }
.no_webp  #home_img div:last-child { background-size: 58% auto; background-image: url(img/claudi_mob.png);}
.no_webp  #home_img div:first-child { background-image: url(img/home_bg.jpg); }
#share_wrapper { left: -0.29rem; z-index: 2; top: auto; bottom: -3.53rem; background-color: #efefef;  }
#mehl { width: 100%; height: min-content; position:absolute;}
#kk { display: none;}
#f_orm {
    background-position: top right 0.6rem;
    background-size: 5rem;
    padding: 2.5rem 1.5rem;
}
footer div span { display:block; font-size:0; height: 0; }

.wrapper { width: 100%; margin-top: .3rem; margin-bottom: 2.94rem }
#loader > div { display:block}

#tel h2 { font-size: 2.7rem; line-height: 2.8rem; }
#anfrage_form h2 { font-size: 2.2rem; line-height: 2.2rem; }

body { padding: 0.59rem; background-image:none; background-color: #dfdfdf; font-size: inherit; line-height: inherit;}

footer a { color: #555}
footer { color: #555}
footer div { width: 100%}

footer div:last-child { width: 100%; margin-top: 1.47rem; text-align:center}
#home_img { height: 14rem}
#home_ueb { padding-top: 9.5rem}

l-ist p { margin-bottom: 0;}

}

@media screen and (max-width: 400px) { 

footer { padding-right: .2rem; }
body { padding: .5rem}


}

@media screen and (max-width: 350px) { 
footer { padding-right: 0.47rem}
body { padding: 0}
.wrapper { margin-bottom: 3.53rem; margin-top: 0;}
#share_wrapper { left: 0; bottom: -3.53rem}
nav { border-radius: 0;}


}