/*-- 
Name:          Beatrice von Singen, Hessisch Oldendorf
Url:           https://beatrice-von-singen.de
Description:   Beatrice von Singen, Hessisch Oldendorf | Symbolik, Magie und Kreativität Weserbergland
Version:       1.0 (elf42 Responsive)
______________ Webdesign by elf42 - Hameln Emmerthal */

/*-- 
_________________________ HTML > CSS; [© by elf42] -- */

html {         height:100%;  -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } 
body {     min-height:100%; background: url(img/00--hg-body-top.jpg) no-repeat center top var(--f01); 
                            color: var(--ci03); text-align: left; }
#bg-body {                  background: url(img/00--hg-body-bottom.jpg) no-repeat center bottom; 
                            padding-bottom:var(--ab); }
#bg {                       background: url(img/00--hg-bg-top.png) no-repeat center top var(--tr); }

* {                 -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

img {            border:0; text-decoration:none; }
table, td, div { border:0; }


/*-- body und co 
_________________________ HTML > CSS; [© by elf42] -- */

#kopf, 
#kopf-2, 
ul.nav, 
ol.breadcrumb, 
ol.breadcrumb > li, 
.c-flow, 
.c-mire, 
.c-mire:nth-child(2), 
.flex, 
ol.bc, 
ol.bc > li, 
ol.nav2, 
ol.nav2 > li, 
#abschluss, 
.sticky, 
#elf42 {             display: flex; }


#kopf {             justify-content: space-between;    align-items: flex-start; 
                    flex-wrap: wrap; }
 @media only screen and (min-width: 1024px ) {
#kopf {                                                align-items: center; align-content: flex-start; 
                    flex-wrap: nowrap; } }
/* ------------ */
#kopf-2 {              justify-content: center;        align-items: flex-start; }
/* ------------ */
ol.breadcrumb {         flex-wrap: wrap;               align-items: center; }
ol.breadcrumb > li {                                   align-items: flex-start; /*  einer zuviel !!!!!  */
                                                       align-items: center; }
/* ------------ */
.c-flow {              justify-content: space-between; }
.c-mire {              justify-content: space-between; align-items: flex-start; align-content: flex-start;
                       flex-wrap : wrap; }
.c-mire:nth-child(2) { justify-content: flex-start; 
                       flex-direction: column; }
.flex {                justify-content: space-between; align-items: flex-start;  
                       flex-wrap: wrap; }
/* ------------ */
ol.bc {                 justify-content: flex-start; 
                        flex-wrap: wrap; }
ol.nav2 {               justify-content: flex-start; 
                        flex-wrap: wrap; }
ol.bc > li, 
ol.nav2 > li {          align-items: stretch; }
/* ------------ */
#abschluss {            justify-content: space-between;     align-items: flex-start; 
                        flex-wrap: wrap; }
/* ------------ */
.sticky {               align-items: center; align-content: space-between;
                        flex-direction: column; }
/* ------------ */
#elf42 {                justify-content : flex-start; align-items : flex-end; }


/*-- body, kopf + logo 
_________________________ HTML > CSS; [© by elf42] -- */


body, 
header, 
#kopf, 
main, 
section.slogan, 
footer {                     margin:0;             padding:0; }
/* ------------ */
#bg, 
/* --- */
ol.breadcrumb, 
ol.bc, ol.nav2, 
/* --- */
.c-flow, .c-mi, .c-full, 
/* --- */
.hoch
#elf42 {                     margin:0 auto 0 auto; padding:0; }
/* ------------ */
#kopf {                      position: relative; }
label.menue {                position: absolute; z-index:30; }
nav#nav {                    position: relative; z-index:10;}
footer {                     position: relative; }
.sticky {                    position: fixed;    z-index:50; }
/* ------------ */
/*#bg, */
/* --- */
header, #kopf, nav#nav, 
/* --- */
#kopf-2, 
/* --- */
#breadcrumb, ol.breadcrumb, 
#bc, ol.bc, #nav2, ol.nav2, 
/* --- */
.c-flow, .c-mi, .c-full, 
/* --- */
footer, #abschluss, 
/* --- */
#elf42 {        width: 100%; }




.c-flow, .c-mi, 
.box, .flex, [class*="col-"], section.slogan, .bibu { margin: 0; padding: 0 0 var(--ac) 0; }

.c-full, .c-full .flex {                              margin: 0; padding: var(--am) 0; }




  @media only screen and (max-width: 599px) { /* MAX ! */
#bg {        width: 100%; padding: 0 var(--am) 0 var(--am); }
nav#nav, .c-flow, .c-mi {                                        padding: 0; }
#breadcrumb, main, #bc, #nav-2, #abschluss, #elf42 {             padding: var(--am); }
} @media only screen and (min-width: 600px ) {
#bg {        width: 100%; padding: 0 8% 0 8%; }
nav#nav  {                padding: 0 8%; }
.c-flow, .c-mi {                                                 padding: 0 var(--ab); }
#breadcrumb, #bc, #elf42 {                                       padding: 0 var(--ab); }
#abschluss  {                                                    padding: 0 var(--ac) 0 0; }

} @media only screen and (max-width: 767px ) { /* MAX ! */
ol.breadcrumb {                   padding: var(--a10) 0; }
ol.bc {                           padding: 0 0 var(--a40) 0; }
} @media only screen and (min-width: 768px) {
ol.breadcrumb {                   padding: var(--a10) 0; }
ol.bc {                           padding: 0 0 var(--a30) 0; }

} @media only screen and (max-width: 979px ) { /* MAX ! */
.c-flow {              flex-direction: column; } 
.c-mire {              flex-direction: column; }
.c-mire:nth-child(2) { min-height: 120vw; padding: 120vw var(--ab) 0 var(--ab); 
                       align-content : stretch; }
} @media only screen and (min-width: 980px ) {
.c-flow {                                                        padding: 0 0 0 var(--ab); }
.c-mi {                                                          padding: 0 var(--ab) 0 var(--ab); }
.c-mire:nth-child(1) {  width: 65%;                              padding: 0 var(--ab) 0 0; }
.c-mire:nth-child(2) {  width: 35%;                              padding: 75% var(--am) 0 var(--ab); 
                        align-content : stretch; }

}  @media only screen and (max-width: 1023px) { /* MAX ! */
}  @media only screen and (min-width: 1024px ) {
} @media only screen and (max-width: 1259px ) { /* MAX ! */
} @media only screen and (min-width: 1260px ) {
#bg {        width: 80%; padding: 0 7% 0 7%; }
nav#nav  {               padding: 0 16%; }
} @media only screen and (min-width: 1440px ) {
} @media only screen and (min-width: 1920px ) {
} @media only screen and (orientation: landscape) {}



/* --- */
#kopf {                      min-height: 50px; /* min-height .. ! */ }
label.menue {   width: 48%;  }
ul.nav {                     margin: var(--a20) 0 0 0; }
/* --- */
#kopf-2 {                    }
#logo {                      }
img.logo {      width: 100%; }
/* --- */
ol.breadcrumb > li {         padding:0; }
/* --- */
#elf42 {                     overflow-x: hidden;  }


  @media only screen and (max-width: 321px) { /* MAX ! */
#bg-body {            background-size: 400%; }
/* --- */
#kopf-2 {                       height: 38vw; padding: 32px 1% 0 0; }
#logo {                         width: 82%; }
} @media only screen and (min-width: 322px) {
#bg-body {            background-size: 190%; }
/* --- */
#kopf-2 {                       height: 40vw; padding: 34px 1% 0 0; }
#logo {                         width: 82%; }
} @media only screen and (max-width: 425px) { /* MAX ! */
} @media only screen and (min-width: 426px) {
#kopf-2 {                       height: 42vw; padding: 17% 1% 0 0; }
} @media only screen and (max-width: 599px) { /* MAX ! */
body {                background-size: 190%; }
#bg {                 background-size: 120%; }
/* --- */
ol.nav2 {             justify-content: flex-start; }
} @media only screen and (min-width: 600px ) {
body, #bg-body {      background-size: 160%; }
#bg {                 background-size: 110%; }
/* --- */
#kopf-2 {                       height: 38vw; padding: 14% 1% 0 0; }
#logo {                         width: 70%; }
} @media only screen and (max-width: 767px ) { /* MAX ! */
label.menue {             top: var(--a20); right: var(--ab); }
} @media only screen and (min-width: 768px) {
body, #bg-body {      background-size: 100%; }
#bg {                 background-size: 100%; }
/* --- */
label.menue {             top: var(--a40); right: var(--ac); }
/* --- */
#kopf-2 {                       height: 25vw; padding: 8% 2% 0 0; }
#logo {                         width: 45%; }
} @media only screen and (max-width: 979px ) { /* MAX ! */
} @media only screen and (min-width: 980px ) {
#kopf-2 {                       height: 25vw; padding: 8% 2% 0 0; }
}  @media only screen and (max-width: 1023px) { /* MAX ! */
ul.nav {               flex-direction: column; }
} @media only screen and (min-width: 1024px ) {
#kopf-2 {                       height: 22vw; padding: 6% 2% 0 0; }
#logo {                         width: 45%; }
} @media only screen and (max-width: 1259px ) { /* MAX ! */
} @media only screen and (min-width: 1260px ) {
#kopf-2 {                       height: 24vw; padding: 8% 2% 0 0; }
#logo {                         width: 45%; }
} @media only screen and (min-width: 1440px ) {
#kopf-2 {                       height: 25vw; padding: 9% 2% 0 0; }
#logo {                         width: 45%; }
} @media only screen and (min-width: 1920px ) {
#kopf-2 {                       height: 25vw; padding: 10% 2% 0 0; }
#logo {                         width: 45%; }
} @media only screen and (orientation: landscape) {}


#kopf {                  background: var(--tr); }
/* --- */
#kopf-2 {                background: var(--tr); } 
/* --- */
main {                   background: var(--m255); }

#logo a:link, #logo a:visited, #logo a:hover, #logo a:focus, #logo a:active { 
background: none; text-decoration:none; border:none; margin:0; padding:0; }



/*-- content
_________________________ HTML > CSS; [© by elf42] -- */


.c-flow {               background-color: var(--tr);    border: var(--no); }
.c-full {               background-color: var(--m182);    border: var(--no); }
.c-mi {                 background-color: var(--tr);    border: var(--no); }

.c-mire:nth-child(2) {  background: url(img/00--hg-c-mire-2.png) no-repeat left top var(--ci02); border: var(--no); background-size: 100%; }
.c-mi:nth-child(1) {    background: url(img/00--hg-c-mire-1.png) no-repeat left top var(--tr);   border: var(--no); background-size: 130%; }

  @media only screen and (max-width: 321px) { /* MAX ! */
} @media only screen and (min-width: 322px) {
} @media only screen and (max-width: 425px) { /* MAX ! */
} @media only screen and (min-width: 426px) {
} @media only screen and (max-width: 599px) { /* MAX ! */
.c-mire:nth-child(2) {  background-size: 100%; }
} @media only screen and (min-width: 600px ) {
.c-mire:nth-child(2) {  background-size: 100%; }
} @media only screen and (max-width: 767px ) { /* MAX ! */
} @media only screen and (min-width: 768px) {
} @media only screen and (max-width: 979px ) { /* MAX ! */
.c-flow {               background: url(img/00--hg-c-mire-1.png) no-repeat left top var(--tr);   border: var(--no); background-size: 130%; }
.c-mire:nth-child(1) {  background: var(--no); }
} @media only screen and (min-width: 980px ) {
.c-flow {               background: var(--no); }
.c-mire:nth-child(1) {  background: url(img/00--hg-c-mire-1.png) no-repeat left top var(--tr);   border: var(--no); background-size: 130%; }
}  @media only screen and (max-width: 1023px) { /* MAX ! */
} @media only screen and (min-width: 1024px ) {
} @media only screen and (max-width: 1259px ) { /* MAX ! */
} @media only screen and (min-width: 1260px ) {
} @media only screen and (min-width: 1440px ) {
} @media only screen and (min-width: 1920px ) {
} @media only screen and (orientation: landscape) {}








.box, .flex, section  { width: 100%; }

.box, .flex, [class*="col-"], section { background: var(--tr); border: var(--no); }

[class*="col-"] {       min-height: 10px; }


  @media only screen and (max-width: 599px ) {
.flex {           flex-direction: column; }

[class*="col-"] { width: 100%; }

} @media only screen and (min-width: 600px ) {
.flex {           flex-direction: row; }

.col-1 {          width: 6.33333333%;}
.col-2 {          width: 14.66666667%;}
.col-3 {          width: 23%;} 
.col-4 {          width: 31.33333333%;}
.col-5 {          width: 39.66666667%;}
.col-6 {          width: 48%;} 
.col-7 {          width: 56.33333333%;}
.col-8 {          width: 64.66666667%;}
.col-9 {          width: 73%;} 
.col-10 {         width: 81.33333333%;}
.col-11 {         width: 89.66666667%;}
.col-12 {         width: 100%;}
} @media only screen and (max-width: 767px ) { /* MAX ! */
} @media only screen and (min-width: 768px ) {
} @media only screen and (min-width: 980px ) {
} @media only screen and (min-width: 1260px ) {}

/*-- inhalt
_________________________ HTML > CSS; [© by elf42] -- */


.colum {        margin:0 auto 0 auto; padding: 0 0 var(--ab) 0; }

 @media only screen and (min-width: 1259px ) {
.rev {          display: flex; flex-direction: column-reverse; } 
} 

.colum {       column-fill: auto; } 
.colum h2 {    column-span: all; }
ol.colum li {  margin-block-start:0; } 

  @media only screen and (max-width: 599px) {
.colum {       column-count: 1; column-gap: 0; }
} @media only screen and (min-width: 600px ) {
.colum {       column-count: 2; column-gap: 20px; }
} @media only screen and (min-width: 1024px ) {
.colum {       column-count: 2; column-gap: 30px; }
ol.colum li {  margin: 8px 16px 8px 8px; }
}

/*-- inhalt
__________#kopf-2 h1_______________  Webdesign by elf42 - Hameln Emmerthal    */


html, 
h5, h6, p, span, 
h4, figcaption, .xs, mark, time, 
main ol, main ul, main li, 
main a:link, main input, 
blockquote, q, cite, figcaption, 
#nav a, #nav span, .navsub a, #breadcrumb li, #elf42 
{ font-family: "Roboto", Verdana; line-height: 1.6em; }/*34579*/


section.slogan, 
h1, h2, h3, 
h4, cite, /*main button, */
body#iza2 main :where( h5, h6, p, span, ol, ul, li, a:link, mark, time ), 
body#ahnen-bedeutung-lebensberatung-selbstentfaltung main :where( h5, h6, p, span, ol, ul, li, a:link, mark, time ), 
body#maerchen-erzaehlung-symbolik-bedeutung main :where( h5, h6, p, span, ol, ul, li, a:link, mark, time ), 
body#home main :where( h5, h6, p, span, ol, ul, li, a:link, mark, time ) 
{ font-family: "Charm", Roboto; line-height: 1.8em; word-spacing: 0.06em; letter-spacing: 0.08em; }/*4*/


body#iza1 main :where( h1, h4, h5, h6, p, span, ol, ul, li, a:link, mark, time, cite, figcaption, button) 
{ font-family: "Birthstone", Roboto; line-height: 1.8em; word-spacing: 0.06em; letter-spacing: 0.08em; }/*4*/


#nav span, #nav a, ol.nav2, .btn, button {   /*text-transform: uppercase;*/ }
:is(h1, .h1, h2, .h2, h3, .h3, h5, h6, .h6 ) { margin:0; text-align:left; }
:is(h4, .h4, figcaption ) {                           text-align: center; }

h1 {                           padding: var(--a40) 0; }
h2 {                           padding: 0 0 var(--a30) 0; }
.h1, h4, figcaption, h6 {      padding-bottom: var(--a20); }
figcaption { padding: var(--a10) 0 0 0; }
h3, p {                        padding-bottom: var(--a15); }

.c-mire:nth-child(2) :is(h1, h2, h3, h4, h5, h6, p, span, .xs, time, figcaption), 
.c-full :is(             h1, h2, h3, h4, h5, h6, p, span) { color: var(--m255); }


h1 {                color: var(--ci01);  font-weight: 700; }
h1.h1 {  }
h2 {                color: var(--ci01);  font-weight: 800; }
h2.h2 {  }
h3 {                color: var(--m52);   font-weight: 400; }
h3.h3 {  }
h4, figcaption {    color: var(--m128);  font-weight: 300; }
h5 {                color: var(--ci01);  font-weight: 600; padding: var(--a30) 0; }
h6 {                color: var(--ci01);  font-weight: 600; }

.txt {              color: var(--ci01); }
.xs, time {         color: var(--m128);  font-weight: 400; }

body#ahnen-bedeutung-lebensberatung-selbstentfaltung main p.txt-2 
{ font-family: "Roboto", Verdana; line-height: 1.6em; } 

strong {                                font-weight: 400; }

p {                margin:0;            font-weight: 300; }
p~h2, p~h2.h2, p~h3, p~h3.h3, p~h4 {                       padding-top: 20px; }

main p, main h5, main h6, main ul li, main ol li, section.slogan { 
       word-wrap: break-word; 
       hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; 
       hyphenate-limit-chars: auto 5; hyphenate-limit-lines: 2; 
       -webkit-hyphenate-limit-chars: auto 5; -webkit-hyphenate-limit-lines: 2; 
       -ms-hyphenate-limit-chars: auto 2; -ms-hyphenate-limit-lines: 4; }

section.slogan {   color: var(--m182); font-size: 1.3em; font-weight: 400; text-align: center; } 

ol, ul, li {       text-align: left; }
input, select, textarea, button { font-size: inherit; font-family: inherit; }

ul.nav a, ul.nav li, li.drop span, li.drop label, 
ul.navsub a {    font-size: 1em; font-weight:400; }


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

h1, h2 {                            font-size: 1.5rem; }
h3, h5, h6 {                        font-size: 1.1rem; }
p, span, main ul, main ol, main li, main a:link, mark, blockquote, q, input, button
{                                   font-size: 1rem; }
h4, figcaption, .xs, time, cite{    font-size: 0.9rem; }

} @media only screen and (min-width: 768px) {

h1, h2 {                            font-size: 1.8rem; }
h3, h5, h6 {                        font-size: 1.2rem; }
p, span, main ul, main ol, main li, main a:link, mark, blockquote, q, input, button
{                                   font-size: 1.1rem; }
h4, figcaption, .xs, time, cite{    font-size: 0.9rem; }

} @media only screen and (min-width: 1260px ) {
} @media only screen and (orientation: landscape) {}

::selection {            color: var(--m255); background: var(--ci01); }
::-moz-selection {       color: var(--m255); background: var(--ci01); }

mark { padding: 1px 5px; color: var(--ci03); font-weight:bold; background: var(--m242); border-radius: 5px; }

sub, sup { line-height: 0 }

code {  }
pre { font-size: 1em; white-space: pre-wrap; word-wrap: break-word; }


blockquote, q {    margin: 0; padding: 0; color: var(--m82); line-height:2em; font-weight: 300;}

blockquote:before, blockquote:after, 
q::before, q::after {   padding: 0 10px; font-family: Georgia/*Times*/, serif; font-size: 2em; color: var(--ci02); }

blockquote:before, q::before {   content: open-quote;}
blockquote:after, q::after {     content: close-quote;}

cite {             padding: 0 0 0 40px; color: var(--ci01/*m160*/); line-height: 1rem; }

cite::before {     content: "\A\00A0\00A0\00A0\00A0\00A0\00A0\00A0\-\00A0\00A0 "; white-space: pre; line-height: 1rem; font-size: 1rem; }
section[data-title~="Feedback"] { margin-bottom: var(--ac); }

/*-- iconfont
_________________________ elf42 */

main [class*="fa-"]:before, main [class*="icon-"]:before {
                               color: var(--m182); text-shadow: 1px 1px 1px var(--m255); 
                               vertical-align: -10%; font-size: 1.8rem; }
/* FontAwesome */
main [class*="fa-"]:before {   margin:0 0.5em 0 0.5em; }
/* fontello */
main [class*="icon-"]:before { margin:0 1em 0 1em; }



/*-- 
_________________________ HTML > CSS; [© by elf42] -- */

hr {           width:100%; clear:both; border: 1px solid var(--m200);
               margin-block-start: 30px; margin-block-end: 60px; margin-inline-start:0; margin-inline-end:0; }
hr.hr {        border: 1px solid var(--f03); }

:root { 
--am: 15px; --ac: 60px; --ab: 30px; /* mobile / content / box*/
 --a5: 5px;  --a10: 10px; --a15: 15px; 
--a20: 20px; --a30: 30px; --a40: 40px; 
--a50: 50px; --a60: 60px; --a70: 70px; 
--a80: 80px; --a90: 90px; --a100: 100px; 
--a200: 200px; --a250: 250px; --a300: 300px; --a400: 400px; 
}

[class^="a"] { width:100%; clear:both; }
  .a5 {   height:5px;}  .a10 {  height:10px;}  .a20 {  height:20px;}  .a30 {  height:30px;}  .a40 {  height:40px;} 
 .a50 {  height:50px;}  .a60 {  height:60px;}  .a70 {  height:70px;}  .a80 {  height:80px;}  .a90 {  height:90px;} 
.a100 { height:100px;} .a200 { height:200px;} .a300 { height:300px;} .a400 { height:400px;} .a500 { height:500px;}


/*-- 
_________________________ HTML > CSS; [© by elf42] -- */

main a:link, main a:visited {               color: var(--ci03);  padding: 0; background: var(--no); font-size: inherit; text-decoration: none; border-bottom: 1px solid var(--ci01); }
main a:hover, main a:focus, main a:active { color: var(--ci01);  padding: 0; background: var(--no); font-size: inherit; text-decoration: none; border-bottom: 1px solid var(--ci01); }

a.lio:any-link{                             color: var(--m82); cursor:default; background:none; text-decoration:none; border:none; }


/*-- 
_________________________ HTML > CSS; [© by elf42] -- */

button[type="submit"], 
button:visited, a.btn:visited,
button, a.btn:link {         margin:0; padding: var(--a10) var(--a20); 
                             display: inline-block; cursor: pointer; 
                             text-align:center; text-decoration:none; 
                             color: var(--ci03);
                             border:  1px solid var(--m200); border-radius: 20px; 
                             background-image: linear-gradient(to top, var(--m242) 0%, var(--m255) 90%); }
button[type="submit"]:hover, 
button:hover, a.btn:hover {  color: var(--m82);
                             border: 1px solid var(--m212); 
                             background-image: linear-gradient(to top, var(--m242) 0%, var(--m255) 90%); }

button, a.btn, button[type="submit"] {  width: 100%; margin-bottom: 15px; }
a.btn.zurueck {        width: 33%; }
a.btn.weiter {         width: 33%; }
a.btn.uebersicht {     width: 33%; }

a.btn:hover::before, a.btn:hover::after, 
a.btn::before, a.btn::after { padding: 0 20px 0 10px; vertical-align: -1%; font-size: 1.2em; line-height: 2em; 
                              font-family: 'FontAwesome'; font-weight:normal; 
                                          color: var(--m182); }

a.btn::before, a.btn::after {             color: var(--m182); }
a.btn:hover::before, a.btn:hover::after { color: var(--m182); }

a.info::after {              content: "\f105"; }
a.info:hover::after {        content: "\f105"; }

a.download::before {         content: "\f1c1"; }
a.download span.xs::before { content: "\A"; white-space: pre; } 
a.download:hover span.xs {                  color: var(--m128); }

a.anker::after {             content: "\f107"; }
a.tel::before {              content: "\f095"; }
a.mail::before {             content: "\f003"; }

a.maps::before {             content: "\f041"; font-size: 1.5em;}
a.maps:hover::before {                         font-size: 1.5em;}

a.kon::before {              content: "\f2c3"; }
a.zurueck::before {          content: "\f104"; }
a.weiter::after {            content: "\f105"; }
a.uebersicht::before, 
a.uebersicht::after {        content: "\00A0";} /* leerzeichen */


/* falls formular vorhanden */
button[type="submit"] i {                margin: var(--a20) var(--a10); }
button[type="submit"] i:before {         content: "\f1d9"; } /* dies ist die outline-version des icons*/
button[type="submit"]:hover i:before {   color: var(--m82); }

  @media only screen and (max-width: 599px) {
button[type="submit"]{           width: 100%; }

} 

a.btn.zurueck, 
a.btn.weiter {        margin-bottom: var(--a20);}

/* zur uebrsicht steht im quelltext immer unten */
.btn2.zurueck, 
/* andere aufteilung btn */
.zwue2 a.btn.zurueck {    order:1; }
.btn2.weiter, 
.zwue2 a.btn.weiter {     order:3; }
.btn2.uebersicht, 
.zwue2 a.btn.uebersicht { order:2; }

  @media only screen and (max-width: 599px) {
.flex.btn2 { flex-direction: row; flex-wrap: wrap; }
a.btn.zurueck, 
a.btn.weiter, 
.c-mire:nth-child(2) a.btn.zurueck, 
.c-mire:nth-child(2) a.btn.weiter {    width: 100%; }
} @media only screen and (max-width: 979px ) {
.zwue2 a.btn.zurueck {    text-align:left; }
.zwue2 a.btn.weiter {     text-align:right; }
} @media only screen and (min-width: 980px ) {
a.btn.zurueck {        width: 48%; }
a.btn.weiter {         width: 48%; }
a.btn.uebersicht {     width: 100%; }
.c-mire:nth-child(2) a.btn.zurueck, 
.c-mire:nth-child(2) a.btn.weiter, 
.c-mire:nth-child(2) a.btn.uebersicht { width: 100%; }
.zwue2 a.btn.zurueck {        width: 33%; }
.zwue2 a.btn.weiter {         width: 33%; }
.zwue2 a.btn.uebersicht {     width: 33%; }

} @media only screen and (orientation: landscape) {}

/*-- 
_________________________ HTML > CSS; [© by elf42] -- */

main ul {             margin: 0 10px  var(--a15) var(--a15); padding: 0 var(--a15); }
main ul li {          padding: var(--a5); position: relative; list-style: none; 
                      font-weight:300; }

main ul li:before {   position:absolute; left: -1.5em; padding:0; vertical-align: -15%; 
                      /*font-family: 'FontAwesome';*/ font-size: 1rem; font-weight:300; 
                      color: var(--m200); content: "\2731"; }

main ol {             padding: 0  var(--a15) var(--a30) 0; margin: 0; }
main ol li {          padding: var(--a15); margin: 8px; list-style: none; 
                      position: relative; left: -0.5em; font-weight:300;
                      background: rgba(var(--m200t),0.3); }
main ol li:before {   color: var(--no); content: " "; }

body[id*="blog-"] .c-mire:nth-child(2) ol li {     background: rgba(var(--m52t),0.2); }
body[id*="blog-"] .c-mire:nth-child(2) ol li a {   color: var(--m255); }
body[id*="blog-"] .c-mire:nth-child(2) :is(time) { color: var(--m0); }

/*-- sitemap
_________________________ elf42 */

ul.sitemap {                    margin: 0 10%; } 
ul.sitemap li.sitemap {         padding: 15px 0 15px 6px; color: var(--m142); background: var(--no); }
ul.sitemap li.sitemap ul {      padding: 10px 0 0 40px;   color: var(--m142); background: var(--no); }

ul.sitemap li::before {         position:absolute; left: -1em; padding:0; vertical-align: -15%; 
                                font-family: 'FontAwesome'; font-size: 1rem; font-weight:300; 
                                color: rgba(var(--ci01t),0.6); content: "\f192"; }
ul.sitemap li.sitemap::before {                     content: " "; }

ul.sitemap a:link, ul.sitemap a:visited {                       color: var(--m82); background: var(--no); border: var(--no); }
ul.sitemap a:hover, ul.sitemap a:focus, ul.sitemap a:active {   color: var(--m0);  background: var(--no); border: var(--no); }



/*-- impressum, kontakt
_________________________ elf42 */


.addi {     margin:0 auto 0 auto; padding: 0 0 20px 0; 
            display: flex; flex-wrap: wrap; 
            justify-content: flex-start; align-items : flex-start; }

.addi .ad {    width: 100%; display: flex; flex-direction: column; } 
.addi table {  margin:0; padding:0; }
.addi h2 {     padding: 0; }

.addi .ad- {           } 
.addi .ad-1 {          } /* firma */
.addi .ad-2 {          } /* adresse */
.addi .ad-3 {          } /* kontakt */
.addi .ad-4 {          } /* impressum inhaber */
.addi .ad-5 {          } /* impressum geschaeftsfuehrung */
.addi .ad-6 {          } /* impressum steuernummer */
.addi .ad-m {          } /* maps */
.addi .ad-z {          } /* zeiten */
.addi .ad-s {          } /* social */
.addi .ad-a {          } /* verlinkungen, menue */


.addi [class*="ad-"] { width: auto; margin:0 0 20px 0; padding:0 50px 0 0; }
.addi .ad-2 { padding:0 90px 0 0; }
.addi .ad-4 { padding:0 200px 0 0; }

.addi [class*="ad-"] { background: var(--no); } /* nur fuers layout ..*/

.addi table td:nth-child(1) { font-weight:300; padding:0; color: var(--m182); }

.addi [class*="ad-"] table td:nth-child(1) { padding:0 15px 0 0; color: var(--m182); }
.addi .ad-2 table td:nth-child(1), .addi .ad-3 table td:nth-child(1), .addi .ad-4 table td:nth-child(1) { min-width: 70px; }


/* maps auf kontakt ohne btn */
.addi .ad-m a.maps:any-link { color: var(--m82); background:none; text-decoration:none; border:none; }
.addi .ad-m a.maps::before {  padding: 0 20px 0 10px; vertical-align: -2%; font-size: 1.6em; line-height: 2em; 
                              font-family: 'FontAwesome'; font-weight:normal; color: var(--m200); }
/* oeffnungszeiten */
.addi .ad-z table td:nth-child(1) { min-width: 150px; font-weight:300; }



  @media only screen and (max-width: 440px) {
.addi table tr td:nth-child(2) { overflow: hidden; white-space: nowrap; text-overflow:ellipsis; max-width: 180px; }
} @media only screen and (max-width: 1023px) {
.addi { flex-direction: column; }
} @media only screen and (min-width: 1024px ) {}










/*-- breadcrumb
_________________________ HTML > CSS; [© by elf42] -- */

#breadcrumb {                 background: var(--f01); }

ol.breadcrumb {               background-color: var(--tr); list-style: none; }

ol.breadcrumb > li {          color: var(--ci01); 
                              font-size: 1em; line-height: 1.8; text-transform: none; 
                              background-color: var(--tr); }

ol.breadcrumb li > strong {   padding-left:10px; }

#breadcrumb a:any-link {      font-size: 1em; line-height: 1.8; text-decoration: none; text-transform: none; }

#breadcrumb a:link, #breadcrumb a:visited { 
                              color: var(--m112); font-size: 1em; text-decoration: none; 
                              border: var(--no); background: var(--no); }
#breadcrumb a:hover, #breadcrumb a:focus, #breadcrumb a:active { 
                              color: var(--ci01); font-size: 1em; text-decoration: none; 
                              border: var(--no); background: var(--no); }

ol.breadcrumb a::after {      padding:0 20px; 
                              color: var(--ci01); 
                              font-size: 1em; font-family: 'FontAwesome'; content: "\f105"; }

body#home ol.breadcrumb li:nth-child(1) a::after, 
body#webdesign ol.breadcrumb li:nth-child(1) a::after { content: " "; } 


/*-- bc
_________________________ HTML > CSS; [© by elf42] -- */

#bc {                         background: var(--f01); }

ol.bc {                       background-color: var(--tr); list-style: none; }

ol.bc > li {                  color: var(--m112); 
                              font-size: 1em; line-height: 1.8; text-align:left; text-transform: none; 
                              background-color: var(--no); }

#bc a:any-link {              padding:8px 20px 8px 0; 
                              font-size: 1em; line-height: 1.8; text-decoration: none; text-transform: none; }

#bc a::before {               padding:0 15px 0 0; vertical-align:-2px; 
                              font-size: 1.1em; /*font-family: 'FontAwesome';*/ content: "\2212"; 
                              color: var(--m200); }

#bc a::after { content: ""; } 

#bc a:link, #bc a:visited { 
                              color: var(--m112); font-size: 1em; text-decoration: none; border: none; background: var(--no); }
#bc a:hover, #bc a:focus, #bc a:active { 
                              color: var(--m0); font-size: 1em; text-decoration: none; border: none; background: var(--no); }

#bc a:hover::before {         color: var(--ci01);  }

#bc [class^="a"] { width:auto; clear: none; }



/*-- second menue
_________________________ HTML > CSS; [© by elf42] -- */

#nav-2 {                          background: var(--f01); border: var(--no); }

ol.nav2 {                         background: var(--tr); list-style: none; }

ol.nav2 > li {                    color: var(--m112); font: 1em/1.8; text-align:left; }
ol.nav2 li::before, 
ol.nav2 li::after {      /*padding:0 10px 0 0; content: " ";*/ }

#nav-2 a:any-link {               font-size: 1em; text-decoration: none; }
#nav-2 a:link, #nav-2 a:visited { padding: var(--ab); 
                                  color: var(--m112); background-color: var(--no); }
#nav-2 a:hover, #nav-2 a:focus, #nav-2 a:active {
                                  color: var(--m0);   background-color: var(--no); }


/*-- abschluss
_________________________ HTML > CSS; [© by elf42] -- */

footer {                      background: var(--tr); }
                              
#abschluss {                  background: var(--tr); }

#abschluss .elem {            width: 100%; 
                              display: flex; flex-direction: column; } 
#abschluss .elem- {           } 
#abschluss .elem-1 { color: var(--m82); } 
#abschluss .elem-2 { color: var(--m82); } 
#abschluss .elem-3 { color: var(--m82); } 


#abschluss .elem-3 { display: flex; flex-direction: row; } 

.elem-3 a:link {       width: 60px; height: 60px; display:block; 
                       margin:0 0 0 20px; padding: 0; border: none; }

.elem-3 a:hover, .elem-3 a:focus, .elem-3 a:active {
                       opacity:0.7; 
                       border: none; }

.elem-3 a.at {       background: url(img/email.svg) no-repeat center top; }
.elem-3 a.facebook {   background: url(img/facebook.svg) no-repeat center top; }


 @media only screen and (max-width: 599px) {
#abschluss {              width: 100%; 
                          justify-content: flex-start; flex-direction: row; }

[class*="elem-"] {                     margin: 4% 0 4% 0; }

.elem-3 a:link {       width: 50px; height: 50px; display:block;  }
.elem-8 img {          width: 50vw; margin-right:50px; }

} @media only screen and (min-width: 600px ) {
[class*="elem-"] {                     margin: 7% 0 4% 0; }
.elem-8 img {          width: 50vw; }
} @media only screen and (min-width: 1024px ) {
.elem-8 img {          width: 40vw; }
} @media only screen and (min-width: 1260px ) {
.elem-8 img {          width: 30vw; }
} @media only screen and (min-width: 1260px ) {
.elem-8 img {          width: 20vw; }
}


/*-- hoch
_________________________ HTML > CSS; [© by elf42] -- */

.sticky {        width: 50px; height: auto;  }

button.hoch {   
                       width: 50px; height: 50px; 
                       background: url(img/totop.svg) no-repeat center top; 
                       margin:0 auto 0 auto; padding: 0; border: none; }

button.hoch:hover, button.hoch:focus, button.hoch:active {
                       background: url(img/totop.svg) no-repeat center top; opacity:0.7; 
                       border: none; }

button.hoch { scroll-behavior: smooth; transition: opacity 0.5s; }

  @media only screen and (max-width: 599px) {
.sticky {        right: var(--am); bottom: 15vh; }
} @media only screen and (min-width: 600px) {
.sticky {        right: var(--am); bottom: 5vh; }
} @media only screen and (min-width: 768px ) {
} @media only screen and (min-width: 980px ) {
.sticky {        right: var(--ab); }
} @media only screen and (min-width: 1024px ) {
}

/*-- webdesign
_________________________ elf42 */

body#impressum a.webdesign:any-link { background:none; text-decoration:none; border:none; color: inherit; font-weight:inherit; font-size: inherit; cursor:text; font-family: "Charm", Roboto; }
body#webdesign main a:any-link {      background:none; text-decoration:none; border:none; color: inherit; font-weight:inherit; font-size: inherit; cursor:text; font-family: "Charm", Roboto; }


/*-- related links
_________________________ elf42 */

#elf42 {               background-color: var(--tr); overflow:auto; }

#elf42 .logoelf42 {                margin: 2rem 1rem 0 0; padding: 0; 
                       width: 6vw; opacity: 1; }
   
#elf42 .related {                  margin: 0; padding: 0; 
                                   color: var(--e02); font-size:0.9rem; text-align:left; }

#elf42 a, #elf42 a:link, #elf42 a:active, #elf42 a:hover, #elf42 a:focus, #elf42 a:visited { 
                                  color: var(--e02); font-size:0.9rem; text-decoration:none; 
                                  background: var(--no); border: var(--no); }

  @media only screen and (max-width: 767px) {
#elf42 {          flex-direction:column; }
#elf42 .related { text-align:center; }
} @media only screen and (min-width: 768px) {
} @media only screen and (min-width: 1260px ) {}
@media only screen and (orientation: landscape) {}