/* adjusting all the fonts and paddings/margins ...
*/

/* colors:
 * https://www.w3schools.com/colors/colors_hsl.asp
 */
:root {
    --color_background:  hsl(40deg 41% 94%);
    --color_text:        black;
    --color_text_normal: hsl(40deg 41% 30%);
    --color_bg_normal:   hsl(40deg 41% 84%);
    --color_text_inv:    hsl(40deg 41% 90%);
    --color_bg_inv:      hsl(40deg 41% 40%);
    --color_border:      hsl(0deg 0% 80%);
    --color_text_strong: red;
}

html                {
    font-family: sans-serif;
    font-size: 18px;
    background-color: var(--color_background);
    margin: auto;
    max-width:1200px;
}

*.hidden            { font-size: 0px; margin: 0px; padding: 0px; border: none;}

*                   { line-height: 1.3; padding: 0px; margin: 0px; }
/* -1px; border: 1px solid black;} */

h1, h2, h3, h4, h5, h6, p, li { padding: 6px; margin: 2px; }

h1, h2              { padding-bottom: 10px; padding-top: 20px; }
h1                  { font-size: 26px; text-align: center; }
h2                  { font-size: 24px; font-weight:bold; }
h3                  { font-size: 22px; font-weight:bold; }
h4, h5, h6          { font-size: 20px; font-weight:normal; }
h3                  { padding-top: 10px; }

p                   { padding-top: 10px; }
p.centered          { text-align: center; }
img                 { margin:3px; }
img.photo           { border-radius:30px; }
ul                  { list-style-position:outside; padding-left:40px; }
li                  { padding-top: 15px; }
li2                  { padding-top: 5px; }
em                  { font-style:normal; font-weight:bold; }
strong              { line-height: 1.6; font-size: 22px; font-weight: bold; color: var(--color_text_strong); text-align:center; }
strong.notfall      { font-size: 24px; }

/* Klapp-Menu "nav" */
.folded input {
    /* checkbox verstecken */
    display: none;
}
.folded input:checked ~ .folded-hidden, .folded input:checked ~ * .folded-hidden {
    /* das dem input nachfolgende Element anzeigen, wenn Checkbox aktiv */
    display: none;
}
.folded input ~ .folded-hidden, .folded input ~ *.folded-hidden {
    /* liste verstecken */
    display: initial;
}
/* turn around the checked meaning */
.folded input:checked ~ .folded-nonhidden, .folded input:checked ~ * .folded-nonhidden {
    /* das dem input nachfolgende Element anzeigen, wenn Checkbox aktiv */
    display: initial;
}
.folded input ~ .folded-nonhidden, .folded input ~ * .folded-nonhidden {
    /* liste verstecken */
    display: none;
}

/* SVG Bilder stylen / menus */
.folded h1 {
  font-size: 14px;
  font-weight: bold;
  padding: 0px;
  margin: 0px;
}
.folded label {
  float: left;
  display: flex;
  flex-direction: column;
  align-items: center;
}


/* styling */
/* header */
footer {
    width: 100%;
    background-color: var(--color_background);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0px;
    margin: 0px;
}
footer p, footer a {
    font-size: 12px;
    display: inline;
    margin: 0px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 1px;
    padding-bottom: 2px;
}
#banner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: hidden;
    overflow: hidden;
}
#banner * {
    padding-top: 5px;
    padding-bottom: 7px;
    padding-left: 15px;
    padding-right: 15px;
    margin: 0;
}
#banner img {
    height: 130px;
    width: auto;
    padding: 0px;
}
#banner #praxis-stempel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0px;
    margin: 0px;
}
#banner .praxis-telefon {
    text-align: center;
}

/* wide display: fixed menu */
#navigation {
    position: sticky;
    top: 0px;
    padding-top: 3px;
    background-color: var(--color_background);
    box-shadow: 0px 9px 9px -7px var(--color_border);
}
#navigation div {
    padding: 0px;
    margin: 0px;
}
#navigation ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
    flex-wrap: wrap;
    padding: 5px;
    margin: 0px;
    list-style: none;
}
#navigation ul li {
    padding: 0px;
    margin: 0px;
}
#navigation ul li a {
    display: block;
    padding: 0px;
    margin: 6px;
    margin-left: 12px;
    margin-right: 12px;
}
#navigation li:hover {
    background-color: var(--color_bg_normal);
    border-radius: 0px;
}
#navigation .active {
    background-color: var(--color_bg_normal);
    border-radius: 10px;
}
#navigation label {
    display: none;
    background-color: var(--color_bg_inv);
    color: var(--color_text_inv);
    text-align: center;
}
#navigation label p svg {
    display: inline;
    padding: 3px;
    margin: 0px;
    vertical-align: middle;
}
#navigation svg path {
    stroke-width: 2px;
    stroke: var(--color_text_inv);
}
#navigation p {
    padding: 2px;
    margin: 0px;
}
.palette * { color: var(--color_text_normal); font-variant: small-caps; }

/* small display: folded menu */
@media (max-width: 899px) {
    #banner .praxis-name, #banner .praxis-addresse, #banner .praxis-telefon {
        display: none;
    }
    #banner img {
        height: 75px;
    }
    #navigation label {
        display: initial;
    }
    #navigation {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
    }
    #navigation ul li a {
        margin: 6px;
    }
    #navigation ul {
        flex-direction: column;
        align-items: flex-start;
        flex-wrap: none;
        margin-left: 15px;
        margin-right: 15px;
    }
}
@media (min-width: 900px) {
    #navigation div {
        display: block;
    }
}

/* styling for page contents */
div.flexbox             { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center }
section                 { box-shadow: 0px 0px 9px var(--color_border); margin: 10px; padding: 0px; }
div.flexbox section     { max-width: 379px; }
div.two-column section  { min-width: 360px; max-width: 438px; }
section.timetable ul {
    list-style-type: none;
    padding: 0px;
}
section.timetable .day {
    color: var(--color_text_normal);
    padding: 6px;
    padding-bottom: 0px;
}
section.timetable .time {
    font-size: 16px;
    padding-top: 3px;
    padding-left: 10px;
    color: var(--color_text);
}
section.motto       { text-align: center; }
section.motto ul    { list-style-type:none; padding: 2px; }
section.motto ul li { padding-top: 3px; padding-bottom: 3px; }
section.motto img   { width: auto; height: auto; }
img.welcome         { width: 90%; max-width: 550px; min-width: 350px; height: auto; }
section img         { padding: 15px; }
img#img-praxisteam  { max-width: 344px; }

/* page positioning */
/*section.even        { float:left; } */
/*section.odd         { float:right; } */
section.even img    { float:right; clear: right; margin-right:0px; padding: 15px; max-width: 230px;}
section.odd img     { float:left; clear: left; margin-left:0px; padding: 15px; max-width: 230px;}
/* section.odd ul     { overflow: hidden; } */
section.even, section.odd { padding-bottom: 18px; overflow:hidden; }
section time        { float:right; padding-top:0px; margin-top:0px; margin-right: 6px; font-size:10px;}
/* brauchen wir zweimal, damit es über section.odd img gewinnt ... */
section img.block   { float: none; display: block; margin: auto; max-width: none;}
img.block           { float: none; display: block; margin: auto; max-width: none;}

.contact            { text-align: center; }
p.praxis-name       { font-size: 20px; padding-top: 4px; padding-bottom: 2px; font-weight: bold; }
p.praxis-doktor     { font-size: 20px; padding-top: 2px; padding-bottom: 2px; }
p.praxis-profession { font-size: 18px; padding-top: 2px; padding-bottom: 2px; }
p.praxis-addresse   { font-size: 18px; padding-top: 2px; padding-bottom: 2px; }
p.praxis-telefon    { font-size: 18px; padding-top: 2px; padding-bottom: 2px; }

#praxis-stempel *   { line-height: 1.0; padding-top: 0px; padding-bottom: 0px; margin: 2px;}
#praxis-stempel .praxis-profession { font-size: 16px; }
#praxis-stempel .praxis-telefon { display: none; }
#praxis-stempel .praxis-addresse { display: none; }