/*main.css, by Markus Büsser
AAll associated graphics copyright © 2025, Barbara Büsser
Erstellt am: 08.03.2020
Zuletzt geändert am: 03.04.2025 */

/* Allgemeines --------- */
:root {--background:#FFD87E;--bereich:#ffffff;--link:#a95023;}

body {background-color:var(--background);text-align:center;}
#bereich {background-color:var(--bereich);display:flow-root;width:96%;height:100%;margin:25px auto 15px;border:0;border-style:none;padding:0 0 50px;}

h1,h2,h3,h4,h5,h6,ol,ul,li,dl,dt,dd,p,a,td,th,textarea,select,label,legend,input {color:#222222;font-family:Helvetica, Arial, sans-serif;text-align:left;hyphens: auto;}
h1 {float:left;margin:0;padding:0 0 15px;width:100%;font-size:2.2rem;font-weight:500;}
h2 {float:left;margin:0;padding:0 0 8px;width:100%;font-size:1.25rem;font-weight:600;}
h2.seniorinnengymnastik {margin-top:20px}
h3,h4,h5,h6 {float:left;margin:1rem 0 0.5rem;padding:0;width:100%;font-size:1.1rem;font-weight:600;}
h3.weiterbildungen {margin:1.3rem 0 0.5rem;padding:0;}
p,ol,ul,li,dl,dt,dd,a,td,th,textarea,select,label,legend,form,input {font-size:1rem;line-height:1.3;}
p {font-size:1rem; line-height:1.3;margin:0;}
p.a00 {margin:0;}
p.a05 {margin:0 0 0.3rem;}
p.a10 {margin:0 0 0.7rem;}
p.a15 {margin:0 0 1rem;}
p.a20 {margin:0 0 1.3rem;}
p.a25 {margin:0 0 1.7rem;}
p.a30 {margin:0 0 2rem;}
p.copyright {font-size:0.5rem}

sup {bottom:0.3rem;font-size:.8rem;height:0;line-height:1;position:relative;vertical-align:baseline;}
sub {top:0.3rem;font-size:.8rem;height:0;line-height:1;position:relative;vertical-align:baseline;}
b, span.fett {font-weight:bold;font-size:104%;}
span.kursiv {font-style:italic;font-size:100%;}
span.komedth {font-size:85%;}
span.label {font-weight:bold;font-size:80%;}
span.nobr {white-space:nowrap;}

a {color:var(--link);text-decoration:underline;border:0;float:none;}
a:hover {text-decoration:underline;border:0;}
a:visited {}

ul {margin:0 0 0 20px;padding:0 0 0 20px;}
ul.indikationen {margin-bottom:1.5rem;}
ul.therapien {margin-bottom:20px;}
li {line-height:1.3;}

/* Header -------------- */
header {display:inline-block;width:100%;aspect-ratio: 3 / 1;height:auto;font-size:1rem;margin:0;padding:0;}
img.header {width:100%;height:auto;margin:0;padding:0;}

/* Navigation ---------- */
nav {display:flow-root;position:sticky;z-index:10;top:0px;width:86%;width:80%;margin:14px auto 0;border-top:5px;border-bottom:10px;border-style:solid;border-color:var(--bereich);padding:10px 7.5% 7px;color:#000;background-color:var(--background);font-family:Helvetica, Arial, sans-serif;}
#menu_brt {display:none;}
div.menu_li {display:inline-block;float:left;width:auto;margin:0;padding:0;}

#menu_schml {display:flow-root;}
.hamburger {float:left;width:25px;margin-top:3px;}
.cross {float:left;width:100%;margin-top:2px;}
.menubar1,.menubar2,.menubar3 {width:25px;height:3px;background-color:#000;margin:4px 0;}
.menubar1 {margin:0;}
.cross .menubar1 {width:25px;transform:translate(0px,7px) rotate(-45deg);}
.cross .menubar2 {opacity:0;}
.cross .menubar3 {width:25px;transform:translate(0px,-7px) rotate(45deg);}

.menu_re {display:none;float:right;width:auto;margin:0;padding:0;}
.menu_re_hidden {display:none;float:right;width:auto;margin:0;padding:0;}

a.menu_li {display:block;float:left;margin:0 0 1px;padding:3px 16px 0 0;font-weight:500;color:#000;text-decoration:none;}
a.menu_re {display:block;margin:0 0 1px;padding:3px 0 0 16px;font-weight:500;color:#000;text-decoration:none;}
a.menu_li+a.menu_li {border-left-color:#bfbfbf;border-left:1px dotted;padding-left:16px;}
a.menu_re+a.menu_re {border-left-color:#bfbfbf;border-left:1px dotted;padding-right:16px;}

#mobilemenu {display:none;margin:5px 0 0;padding:10px 0 0 0;color: white;font-family:Helvetica, Arial, sans-serif;}
a.mobilemenu {display:block;margin:0;padding:0 0 10px 2px;font-weight:500;color:#000;text-align:left;text-decoration:none;}

/* Content ------------- */
main {display:flow-root;width:80%;margin:auto;padding:calc(3vw) 0 0;text-align:justify;}
section, div#kontakt {display:flow-root; width:100%;margin:2rem 0 0 0;}
section#therapeut {display:grid}
main p {text-align:justify;}
div.portrait{float:left;width:160px;height:200px;margin:0 auto 30px;padding:0;}
img.portrait{width:100%;margin:0;padding:0;}
p.weiterbildungen {margin:10px 0 0;}

p.dl {float:left;width:auto;margin:0;padding:0;color:var(--link);text-decoration:none;}
a:hover p.dl {text-decoration:underline;}

.pdficon {float:left;width:18px;height:22px;margin:-2px 0 0;padding:0 0 0 4px;}
.pdficon1 {fill:none;stroke:var(--link);stroke-width:1.25px;}
.pdficon2 {fill:var(--link);}

.mailicon {width:18px;height:14px;margin:-3px 0 0 0;padding:0 3px 0 0;vertical-align:middle;}
.mailicon1 {fill:none;stroke:rgb(188,79,3);stroke-width:1.15px;}
.mailicon2 {fill:none;stroke:rgb(188,79,3);stroke-width:1px}

p.kontakt {float:left;width:auto;margin:0 5px 0 0;border:0;padding:0;}

main p.name{margin:0 0 0 0;text-align:left;}
p.adresse{margin:0 0 8px 0;}
p.tel {margin:8px 0 0 0;word-spacing:0.05rem;}
p.w3c {margin:50px 0 10px;}

img.w3c {width:100px;margin:0 5px 0 0;}
img.observatory {width:115px;margin:0 5px 0 0;}
img.csp-evaluator {width:35px;margin:0 10px 0 0;}
img.greenweb {width:80px;}

/* Footer -- ----------- */
footer {display:flow-root;width:80%;color:#222;text-align:justify;margin:0 auto 20px;}
footer p.copyright {width:100%;margin:0;padding:3px 0 0;line-height:1.08rem;color:#222;font-size:0.8rem;text-shadow:0px 1px 0px rgba(255,255,255,0.75);}
footer p.impressum {width:100%;margin:0;padding:3px 0 0;line-height:1.08rem;color:#222;font-size:0.8rem;text-shadow:0px 1px 0px rgba(255,255,255,0.75);}
footer p a {font-size:0.8rem;text-decoration:none;margin:0;padding:0;color:#222;}
footer a:hover {text-decoration:underline;}


/* Für Bildschirmgrösse: 16px zusätzlich zu berechneter Grüsse (wird von Browsern als Rand dazugezählt!) */
@media only screen and (min-width:310px) {
.menu_re {display:flow-root;}
.menu_re_hidden {display:none;}}

@media only screen and (min-width:417px) {
nav {width:calc(100% - 80px); padding:10px 30px 7px;}
footer {width:calc(96% - 76px);}}

@media only screen and (min-width:790px) {
div#menu_schml {display:none;}
div#menu_brt {display:flow-root;}
section#therapeut {display:flow-root}
div.portrait {float:right;margin:-150px 30px 30px 50px;}
footer p.copyright {float:left;width:auto;margin:0;padding:3px 0 0;}
footer p.impressum {float:right;width:auto;margin:0;padding:3px 0 0;}}

@media only screen and (min-width:1137px) {
#bereich {width:1080px;}
main {padding:34px 0 0;}
h1 {font-size:2.5rem;}
footer {width:1004px;}}