:root {
  --color-light: #eef2f2;
  --color-dark: #222;
  --color-coffee: #34282a;
  --color-dark-grey: #7c7784;
  --color-grey: #d5d8d5;
  --color-cream: #c48f5a;
  --color-read: #a14e3a;
  --color-bblue: #B0E2FF;
  

  --border-radius: 5px;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

/* ANCHOR Farb und Schrift Variable */
body  {
  --color-black: #191919;
  --color-white: #e1e1e1;
  --color-grey: #979797;
  --color-green: #13f270;
  --color-red: #fc1a52;
  --color-purple: #cb06d9;
  --color-yellow: #c1de04;
  --color-blue: #03bfee;

  --font: "Roboto", sans-serif;
  --font-scale: 0.4vw
  --line: 3ch;
}

body  {  
  margin: 0;
  font-weight: 400;
  font-style: normal;
  font-size: calc(1rem + var(--font-scale));
  font-family: var(--font);
  line-height: var(--line);
  background-color: fafafa; /*#bdc8bf;*/
}

.header {
   background: linear-gradient(to right, #8dc6e1 0%,#27799e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   background-repeat: repeat:  
   position: relative;
   height: 210px;		
   padding-top: 15px;
   padding-bottom: 25px;
   width: 100%;
}


header, main, footer {
  width: 100%;
  max-width: 1380px; /*1660 px*/
  margin: 0 auto;
  padding: 20px;
}

main  {min-height: 780px;}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}

.logo {
  height: 100%;
  float: left;
  padding-left: 80px;
  margin: 0px;
}

.logo1 {
    height: 100%;	
    width: 100%;	
    margin: 0 auto;	
	  display: flex; 
    justify-content: center; 
    align-items: center;
	objekt-fit: contain;
}

.phone {
    height: 90%;
    float: right;
    padding-right: 100px;
    padding-top: 10px;
    margin: 0px;
    font-size: calc(1rem + var(--font-scale));
    border-left: 3px solid skyblue; margin: 15px;
    border-radius: 0px;
    line-height: 2ch;
}

.phone p { padding-left: 20px;}

.bg-img     {
    background-image: url("logo_grey-54.png");	
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size:cover;	
    min-height: 180px;
 /* Needed to position the navbar */
     position: relative;
}

caption::before {
	content: "";
	position: absolute;
	display: block;
	height: 0;
	width: 0;
	top: 1em;
	left: -0.6em;
	border-style: solid;
	border-width: 0.6em;
	border-color: transparent hsl(13, 96%, 35%) transparent transparent;
	z-index: -1;
}

dialog {
  background-color: #222222;
  color: white;
  border-radius: 15px;
  
  max-width:30%;
  margin-top:  40px;
  margin-left: 500px;
}

dialog h3 {
  margin-top: 0;
  padding-bottom: 5px;
}

.dialog-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8pxs;
  padding: 16px;
}

#open-dialog  { 
  display:;                       // auf none setzten wenn der Button nicht sichtbar sein soll
  color: black;
}

.close  {
  margin-top: 20px;
}


/* ANCHOR h2 und links */

h2  {
  color: var(--color-grey);
}


a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none ;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

a {
  color: var(--color-grey);
}

/* -------------------------------- */

.prkurz {
  font-weight: 200;
  font-size: small;
}

.preisikon {
  text-align:center; font-size: 0.7rem;
}

#inhalt {
  width: 100%;
  max-width: 80%;
  margin: 0 auto;
}

.service ul,li {list-style-type: none;}

table {border-spacing: 0;}

tbody tr:hover, tfoot tr:hover { 
  background-color:#a39e90;
}



/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  line-height: 22px;
}

.column h2 {
  padding-bottom: 15px;
}

.column1 {
    float:left;
    width: 33.33%;
    padding:10px;
}

.colum  {
  border: 2px solid skyblue;
  border-radius: 10%;
  padding: 20px;
}

/* Clear floats after the columns */
.row::after {
  content: "";
  display: table;
  clear: both;
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.flex-container-col {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.flex-item {
  padding: 15px;
  margin: 0px; 
  flex: 1;
}


.flex-container {
  display: flex;
  flex-direction: row;
  text-align: center;
  padding-bottom: 30px;
  gap: 10px;
}

.flex-item-left {
  padding: 0px;
  margin: 1px; 
  flex: 1;
  border: 1px solid;
}

.flex-item-middel {
  padding: 0px;
  flex: 1;
  margin: 1px;
}


.flex-item-right {
  padding: 0px;
  flex: 1;
  margin: 1px;
}

.flex-item-zonen {
  padding: 0px;
  flex: 20%;
  margin: 1px;
}

.flex-item-tbl-left {
  padding: 15px;
  flex: 25%;
  margin: 1px;
 border-spacing: 0;
}

.flex-item-tbl-right {
  padding: 15px;
  flex: 55%;
  margin: 1px;
  border-left: 5px solid;
  border-color: var(--color-grey);
  padding-left: 25px;
}

caption {
  text-align: left;
  padding-bottom: 0px;
}

/* ANCHOR *******  LIGHTBOX   */


/* Ungeöffnete Lightbox */
			.lightbox {
				display: none;
			}

		/* Geöffnete lightbox */
			.lightbox:target {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
        display: flex;
			}

		/* Lightbox Inhalt */
			.lightbox figcaption {
				width: 50rem;
				position: relative;
				padding: 1.5em;
				background-color: Lightblue;
        font-size: calc(1rem + var(--font-scale));
        display: flex;
			}

		/* Button zum Schließen */
			.lightbox .close {
				position: relative;
				display: block;
			}

			.lightbox .close::after {
				right: -1rem;
				top: -1rem;
				width: 2rem;
				height: 2rem;
				position: absolute;
				display: flex;
				z-index: 1;
				align-items: center;
				justify-content: center;
				background-color: black;
				border-radius: 50%;
				color: white;
				content: "×";
				cursor: pointer;
			}

		/* Lightbox Überlagerung (Overlay) */
			.lightbox .close::before {
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				position: fixed;
				background-color: rgba(0,0,0,.7);
				content: "";
				cursor: default;
			}	

.abfrage {
  width: 100%; 
 /* max-width: 500px;*/
  height: auto; 
 /*float: left;*/ 
  font-size: 16px;
  margin-inline: auto;
  
}

.tracking {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 500px;
  float: left;
  font-size: 10px;
  border-bottom: 3px solid var(--color-blue);padding-bottom:  15px;
}

.tracking1	{width: 200px;float: right;padding-top: 100px;}

.trackingnumber {
  border: none; 
  float:left; 
  width: 60%; 
  min-height: 600px; 
  margin-top: -60px;
}

.form-box {
  padding: 30px 0;
}

.form-box > label:first-child {
  display: block;
}

.form-box > input {
  width: 100%;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid #333;
  font-size: 0.9rem;
}

.form-box > button {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 0.9rem;
  border: 0;
  border-radius: 10px;
  padding: 8px 16px;
  margin: 0 8px 0 0;
  cursor: pointer;
}

.form-box > button[type="submit"] {
  color: white;
  background-color: rebeccapurple;
}

.form-box > button[type="submit"]:hover {
  background-color: rgb(52, 15, 88);
}

.form-box > button[type="reset"] {
  background-color: white;
}


.nav  {margin-top: 10px;}

.colum  {float: right; width: 70%; max-width: 30%; padding-top: 20px;}
.contactbox {float: right;}

/* ++++++++++++.  TRACKING.   ++++++++++++++ 

 #tracking {width: 100%; float: left;padding-top: 10px;}
 .tracking {width: 100%; float: left;padding-top: 10px;}
.tracking2	{width: 80%;float: left;padding-top: 20px;}

 +++++ FOOTER.  +++++++++++++ */

.lastupdate{color:rgb(35, 30, 37);font-size:12px; padding-bottom: 5px;}

#footer {
    height: 360px;
    text-align: center;
    background: rgba(191, 0, 0, 0.7);
    vertical-align: middle;
   
    font-size: calc(0.3rem + var(--font-scale));
    font-family: var(--font);
    line-height: var(--line);

    background: rgb(68,68,68); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(68,68,68,1) 0%, rgba(51,51,51,1) 95%, rgba(38,38,38,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(68,68,68,1) 0%,rgba(51,51,51,1) 95%,rgba(38,38,38,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(68,68,68,1) 0%,rgba(51,51,51,1) 95%,rgba(38,38,38,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#262626',GradientType=0 ); /* IE6-9 */
}

    #footer .foot {
        color: white;
        display: inline-block;
        float: left;
        text-align: left;
        /*border:0px;*/
        padding: 10px;
        margin: 10px;
        margin-top: 1%;
        width: 20%;			/*original 42% */
        background: none;
    }

.footline {
    color: white;
    display: inline-block;
    float: left;
    text-align: left;

    margin: 10px;	        /*original 25px */

    margin-bottom:0px;
	  padding-left: 15px;     /* wurde eingepflegt */
    background: none;
    width: 80%;				/* wurde geändert von 50% auf den aktuellen Wert */
	
}

    #footer p {
        margin: 3px;
    }

    #footer a {
        color: #fff;
        text-decoration: none;
    }

        #footer a:hover {
            text-decoration: underline;
        }




/* --- Media Queries - Abfragen für mobile Geräte --- */

@media (max-width: 1250px) {
  .logo {height: 100%; margin: 0 auto;  padding-left: 20px; padding-top: 30px;display: flex; justify-content: center;  align-items: center; objekt-fit: contain;} 
  iframe			{width: 100%;}
  #footer {height: 770px;}
  #footer .foot { width: margin-right:0px; padding-right:0px;}
  #inhalt img, #footer img{ display:none;}
}

@media (max-width: 1200px) {
  .logo {height: 100%; margin: 0 auto;  padding-left: 20px; padding-top: 30px;display: flex; justify-content: center;  align-items: center; objekt-fit: contain;} 
  iframe			{width: 100%;}
 /*.tracking2		{padding-top: 1em;width: 100%; float: left;}*/
  #footer {height: 770px;}
  #footer .foot { width: margin-right:0px; padding-right:0px;}
  #inhalt img, #footer img{ display:none;}
}

@media (max-width: 1100px) {
  .logo {height: 100%; margin: 0 auto;  padding-left: 20px; padding-top: 30px;display: flex; justify-content: center;  align-items: center; objekt-fit: contain;}
  iframe			{width: 100%;}
 /* .tracking2		{padding-top: 1em;width: 100%; float: left;}*/
  #footer {height: 870px;}
  #footer .foot { width: margin-right:0px; padding-right:0px;}
  #inhalt img, #footer img{ display:none;}
}

@media (max-width: 1000px) {
.logo {height: 90%; margin: 0 auto;  padding-left: 20px; padding-top: 30px;display: flex; justify-content: center;  align-items: center; objekt-fit: contain;} 
iframe	{width: 100%;}
.phone  {padding-right: 10px;}
/*.tracking2		{padding-top: 1em;width: 100%; float: left;}*/
.card-wrapper   {flex-direction: row; display: flex;}
#footer {height: 870px;}
#footer .foot { width: margin-right:0px; padding-right:0px;}
#inhalt img, #footer img{ display:none;}
.flex-item-tbl-right {border-left: 0px solid;}
.flex-item-tbl-left {
  border-bottom: 2px solid;
  border-color: var(--color-grey);
  padding: 25px;
}

@media (max-width: 840px) {
  .logo {width 100%; margin: 0 auto;  padding-left: auto; padding-top: 30px;display: flex; justify-content: center;  align-items: center; objekt-fit: contain;} 
  iframe			{width: 100%;}
  .flex-container {flex-direction: column;}
 
  .phone {padding-right: 1px; }
 /* .tracking2		{padding-top: 1em;width: 100%; float: left;} */
  #box1,#box2,#box3,#box4,#box5,#box6	{display: none;}
  #box7 {display:flexbox;}
  #footer {height: 470px;}
  #footer .foot { width: margin-right:0px; padding-right:0px;}
  #inhalt img, #footer img{ display:none;}
}

@media screen and (max-width: 768px) {
/* .tracking2		{padding-top: 1em;width: 80%; float: left;}*/

  #box1,#box2,#box3	{display: none;}
  iframe			{width: 80%; padding-left: 5px;} 
  #navbar {width: 100%;  height: auto; display: block;}
  #navbar a {text-align: center; float: left;}
  div.content {margin-left: 0;}
  #footer {height: 470px;}
  #footer .foot { width: margin-right:0px; padding-right:0px;}
  #inhalt img, #footer img{ display:none;}
  #navbar a {width: 100%; border: 0.2px solid rgb(182, 162, 162);}
  #navbar a.active {background-color: #27799e; color: white;}
  #open-dialog  { 
  display:;                       // auf none setzten wenn der Button nicht sichtbar sein soll
  color: black;
}

  dialog {
    background-color: #222;
    color: white;
    border-radius: 15px;
    max-width:80%;
    margin-top: 35px;
    margin-left: 50px;
  }
}

@media screen and (max-width: 700px) {
.logo {width:100%; margin: 0 auto; display: flex;}
.phone {display:none; }
.logo {width:100%; margin: 0 auto;} 
 main    {min-height: 150px;width:100%;}

#navbar {margin-bottom: 20px;}
.success {display:none;}
 /*.tracking2		{padding-top: 1em;width: 60%; float: left;}*/
 #box1,#box2,#box3	{display: none;}
.column {width: 100%; padding: 5px; line-height: 21px;}
#navbar {text-align: center; float: left;}
#footer {height: 880px;}
#footer .foot { width: auto; margin-right:0px; padding-right:0px;}
#inhalt img, #footer img{ display:none;}
.flex-item-tbl-right {
  padding-left: 0px;
}
.flex-item-tbl-left {
  padding-left: 0px; margin: 0;
}
.preisikon {
  font-size: 0.5rem;
}

.abfrage {
  width: 100%; 
  max-width: 350px;
  height: 100%;
  min-height: 500px; 
  float: left; 
  cursor: pointer;
  /*margin-inline: auto;*/
}

.tracking {
  width: 100%;
  max-width: 400px;
  height: 100%;
  min-height: 450px;
  float: left;
  font-size: 10px;
  margin-inline: auto;
  border: none;
}

.trackingnumber {
  border: none; 
  float:left; 
  width: 100%; 
  max-width: 400px;
  height: 100%; 
  min-height: 500px;
  margin-top: -20px;
}


article {border:none;width: 100%; float: left; margin: 0; padding: 0;}
.contactbox {display: none;}
.colum {display:none;}
}

@keyframes fadein{from{opacity:0;}to{opacity:1;}}@-moz-keyframes fadein{from{opacity:0;}to{opacity:1;}}@-webkit-keyframes fadein{from{opacity:0;}to{opacity:1;}}@-o-keyframes fadein{from{opacity:0;}to{opacity:1;}}