/* --- grösser --- */
@media only screen and (min-width: 1367px) {
    body {transform: scale(1.2); transform-origin: top center;}
    div.Content h1	{position: absolute; top: 15px; font-size: 62px;}
    div.Content h1#textright    {left: 345px;}
    div.Content h1#textright2    {left: 418px;}
    div.Content h2#textright2    {left: 418px; font-size: 20px;}
    div.Menu	{ position: absolute; top: 25px; left: 0px; right: 0px; height: 140px; border: 0px solid red;}
    div.hamburgerMenu    { display: none;}
    img#imgEingang       { width: 696px; margin-bottom: 0px;}
    div#eingangtext1     { position: absolute; top: 35px; left: 715px; margin-bottom: 0px; background-color: #789086;}
    div#eingangtext2     { position: absolute; top: 105px; left: 715px; margin-bottom: 0px; background-color: #839fb0;}
    div#eingangtext3     { position: absolute; top: 175px; left: 715px; margin-bottom: 0px; background-color: #a29093;}
    div#eingangtext4     { position: absolute; top: 245px; left: 715px; margin-bottom: 0px; bottom: 70px; padding-top: 20px; padding-left: 20px; background-color: #bbbcba; color: #ffffff;}
    div.FussContent	{ position: absolute; display: flex; gap: 10px; height: 140px; left: 0px; right: 0px; bottom: 0px; font-size: 12px; color: #eeeeee; background-image:url(/images/fusszeileLilie.png); z-index: 110;}
    div.Content img#imgEingang { margin: 35px 0 0 0;}
    div.Content img#imgPhilosophie { margin: 35px 0 0 0; float: right; width: 381px;}
    div.Content img#imgDienstleistungen { margin: 35px 0 0 0; width: 291px;}
    div.Content img#imgAnsprechpartner { margin: 35px 0 0 0; width: 381px;}
    table.impressum     { font-siz: 15px;}
    table.impressum tr  { font-siz: 15px;}
    table.impressum td  { width: 50%; vertical-align: top; padding-right: 80px;}    
    div.Content div#textleft2	{ position: absolute; top: 120px; left: 0px; right: 420px ; bottom: 70px; }
    div#textright	{position: absolute; top: 120px; left: 350px; right: 0px; bottom: 70px;}
    div#textright2	{position: absolute; top: 144px; left: 418px; right: 0px; bottom: 70px;}
    div#dastagkarte {position: absolute; top: 120px; left: 0px; right: 0px; bottom: 0px; height: 300px;margin: 0 0 0 0;}
    p#openrouteservice { position: absolute; top: 424px; margin: 24px 0; float: none;}
}

@media only screen and (min-width: 1999px) {
    body {transform: scale(1.5); transform-origin: top center;}
}

@media only screen and (min-width: 2600px) {
    body {transform: scale(1.8); transform-origin: top center;}
}


/* --- Laptop --- */
@media only screen and (max-width: 1366px) {
    div.Content h1	{position: absolute; top: 15px; font-size: 62px;}
    div.Content h1#textright    {left: 345px;}
    div.Content h1#textright2    {left: 418px;}
    div.Content h2#textright2    {left: 418px; font-size: 20px;}
    div.Menu	{ position: absolute; top: 25px; left: 0px; right: 0px; height: 140px; border: 0px solid red;}
    div.hamburgerMenu    { display: none;}
    img#imgEingang       { width: 696px; margin-bottom: 0px;}
    div#eingangtext1     { position: absolute; top: 35px; left: 715px; margin-bottom: 0px; background-color: #789086;}
    div#eingangtext2     { position: absolute; top: 105px; left: 715px; margin-bottom: 0px; background-color: #839fb0;}
    div#eingangtext3     { position: absolute; top: 175px; left: 715px; margin-bottom: 0px; background-color: #a29093;}
    div#eingangtext4     { position: absolute; top: 245px; left: 715px; margin-bottom: 0px; bottom: 70px; padding-top: 20px; padding-left: 20px; background-color: #bbbcba; color: #ffffff;}
    div.FussContent	{ position: absolute; display: flex; gap: 10px; height: 140px; left: 0px; right: 0px; bottom: 0px; font-size: 12px; color: #eeeeee; background-image:url(/images/fusszeileLilie.png); z-index: 110;}
    div.Content img#imgEingang { margin: 35px 0 0 0;}
    div.Content img#imgPhilosophie { margin: 35px 0 0 0; float: right; width: 381px;}
    div.Content img#imgDienstleistungen { margin: 35px 0 0 0; width: 291px;}
    div.Content img#imgAnsprechpartner { margin: 35px 0 0 0; width: 381px;}
    table.impressum     { font-siz: 15px;}
    table.impressum tr  { font-siz: 15px;}
    table.impressum td  { width: 50%; vertical-align: top; padding-right: 80px;}    
    div.Content div#textleft2	{ position: absolute; top: 120px; left: 0px; right: 420px ; bottom: 70px; }
    div#textright	{position: absolute; top: 120px; left: 350px; right: 0px; bottom: 70px}
    div#textright2	{position: absolute; top: 144px; left: 418px; right: 0px; bottom: 70px}
    p#openrouteservice { position: absolute; top: 424px; margin: 24px 0; float: none;}
}

/* --- Tablet: Landscape --- */
@media only screen and (max-width: 1200px) {
    div.Content h1	{position: absolute; top: 15px; font-size: 62px;}
    div.Content h1#textright    {left: 345px;}
    div.Content h1#textright2    {left: 418px;}
    div.Content h2#textright2    {left: 418px; font-size: 20px;}
    div.Menu	{ position: absolute; top: 25px; left: 0px; right: 0px; height: 140px; border: 0px solid red;}
    div.hamburgerMenu    { display: none;}
    img#imgEingang       { width: 696px; margin-bottom: 0px;}
    div#eingangtext1     { position: absolute; top: 35px; left: 715px; margin-bottom: 0px; margin-bottom: 0px; background-color: #789086;}
    div#eingangtext2     { position: absolute; top: 105px; left: 715px; margin-bottom: 0px; background-color: #839fb0;}
    div#eingangtext3     { position: absolute; top: 175px; left: 715px; margin-bottom: 0px; background-color: #a29093;}
    div#eingangtext4     { position: absolute; top: 245px; left: 715px; margin-bottom: 0px; bottom: 70px; padding-top: 20px; padding-left: 20px; background-color: #bbbcba; color: #ffffff;}
    div.FussContent	{ position: absolute; display: flex; gap: 10px; height: 140px; left: 0px; right: 0px; bottom: 0px; font-size: 12px; color: #eeeeee; background-image:url(/images/fusszeileLilie.png); z-index: 110;}
    div.Content img#imgEingang { margin: 35px 0 0 0;}
    div.Content img#imgPhilosophie { margin: 35px 0 0 0; float: right; width: 381px;}
    div.Content img#imgDienstleistungen { margin: 35px 0 0 0; width: 291px;}
    div.Content img#imgAnsprechpartner { margin: 35px 0 0 0; width: 381px;}
    table.impressum     { font-siz: 15px;}
    table.impressum tr  { font-siz: 15px;}
    table.impressum td  { width: 50%; vertical-align: top; padding-right: 80px;}    
    div.Content div#textleft2	{ position: absolute; top: 120px; left: 0px; right: 420px ; bottom: 70px; }
    div#textright	{position: absolute; top: 120px; left: 350px; right: 0px; bottom: 70px;}
    div#textright2	{position: absolute; top: 144px; left: 418px; right: 0px; bottom: 70px;}
    div#dastagkarte {position: absolute; top: 120px; left: 0px; right: 0px; bottom: 0px; height: 300px;margin: 0 0 0 0;}
    p#openrouteservice { position: absolute; top: 424px; margin: 24px 0; float: none;}
}

/* --- Tablet: Portrait --- */


/*
@media only screen and (max-width: 1012px) {
    div.Content h1	{position: absolute; top: 15px; font-size: 62px;}
    div.Content h1#textright    {left: 345px;}
    div.Content h1#textright2    {left: 418px;}
    div.Content h2#textright2    {left: 418px; font-size: 20px;}
    div.Menu	{ position: relative; top: 25px; left: 0px; right: 0px; height: 140px; border: 0px solid red;}
    div.Menu img    { margin-left: 24px;}
    div.Menu div.MenuEintraege { display: none; position: absolute; top: 30px; right: 64px; background-color: rgba(255, 255, 255, 0.9); border-radius: 12px;}
    div.Menu div.MenuEintraege ul { margin: 24px; }
    div.Menu div.MenuEintraege ul li { display: list-item; margin: 0 0 12px 0; list-style: none; }
    div.hamburgerMenu    { display: block; position: absolute; right: 24px; top: 57px;}
    img#imgEingang       { width: 100%; margin-bottom: 24px;}
    div#eingangtext1     { position: relative; top: 0px; left: 0px; margin-bottom: 12px; background-color: #789086;}
    div#eingangtext2     { position: relative; top: 0px; left: 0px; margin-bottom: 12px; background-color: #839fb0;}
    div#eingangtext3     { position: relative; top: 0px; left: 0px; margin-bottom: 12px; background-color: #a29093;}
    div#eingangtext4     { position: relative; top: 0px; left: 0px; margin-bottom: 12px; bottom: 70px; padding-top: 20px; padding-left: 20px; background-color: #bbbcba; color: #ffffff;}
    div#textleft2     { position: relative; top: 0px; left: 0px; margin-bottom: 12px; bottom: 70px; padding-top: 20px; padding-left: 20px; background-color: #bbbcba; color: #ffffff;}
    div.FussContent	{ position: relative; display: flex; gap: 10px; flex-direction: column;  height: auto; left: 0px; right: 0px; bottom: 0px; font-size: 12px; color: #eeeeee; background: url("/img/da_lilie_weiss2.svg") no-repeat top center, linear-gradient(to bottom, #003d64, #175d8a); background-size: contain, cover; z-index: 110;}
    div.FussContent div { flex: 1; margin-left: 24px;}
    div.FussContent div Tablet  { margin-left: 24px;}
    div.FussContent div:last-of-type    {margin-bottom: 36px;}
    div.Content     { position: relative; height: auto; top: 0px; right: 0px; bottom: 0px; left: 0px; padding: 24px;}
    div.ContentZentrierer       { max-width: 100%;}
    div.Fussleiste      { display: none;}
    div.Content img#imgEingang { margin: 35px 0 24px 0;}
    div.Content img#imgPhilosophie { margin: 35px 0 24px 0; float: none; width: 90%;}
    div.Content img#imgDienstleistungen { margin: 35px 0 0 0; width: 291px;}
    div.Content img#imgAnsprechpartner { margin: 35px 0 0 0; width: 381px;}
    table.impressum     { font-siz: 15px;}
    table.impressum tr  { font-siz: 15px;}
    table.impressum td  { width: 50%; vertical-align: top; padding-right: 80px;}    
    div.Content div#textleft2	{ position: absolute; top: 120px; left: 0px; right: 420px ; bottom: 70px; }
    div#textright	{position: absolute; top: 120px; left: 350px; right: 0px; bottom: 70px}
    div#textright2	{position: absolute; top: 144px; left: 418px; right: 0px; bottom: 70px}
    div#dastagkarte {position: absolute; top: 120px; left: 0px; right: 0px; bottom: 0px; height: 300px;margin: 0 0 0 0;}
    p#openrouteservice { position: absolute; top: 424px; margin: 24px 0; float: none;}
}*/


/* --- Tablet: Portrait --- */
@media only screen and (max-width: 1012px) {
    div.Content h1	{position: absolute; top: 24px; left: 24px; margin-top: 20px; font-size: clamp(2rem, 10vw, 5rem);}
    div.Content h1#textright    {left: 24px; margin-top: 20px;}
    div.Content h1#textright2    {left: 24px; margin-top: 20px;}
    div.Content h2    {left: 24px; margin-top: 10px; font-size: 15px;}
    div.Content h2#textright2    {left: 24px; top: 120px; margin-top: 10px; font-size: 15px;}
    div.Menu	{ position: relative; top: 25px; left: 0px; right: 0px; height: 140px; border: 0px solid red; min-width: 320px;}
    div.Menu img    { margin-left: 24px;}
    div.Menu div.MenuEintraege { display: none; position: absolute; top: 30px; right: 64px; background-color: rgba(255, 255, 255, 0.9); border-radius: 12px;}
    div.Menu div.MenuEintraege ul { margin: 24px; }
    div.Menu div.MenuEintraege ul li { display: list-item; margin: 0 0 12px 0; list-style: none; }
    div.hamburgerMenu    { display: block; position: absolute; right: 24px; top: 57px;}
    img#imgEingang       { width: 100%; margin-bottom: 24px;}
    div#eingangtext1     { position: relative; top: 0px; left: 0px; margin-bottom: 12px; margin-bottom: 12px; background-color: #789086;}
    div#eingangtext2     { position: relative; top: 0px; left: 0px; margin-bottom: 12px; background-color: #839fb0;}
    div#eingangtext3     { position: relative; top: 0px; left: 0px; margin-bottom: 12px; background-color: #a29093;}
    div#eingangtext4     { position: relative; top: 0px; left: 0px; margin-bottom: 12px; bottom: 70px; padding-top: 20px; padding-left: 20px; background-color: #bbbcba; color: #ffffff;}
    div#textleft2     { position: relative; top: 0px; left: 0px; margin-bottom: 12px; bottom: 70px; padding-top: 20px; padding-left: 20px; background-color: #bbbcba; color: #ffffff;}
    div.FussContent	{ position: relative; display: flex; gap: 10px; flex-direction: column;  height: auto; left: 0px; right: 0px; bottom: 0px; font-size: 12px; color: #eeeeee; background: url("/img/da_lilie_weiss2.svg") no-repeat top center, linear-gradient(to bottom, #003d64, #175d8a); background-size: contain, cover; z-index: 110;}
    div.FussContent div { flex: 1; margin-left: 24px;}
    div.FussContent div Tablet  { margin-left: 24px;}
    div.FussContent div:last-of-type    {margin-bottom: 36px;}
    div.Content     { position: relative; height: auto; top: 0px; right: 0px; bottom: 0px; left: 0px; padding: 24px; min-width: 320px; min-height: 440px;}
    div.ContentZentrierer       { max-width: 100%;}
    div.Fussleiste      { display: none;}
    div.Content img#imgEingang { margin: 35px 0 24px 0;}
    div.Content img#imgPhilosophie { margin: 136px 0 34px 0; float: none; height: 420px; max-height: 420px;}
    div.Content img#imgDienstleistungen { position:relative; margin: 136px 0 34px 0; float: none; height: 420px; max-height: 420px;}
    div.Content img#imgAnsprechpartner { position:relative; margin: 156px 0 34px 0; float: none; height: 420px; max-height: 420px;}
    table.impressum     { display: block;}
    table.impressum tr  { display: block;}
    table.impressum td  { display: block; width: calc( 100% - 40px ) ; vertical-align: top; padding-right: 40px;}    
    div.Content div#textleft2	{ position: relative; top: 20px; left: 0px; right: 0px ; bottom: 0px; margin-bottom: 44px; }
    div#textright	{position: relative; top: 20px; left: 0px; right: 0px; bottom: 0px; margin-bottom: 36px;}
    div#textright2	{position: relative; top: 20px; left: 0px; right: 0px; bottom: 0px; margin-bottom: 36px;}
    div#dastagkarte {position: relative; top: 46px; left: 0px; right: 0px; bottom: 0px; margin: 72px 0 0 0;}
    p#openrouteservice { position: absolute; top: 424px; margin: 24px 0; float: none;}
    div#textright2 table tbody tr td:nth-of-type(2):last-of-type    {padding-left: 24px;}
}


/* --- Mobile Phones --- */
@media only screen and (max-width: 739px) {
    div.Content h1	{position: absolute; top: 24px; left: 24px; margin-top: 20px; font-size: clamp(2rem, 10vw, 5rem);}
    div.Content h1#textright    {left: 24px; margin-top: 20px;}
    div.Content h1#textright2    {left: 24px; margin-top: 20px;}
    div.Content h2    {left: 24px; margin-top: 10px; font-size: 15px;}
    div.Content h2#textright2    {left: 24px; top: 86px; margin-top: 10px; font-size: 15px;}
    div.Menu	{ position: relative; top: 25px; left: 0px; right: 0px; height: 140px; border: 0px solid red; min-width: 320px;}
    div.Menu img    { margin-left: 24px;}
    div.Menu div.MenuEintraege { display: none; position: absolute; top: 30px; right: 64px; background-color: rgba(255, 255, 255, 0.9); border-radius: 12px;}
    div.Menu div.MenuEintraege ul { margin: 24px; }
    div.Menu div.MenuEintraege ul li { display: list-item; margin: 0 0 12px 0; list-style: none; }
    div.hamburgerMenu    { display: block; position: absolute; right: 24px; top: 57px;}
    img#imgEingang       { width: 100%; margin-bottom: 24px;}
    div#eingangtext1     { position: relative; top: 0px; left: 0px; margin-bottom: 12px; margin-bottom: 12px; background-color: #789086;}
    div#eingangtext2     { position: relative; top: 0px; left: 0px; margin-bottom: 12px; background-color: #839fb0;}
    div#eingangtext3     { position: relative; top: 0px; left: 0px; margin-bottom: 12px; background-color: #a29093;}
    div#eingangtext4     { position: relative; top: 0px; left: 0px; margin-bottom: 12px; bottom: 70px; padding-top: 20px; padding-left: 20px; background-color: #bbbcba; color: #ffffff;}
    div#textleft2     { position: relative; top: 0px; left: 0px; margin-bottom: 12px; bottom: 70px; padding-top: 20px; padding-left: 20px; background-color: #bbbcba; color: #ffffff;}
    div.FussContent	{ position: relative; display: flex; gap: 10px; flex-direction: column;  height: auto; left: 0px; right: 0px; bottom: 0px; font-size: 12px; color: #eeeeee; background: url("/img/da_lilie_weiss2.svg") no-repeat top center, linear-gradient(to bottom, #003d64, #175d8a); background-size: contain, cover; z-index: 110;}
    div.FussContent div { flex: 1; margin-left: 24px;}
    div.FussContent div Tablet  { margin-left: 24px;}
    div.FussContent div:last-of-type    {margin-bottom: 36px;}
    div.Content     { position: relative; height: auto; top: 0px; right: 0px; bottom: 0px; left: 0px; padding: 24px; min-width: 320px; min-height: 440px;}
    div.ContentZentrierer       { max-width: 100%;}
    div.Fussleiste      { display: none;}
    div.Content img#imgEingang { margin: 35px 0 24px 0; width: calc( 100% - 4px );}
    div.Content img#imgPhilosophie { margin: 85px 0 34px 0; float: none; width:  calc( 100% - 4px ); height: auto;}
    div.Content img#imgDienstleistungen { position:relative; margin: 85px 0 34px 0; float: none; width:  calc( 100% - 4px ); height: auto;}
    div.Content img#imgAnsprechpartner { position:relative; margin: 125px 0 34px 0; float: none; width:  calc( 100% - 4px ); height: auto;}
    table.impressum     { display: block;}
    table.impressum tr  { display: block;}
    table.impressum td  { display: block; width: calc( 100% - 40px ) ; vertical-align: top; padding-right: 40px;}    
    div.Content div#textleft2	{ position: relative; top: 20px; left: 0px; right: 0px ; bottom: 0px; margin-bottom: 44px; }
    div#textright	{position: relative; top: 20px; left: 0px; right: 0px; bottom: 0px; margin-bottom: 36px;}
    div#textright2	{position: relative; top: 20px; left: 0px; right: 0px; bottom: 0px; margin-bottom: 36px;}
    div#dastagkarte {position: relative; top: 20px; left: 0px; right: 0px; bottom: 0px; margin: 72px 0 0 0;}
    p#openrouteservice { position: absolute; top: 424px; margin: 24px 0; float: none;}
    div#textright2 table tbody tr td:nth-of-type(2):last-of-type    {padding-left: 24px;}
}