/* --------------------------------------------------------- */
/*1=oben, 2=rechts, 3=unten, 4=links*/
/* Eigene */
/* header */
.header {
    padding-top: 1.0em;
    flex: 100%;
    background-image: url("../grafiken/Bild_076.jpg");
/*    background-image: url("../grafiken/Projekt3.jpg"); */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 15.556em;
    margin: 0 auto;
    text-align: center;
    border: 0.167em solid #819196;
    border-radius: 20px;
}
/* Newsbox */
div.newsbox {
width:280px;
float:right;
border:1px solid #009900;
padding:5px;
margin:5px 10px;
color:#009900;
background-color:#efefef;
}
body {
    background: #B7CEE8;
    color: #000000;
    font-family: Corbel, Arial, Helvetica, sans-serif;
    font-size: 18px;
    margin: 0px 0px 0px 0px;
    padding: 0;
}

html, body, h1, h2, h3 {
    scroll-behavior: smooth;
}

/* seiten container */
#wrap {
    width: 80%;
    overflow: hidden;
    margin: 0 auto;
    padding: 10px;
    background-color: #fff;
    border: 10px solid #819196;
    border-radius: 20px;
    box-shadow: 5px -5px 10px #224a61,
        -5px 5px 10px #fff;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* -------------------------------------------------------- */
/* [----] */
/* ------ */
hr {
 border-top: 1px solid #ddd;
}
.w-s-nor {
white-space: normal;
}
.w-s-pre {
white-space: pre;
}
.w-s-now {
white-space: nowrap;
}

/* [linkextern|...]      */
/* --------------- */
div.linkextern {
	/*text-align: right;*/
    color: #577399;
    text-decoration: none;
}

/* -------------------------------------------------------- */
/* ---------- max-width 500px ----------- */
@media only screen and (max-width: 500px) {
.header {
    background-image: url("../grafiken/Projekt3.jpg");
}
}
/* ---------- max-width 600px ----------- */
@media only screen and (max-width: 600px) {
#wrap {
    width: 100%;
    }
.main {
    flex: 60%;
    padding: 10px;
}
/* [linkextern|...]      */
div.linkextern {
	text-align: right;
    color: #577399;
    text-decoration: none;
}
    }
/* -------------------------------------------------------- */
/* Schulferien */
/* -------------------------------------- */
/* ---------Responsive Tabelle----------- */
/* -------------------------------------- */
* {
    --bg-table-stripe: #f6f6f5;      /* Tabelle 2.Zeile       */
    --b-table: #e3e3e2;              /* Tabelle Rahmen        */
    --caption: #242423;              /* Text Ueberschrift     */
    --bg-th: #C4CEDE;                /* Kopfzeile Hintergrund */
    --caption-th: #000;              /* Kopfzeile Text        */
    --radius: 8px;                   /* Radius Ecken          */
}
table.schooltable {
	width: 100%; 
	border-spacing: 0; 
	border-collapse: separate; 
	background-color: transparent;
}
/*table.schooltable caption {
    color: var(--caption);
    font-size: 1.13em;
    font-weight: 700;
    padding-bottom: .56rem;
}*/
table.schooltable thead {
    font-size: .84em;
}
table.schooltable tbody {
    font-size: .84em;
}
table.schooltable tr th:first-child, table.schooltable tr td:first-child {
   border-left: 1px solid var(--b-table);
}
table.schooltable tr:first-child th, table.schooltable tr:first-child td {
   border-top: 1px solid var(--b-table);
}
table.schooltable tr:first-child th:first-child {
    border-top-left-radius: var(--radius);
}
table.schooltable tr:first-child th:last-child {
    border-top-right-radius: var(--radius);
}
/*table.schooltable tr:last-child td:first-child {
    border-bottom-left-radius: var(--radius);
}
table.schooltable tr:last-child td:last-child {
    border-bottom-right-radius: var(--radius);
}*/
th.schooltable {
	background: var(--bg-th);
	color: var(--caption-th);
}
td.schooltable1, td.schooltable2, th.schooltable {
	padding: .5em .75em .5em .75em;
	border-right: 1px solid var(--b-table);
	vertical-align: top;
}
td.schooltable1, td.schooltable2 {
	border-bottom: 1px solid var(--b-table);
}
td.schooltable2 {
	background-color: var(--bg-table-stripe);
}
@media only screen and (max-width:1050px) {
	table.schooltable thead {
        overflow: hidden;
        position: absolute;
        width: 1px;
        height: 1px;
        white-space: nowrap;
	}
	table.schooltable tr {
        border-bottom: 2px solid #ddd;
        display: block;
        margin-bottom: .625em;
	}
	table.schooltable td {
		border-top: 1px solid var(--b-table);
	}
	td.schooltable1, td.schooltable2 {
        border-left: 1px solid var(--b-table);
        display: block;
    }
	td.schooltable1, td.schooltable2 {
        column-gap: 3.16vw;
        display: grid;
        grid-template-columns: 1fr 1fr;
        text-align: left;
	}
	td.schooltable1:before, td.schooltable2:before {
        content: attr(data-label);
        float: left;
        font-weight: 700;
        padding-right: 1.78em;
        border-right: 1px solid var(--b-table);
	}
	td.schooltablecell1 {
        background-color: var(--bg-th);
		border-top-left-radius: var(--radius);
		border-top-right-radius: var(--radius);
	}
}

/* -------------------------------------- */
/* AGB, Brücke, Kurverwaltung */
/* -------------------------------------- */
/* ---------Responsive Tabelle----------- */
/* -------------------------------------- */
/* {
    --bg-table-stripe: #f6f6f5;      /* 2.Zeile   
    --b-table: #e3e3e2;              /* Rahmen    
    --caption: #242423;              /* Text      
    --bg-th: #C4CEDE;                /* Kopf      
    --caption-th: #000;              /* Kopfzeile 
}*/
table.separatetable {
/*   font-family: Arial, Helvetica, sans-serif;  */
    width: 100%!important;
    border-collapse: collapse;
    background-color: transparent;
}

table.separatetable caption {
      color: var(--caption);
      font-size: 1.13em;
      font-weight: 700;
      padding-bottom: .56rem;
}
table.separatetable thead {
      font-size: .84em;
}
table.separatetable tbody {
      border-bottom: 1px solid var(--b-table);
      border-top: 1px solid var(--b-table);
      font-size: .84em;
    }
table.separatetable tr:nth-of-type(2n) {
    background-color: var(--bg-table-stripe);
}

th.separatetable {
    text-align: left;
    background-color: var(--bg-th);
    color: var(--caption-th);
    border: 1px solid var(--b-table);
    padding: .75em 1em .75em 1em;
    vertical-align: top;
}

td.separatetable1,
td.separatetable2 {
    border: 1px solid var(--b-table);
    padding: .75em 1em .75em 1em;
    vertical-align: top;
}

@media only screen and (max-width:1050px) {
	table.separatetable thead {
        overflow: hidden;
        position: absolute;
        width: 1px;
        height: 1px;
        white-space: nowrap;
	}
	table.separatetable tr:last-child td:last-child {
        border-bottom-width: 0;
	}
	table.separatetable tr {
        border-bottom: 3px solid #ddd;
        display: block;
        margin-bottom: .625em;
	}
/*  td.separatetable1 {
        border-top-width: 1;
        }
    td.separatetable2 {
        border-top-width: 0;
    }     */
	td.separatetable1,
	td.separatetable2 {
        column-gap: 3.16vw;
        display: grid;
        grid-template-columns: 1fr 2fr;
        text-align: left!important;
        border-top-width: 0;
	}
	td.separatetable1:before, td.separatetable2:before {
        content: attr(data-label);
        float: left;
        font-weight: 700;
        padding-right: 1.78em;
        border-right: 1px solid var(--b-table);
	}
/*	td.separatetablecell1 {
        background-color: var(--bg-th);
	}*/
}
/* -------------------------------------- */

/* Suche   */

.search {
background:#fff;
text-align:right;
padding:0 20px 10px 0;
}

.searchform {
margin-top:0px;
margin-right:180px;
}

.searchtextfield {
width:80%;
/*		max-width:180px;*/
margin-top:10px;
padding-left:2px;
/*		margin-bottom:10px;
		padding:2px;
		background-color:#fff;
		border:1px #333 solid;*/
}

.searchbutton {
width: 20px;
height: 20px;
border: none; /*1px solid #73a7cf;*/
background: transparent;  /*#73a7cf;
  border-radius: 0 5px 5px 0;*/
cursor: pointer;
background-image: url("../grafiken/searchicon.gif");
    /*background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 20 20'><path fill='%23000000' d='M13.22 14.63a8 8 0 1 1 1.41-1.41l4.29 4.29a1 1 0 1 1-1.41 1.41l-4.29-4.29zm-.66-2.07a6 6 0 1 0-8.49-8.49 6 6 0 0 0 8.49 8.49z'></path></svg>");*/
background-repeat: no-repeat;
background-position: top;
}

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

/* Anreise  */

#wegplaner_routenplanerbox{border:1px solid #000;margin:5px;padding:5px;text-align:left;width:300px;background-color:#ececec;}
#wegplaner_routenplanerbox form{font-family:arial,sans-serif;font-weight:bold;margin:0;padding:0;}
#wegplaner_routenplanerbox form input[type='text']{text-align:left;color:#000000 !important;margin:2px 0;width:98%;height:17px;padding:0;}
#wegplaner_routenplanerbox form input[type='submit']{font-size:12px;color:#330066;background:#ccc;padding:2px;margin-top:3px;width:105px;border:1px solid #fff;}
#wegplaner_routenplanerbox p{font-size:12px;font-weight:normal;color:#330066 !important;-webkit-margin-before:0em;-webkit-margin-after:0em;margin:0;padding:0;}
#wegplaner_routenplanerbox h2{font-size:18px;font-weight:bold;color:#330066 !important;margin-bottom:-10px;margin-top:-2px;}
#wegplaner_routenplanerbox a{color:#330066 !important;text-decoration:none;}
#wegplaner_routenplanerbox p.margin{margin-bottom:10px;}
#wegplaner_routenplanerbox p.font{font-size:10px !important;}
/* ----------------------------------------------------------*/