/*main.css, by Markus Büsser
All associated graphics copyright © 2020, Markus Büsser
Erstellt am: 08.03.2020
Zuletzt geändert am: 17.03.2025*/

/* Allgemeines --------- */
:root {--background:#262626;--bereich:#565656;--link:#ffe7ad;--warning:#8b0000;}

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

h1,h2,h3,h4,h5,h6,ol,ul,li,dl,dt,dd,p,a,td,th,textarea,select,label,legend,input {color:white;font-family:Helvetica, Arial, sans-serif;text-align:left;hyphens: auto;}
h1 {float:left;width:100%;margin:0;padding:0 0 15px;font-size:2.2rem;font-weight:500;}
h2 {float:left;width:100%;margin:0;padding:30px 0 8px;font-size:1.4rem;font-weight:500;}
h1 + h2 {padding-top:0px}
h3, h4, h5, h6 {float:left;width:100%;margin:0;padding:15px 0 8px;font-size:1.2rem;font-weight:500;}
p,ol,ul,li,dl,dt,dd,a,td,th,textarea,select,label,legend,form,input {font-size:1rem;line-height:1.4;} /* p=16px; line-height=21px */
p {text-align:justify;}
p.a00 {margin:0;}
p.a05 {margin:0 0 5px;}
p.a10 {margin:0 0 10px;}
p.a15 {margin:0 0 15px;}
p.a20 {margin:0 0 20px;}
p.a25 {margin:0 0 25px;}
p.a30 {margin:0 0 30px;}
p.warning {color:var(--warning);}

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 {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:none;}
a:hover {text-decoration:underline;}
a:visited {}

ul {list-style-type:disc; padding:0 0 0 20px;}
li {line-height:1.3; /* 19px */}

/* Header -------------- */
div#logo {display:flow-root;width:88%;height:auto;font-size:1rem;margin:25px auto 18px;}
img.logo {float:left;margin:0;width:100%;height:auto;}
svg.logo {float:left;margin:0;width:100%;height:auto;}
.nonzero {fill-rule:nonzero;}
.rect1 {fill:rgb(130,0,36);}
.rect2 {fill:rgb(208,197,192);}
.rect3 {fill:rgb(255,231,173);}
.rect4 {fill:rgb(204,112,73);}
.schrift {fill:white;}

/* Logo neu ------------
svg.logo {fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;} */
.char {fill:white;}
.quad1 {fill:#820024;}
.quad2 {fill:#cc7049;}
.quad3 {fill:#f4c681;}
.quad4 {fill:#d0c5c0;}


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

#menu_schml {display:flow-root;}
.hamburger {float:left;width:25px;margin-top:2px;}
.cross {float:left;width:100%;}
.menubar1,.menubar2,.menubar3 {width: 25px;height: 3px;background-color:white;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 5px 0 0;padding:0;display:none;}

a.menu_li, a.menu_li_last, a.menu_re, a.menu_re_last {float:left;margin:0;padding:2px 16px 0 0;font-weight:500;color:white;text-decoration:none;}
a.menu_li+a.menu_li {border-left:1px dotted #bfbfbf;padding-left:16px;}
a.menu_li+a.menu_li_last {border-left:1px dotted #bfbfbf;padding:2px 0 0 16px;}
a.menu_re+a.menu_re {border-left:1px dotted #bfbfbf;padding-left:16px;}
a.menu_re+a.menu_re_last {border-left:1px dotted #bfbfbf;padding:2px 0 0 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;font-weight:500;color:white;text-align:left;text-decoration:none;}
div.submobilemenu {display:grid;margin:0 0 5px 0;padding:0;color:white;font-family:Helvetica, Arial, sans-serif;}
a.submobilemenu {margin:0;padding:0 0 10px 22px;font-weight:500;color:white;text-align:left;text-decoration:none;}
div.untermenu {margin:0px 0 5px 0;}

/* Content ------------- */
main {display:flow-root;width:85%;margin:auto;padding:calc(3vw) 0 0;text-align:justify;}
div#therapeut {display:flow-root;margin:0 0 0;text-align:justify;}
div#kontakt {margin:40px 0 0 0;}

p.weiterbildungen {margin:10px 0 0;}

p.dl {float:left;width:auto;color:var(--link);margin:0;text-decoration:none;}
a:hover p.dl, p.dl:hover {text-decoration:underline;}
svg > * {fill-rule:evenodd;}

.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:var(--link);stroke-width:1.15px;}
.mailicon2 {fill:none;stroke:var(--link);stroke-width:1px}

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

p.name, p.mail{margin:0 0 0 0;}
p.adresse{margin:0 0 8px 0;}
p.tel {margin:8px 0 0 0;word-spacing:0.05rem;}
p.w3c {margin:50px 0 0;}

div.portrait{display:flow-root;width:160px;height:160px;margin:0;padding:20px 0 5px;}
img.portrait{width:100%;margin:0;padding:0;}

img.praxis {float:left;width:100%;height:auto;margin:25px 0 0px;}
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:82%;color:#666;text-align:justify;margin:0 auto 20px;}
footer p.copyright {width:100%;margin:0;padding:3px 0 0;line-height:1.08rem;font-size:0.8rem;}
footer p.impressum {width:100%;margin:0;padding:3px 0 0;line-height:1.08rem;font-size:0.8rem;}
footer p a {margin:0;padding:0;color:white;line-height:1.04rem;font-size:0.8rem;}
footer p a:hover {text-decoration:none;}


/* Light Theme -------- */
@media screen and (prefers-color-scheme: light) { 
body {background:#f8f8f8;}
#bereich {background:#ffffff;}
h1,h2,h3,h4,h5,h6,ol,ul,li,dl,dt,dd,p,a,td,th,textarea,select,label,legend,input {color:#222222;}
#fusszeile p a {color:#444;}
nav#menu_schml, nav#menu_brt {color:#000; background-color:#cec9c5;}
.menubar1,.menubar2,.menubar3 {background-color:black;}
a.menu_li, a.menu_li_last, a.menu_re, a.menu_re_last {color:#000;}
nav #mobilemenu, a.mobilemenu, div.submobilemenu, a.submobilemenu {color:#000;}
.schrift {fill:rgb(0,0,0);}
a,p.dl {color:#a95023;}
.pdficon11 {stroke:#a95023;}
.pdficon12 {fill:#a95023;}
.pdficon21 {fill:#a95023;}
.pdficon22 {fill:#a95023;}
.mailicon1 {stroke:#a95023;}
.mailicon2 {stroke:#a95023;}} */


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

@media only screen and (min-width:431px) {
img.logo {width:350px;}
svg.logo {width:350px;}}

@media only screen and (min-width:558px) {
h1 {font-size:2.5rem;}
footer {width:calc(96% - 76px);}}

@media only screen and (min-width:656px) {
div#logo {width:calc(100% - 76px);}
nav {width:calc(100% - 86px);padding:10px 30px 7px;}}

@media only screen and (min-width:816px) {
#menu_schml {display:none;}
#menu_brt {display:flow-root;}
.menu_re_brt {display:flow-root;float:right;}
.menu_re_brt .menu_re, .menu_re_last {display:flow-root;}
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:1141px) {
#bereich {width:1080px;}
main {padding:34px 0 0;}
h1 {font-size:2.5rem;}
footer {width:1004px;}}