/* alle default Ränder entfernen */
* { padding:0; margin:0; }


/* default styles for extension "tx_frontend" ---- modifiziert */
.ce-align-left { text-align: left; }
.ce-align-center { text-align: center; }
.ce-align-right { text-align: right; }

.ce-table td, .ce-table th { vertical-align: top; }

/* Setzt Bilder runter ??? !!!  muss sein für das Layout Vorsicht +-Kommas */   
.ce-textpic, .ce-image, .ce-nowrap .ce-bodytext, .ce-gallery, .ce-row, .ce-uploads li, .ce-uploads div { overflow: hidden; }
.ce-left .ce-gallery, .ce-column { float: left; }
.ce-center .ce-outer { position: relative; float: right; right: 50%; }
.ce-center .ce-inner { position: relative; float: right; right: -50%; }
.ce-right .ce-gallery { float: right; }

.ce-gallery figure { display: table; margin: 0; }
.ce-gallery figcaption { display: table-caption; caption-side: bottom; }   
.ce-gallery img { display: block; }
.ce-gallery iframe { border-width: 0; }
.ce-border img,
.ce-border iframe {border: 2px solid #000000;  padding: 0px; }

.ce-intext.ce-right .ce-gallery, .ce-intext.ce-left .ce-gallery, .ce-above .ce-gallery { margin-bottom: 10px; }
.ce-intext.ce-right .ce-gallery { margin-left: 10px; }
.ce-intext.ce-left .ce-gallery { margin-right: 10px; }
.ce-below .ce-gallery { margin-top: 10px; }

.ce-above .ce-bodytext { clear: both; }

.ce-intext.ce-left ol, .ce-intext.ce-left ul { padding-left: 40px; overflow: auto; }

/* Headline */
.ce-headline-left { text-align: left; }
.ce-headline-center { text-align: center; }
.ce-headline-right { text-align: right; }

/* Uploads */
.ce-uploads { margin: 0; padding: 0; }


/* Table */
.ce-table { width: 100%; max-width: 100%; }
.ce-table th, .ce-table td { padding: 0.5em 0.75em; vertical-align: top; }
.ce-table thead th { border-bottom: 2px solid #dadada; }
.ce-table th, .ce-table td { border-top: 1px solid #dadada; }
.ce-table-striped tbody tr:nth-of-type(odd) { background-color: rgba(0,0,0,.05); }
.ce-table-bordered th, .ce-table-bordered td { border: 1px solid #dadada; }

/* Space */
.frame-space-before-extra-small { margin-top: 1em; }
.frame-space-before-small { margin-top: 2em; }
.frame-space-before-medium { margin-top: 3em; }
.frame-space-before-large { margin-top: 4em; }
.frame-space-before-extra-large { margin-top: 5em; }
.frame-space-after-extra-small { margin-bottom: 1em; }
.frame-space-after-small { margin-bottom: 2em; }
.frame-space-after-medium { margin-bottom: 3em; }
.frame-space-after-large { margin-bottom: 4em; }
.frame-space-after-extra-large { margin-bottom: 5em; }

/* Frame */
.frame-ruler-before:before { content: ''; display: block; border-top: 1px solid rgba(0,0,0,0.25); margin-bottom: 2em; }
.frame-ruler-after:after { content: ''; display: block; border-bottom: 1px solid rgba(0,0,0,0.25); margin-top: 2em; }
.frame-indent { margin-left: 15%; margin-right: 15%; }
.frame-indent-left { margin-left: 33%; }
.frame-indent-right { margin-right: 33%; }

/* -------------------------------- Ende fluid-css original -------------------------- */


/* mobile first alles in Zeilen (flex-direction: column;), Navigation ganz unten mit order */
body {margin:0; font-family: Verdana, Arial, Helvetica; font-size:0.9em; }
/* wegen iPhone Textvergrößerung bei Tabellen  */
/* table, tr, td {font-size:0.9em; }   */
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6, table, tr, td {
-webkit-text-size-adjust:none;
}

.page-wrap { display:flex; flex-wrap:wrap; flex-direction:column; }

.header {order:1; width:100%; display:flex; flex-direction:row; background-color:white;}
.logo { width:43%; margin-top:6px; margin-bottom:2px;}
.logo img { width:100%; height:auto; max-width:150px; }

.rechts-oben {width:57%; display:flex; flex-direction:column; align-items:flex-end; }

.ueberschrift  {font-size:0.7em; text-align:right; padding-right:8px; padding-top:4px; max-width:16em;}

.such-und-navi {display:flex; flex-direction:row; justify-items:flex-end;}
.suche {width: 20px;  padding:12px; }
.suche img {width:100%; height:auto; }
.sprung {display:flex; padding:8px; }
.sprung img {width:100%; height:auto; }


.banner {order:2; background-image:url(images/banner80archiv.jpg); border:solid gray 1px; height: 80px;}


.breadcrumb-box {order:3; background-color:#eee; border-bottom:solid black 1px; padding:3px; font-size:70%; }
/* Klickpfadmenü aus Buch-css-Datei angepasst */
/*.youarehere {float:left; margin-right:2px; } */
.breadcrumb {display:inline; list-style:none; }   
.breadcrumb ol {margin-left:1em; }
.breadcrumb > li { display:inline-block; margin-bottom:0px;}
.breadcrumb > li a {text-decoration:none; color:#111}
.breadcrumb > li + li:before { content: "/"; padding: 0 5px; }
.breadcrumb > .active { color: #777; }


.tx-indexedsearch-browsebox {display:inline; list-style:none; }
.tx-indexedsearch-browsebox > li {display:inline-block; }
/*.tx-indexedsearch-browsebox > li a {text-decoration:none; color:#111}*/
.tx-indexedsearch-browsebox > li + li:before { content: "|"; padding: 0 5px; }

.abmeldeLink {float:right; margin-top:10px; }

/* overflow:auto damit nichts abgeschnitten wird  */
.content {order:4; width: 92%;   padding:0.6em 0.4em 1em 1em; overflow:auto; background-color:white; }
.content p, li { line-height:1.6em; }
/*.content::-webkit-scrollbar {-webkit-appearance: none; width: 14px; height: 14px;} */
/*.content::-webkit-scrollbar-thumb{border-radius: 8px; border: 3px solid #fff; background-color: rgba(0, 0, 0, .3)}*/

/* footer-box transparent wegen iPhone Problem Überlagerung */
.footer-box {order:5; background-color:#666; color:white; margin-bottom:100px;}
.footer a {text-decoration:none; color:white; }
.footer a:hover {text-decoration:none; background-color:white; color:black; }

.totop  {float:right; text-align:right; margin-right:8px; margin-top:8px; }
.totop img {background-color:white; }
.totop-navi  {text-align:right; margin-right:8px; margin-top:8px; }
.totop-navi img {background-color:white; }

.footer_menu {max-width:240px; padding-bottom:10px; margin-top:10px; margin-left:10px; }
.footer_menu li {list-style-type:none; margin-bottom:6px; border-bottom:1px solid #ffffff; max-width:220px; margin-left:-8px; }
.footer_menu li a {color:#ddd; text-decoration: none; display:block; padding:2px 2px 2px 0px; }
.footer_menu li a:hover {color:black;  background-color:white; padding:2px;  }
.footer_menu li.l1-cur-act  {background-color:#eee; color:black; margin-left:-8px; padding:2px;  }
.footer_menu ul.l2 {background-color:#666; margin-left:-2px; margin-right:-2px; }
.footer_menu ul.l2 li {border:none;  margin-left:0px; padding-left:6px;}
.footer_menu li.l2-cur-act  { background-color:#eee; color:black; margin-left:4px; padding:2px;  }
.footer-adresse { margin-left:14px; padding-bottom:20px;}  
.footer-adresse h2 {color:#ddd; } 

.leer2 .leer2 {display: none; }

/* einheitliche Ränder - bessere Ausrichtung mit Bildern */
h1 {font-size: 1.5em; font-weight:lighter; margin-bottom:16px; margin-top:10px;  }
h2 {font-size: 1.4em; font-weight:lighter; margin-bottom:14px;  margin-top:10px; }
h3 {font-size: 1.3em; font-weight:lighter; margin-bottom:12px;  margin-top:10px;  }
h4 {font-size: 1.2em; font-weight:lighter; margin-bottom:10px;  margin-top:10px;  }
h5 {font-size: 1.1em; font-weight:lighter; margin-bottom:10px;  margin-top:10px;  }
h6 {font-size: 1em; margin-bottom:8px; }


.text-center {text-align:center;}

p {margin-bottom:10px;}
/*  Listen einrückung raus, darunter Abstand */
ul { margin-left:19px;}
ol { margin-left:24px;}
ul li, ol li { margin-bottom:10px;}

hr {height:1px; background-color:#888888; border:0px; margin-bottom:8px; margin-top:6px; }

/*table.table-bordered  */
table, th, td {border:1px solid #bbb; border-collapse:collapse; padding:0.3em;}

/* bildunterschriften mit gleicher Höhe wegen Umbruch, 3 Zeilen fest codiert ?testen overflow? */
figcaption.image-caption {font-size: 0.8em; font-style:italic; line-height:1.2em; height:3.4em; margin-top:2px; }
.ce-intext figcaption.image-caption {font-size: 0.8em; font-style:italic; line-height:1.2em;  height:auto; }

/* Bild im Text*/
/* original bei breiten Bildschirmen */
.ce-gallery .ce-column { margin-bottom:10px; box-sizing: border-box; }

/*  Fluid Image Tags */
.ce-gallery img, .ce-gallery picture {width: 100%; height: auto;}
.ce-right.ce-intext .ce-gallery[data-ce-columns="1"] {max-width: 50%; }
.ce-left.ce-intext .ce-gallery[data-ce-columns="1"] {max-width: 50%; }
/*  fester Rand oben wegen Text-Oberkante Ausgleich  */
.ce-intext .ce-gallery[data-ce-columns="1"] img.image-embed-item {width: 100%; height: auto; margin-top:6px;}


/* Startseite und Chronik */
.ce-textpic.ce-left.ce-intext.ce-nowrap .ce-gallery[data-ce-columns="1"] {max-width:36%; }
.ce-textpic.ce-left.ce-intext.ce-nowrap .ce-gallery[data-ce-columns="1"] img  {margin-top:12px; }

/* Bild über Text ganze Breite */  
/* Eine Ebene exakt ansprechen: alle Auszeichnungen ohne Leerzeichen <div class="ce-textpic ce-left ce-above"> so:    */
.ce-textpic.ce-left.ce-above .ce-gallery[data-ce-columns="1"] {width:100%; } 
.ce-textpic.ce-left.ce-below .ce-gallery[data-ce-columns="1"] {width:100%; }
 
.video-embed-item {width: 100%; height: auto;}
 
/*.content a {color:black; text-decoration:none; border-bottom:1px solid #666; }
--linkfarbe blau*/
.content a {color:blue; text-decoration:none; border-bottom:1px solid #666; }
.content a:hover {background-color:black; color:white; text-decoration:none; }

.termin_icon_rechts a {border:none; overflow:hidden;}
.termin-icon-rechts a:hover {text-decoration:none; background-color:none; }  /* funktioniert nicht */



/* wegen li-Einrückung Ausgleich, Problem: Leerraum über und unter dem Bild */
/*.termin { margin-left:-4px; margin-bottom:-2em;}*/
.termin_icon_rechts {float:right; }

/* teminspalte und chronik */
div.termin_text {color:#555; font-size:80%; margin-right: 30px; }
div.termin_text b {font-weight:normal; color:black; font-size:110%; }


/* fuer Formulare > Anmeldeformular bei Intern > Suchformular > Kontaktformular */

input {padding: 2px;}

input#kontaktformular-5469-text-2, input#kontaktformular-5469-text-1   {width: 89%; background-color:#f6f6f6; margin-bottom:14px; margin-top:0px; } 
textarea  {width: 90%; height:160px; background-color:#f6f6f6; margin-bottom:6px; margin-top:2px; }

div.tx-indexedsearch-searchbox  {margin-top: 12px; }
input.tx-indexedsearch-searchbox-sword {width: 96%; background-color:#eee; margin-bottom:6px; margin-top:1px; }

fieldset {padding: 10px; }
label {width: 100%; display:inline; }
legend {font-size:120%; font-style:italic; padding:2px; }
input#user, input#pass {width: 90%; background-color:#eee; margin-bottom:4px; font-size:110%; }


/* Abstand Navigation nach unten beim Handy (mobile first)  > margin-top:1200px; */
.nav {order:6; padding-bottom:300px; margin-left:2px; margin-top:1200px; font-size:0.8em;  border-left:1px solid #aaa; }
.nav a {color:black; text-decoration:none; }


.navi-0 {font-size: 130%;  }
.navi-0 a {display:block; border-bottom:1px solid #ddd; padding:4px 0px 6px 10px; }
.navi-0 a:hover {background-color:#444444; color:white; }
.navi-0-a {font-size: 130%; border-bottom:1px solid #ddd; padding:4px 0px 6px 16px; background-color:white; }



.navi-0-a-c {font-size: 130%; margin-left:-2px;  border-left:1px solid white;  border-bottom:1px solid #ddd; padding:4px 0px 6px 16px; background-color:white; background-image:url(images/bg-cur-sprite80.gif); background-position:-160px 2px; }


.navi-1 {font-size: 125%; margin-left:-1px; border-left:1px solid white; }
.navi-1 a {display:block; border-bottom:1px solid #ffffff; padding:4px 0px 6px 16px; background-image:url(images/bg-act-haken.gif); background-position:-151px 0px; }
.navi-1 a:hover {background-color:#444444; color:white; }
.navi-1-a {font-size: 125%; border-bottom:1px solid #ffffff; padding:4px 0px 6px 16px; background-color:white; border-left:1px solid white; margin-left:-1px; background-image:url(images/bg-act-haken.gif); background-position:-151px 29px;}
.navi-1-a-c {font-size: 125%; margin-left:-1px; border-left:1px solid white; border-bottom:1px solid #ffffff; padding:4px 0px 6px 16px; background-color:#ffffff;  background-image:url(images/bg-cur-sprite80.gif); background-position:-160px 2px; }

.navi-2 {font-size: 120%;  margin-left:-1px; border-left:1px solid white; }
.navi-2 a {display:block; border-bottom:1px solid white; padding:4px 0px 6px 22px;background-image:url(images/bg-act-haken.gif); background-position:-145px 0px; }
.navi-2 a:hover {background-color:#444444; color:white; }
.navi-2-a {font-size: 120%; border-bottom:1px solid white; padding:4px 0px 6px 22px; background-color:white; border-left:1px solid white; margin-left:-1px;  background-image:url(images/bg-act-haken.gif); background-position:-145px 29px;}
.navi-2-a-c {font-size: 120%; margin-left:-1px; border-left:1px solid white; border-bottom:1px solid #ffffff; padding:4px 0px 6px 22px; background-color:#ffffff;  background-image:url(images/bg-cur-sprite80.gif); background-position:-154px 2px; }

.navi-3 {font-size: 115%; margin-left:-1px; border-left:1px solid white;}
.navi-3 a {display:block; border-bottom:1px solid #ffffff; padding:4px 0px 6px 30px; background-image:url(images/bg-act-haken.gif); background-position:-139px 0px; }
.navi-3 a:hover {background-color:#444444; color:white; }
.navi-3-a {font-size: 115%; border-bottom:1px solid #ffffff; padding:4px 0px 6px 30px; background-color:white; border-left:1px solid white; margin-left:-1px; background-image:url(images/bg-act-haken.gif); background-position:-139px 26px; }
.navi-3-a-c {font-size: 115%; margin-left:-1px; border-left:1px solid white; border-bottom:1px solid #ffffff; padding:4px 0px 6px 30px; background-color:#ffffff;  background-image:url(images/bg-cur-sprite80.gif); background-position:-148px 1px; }

.navi-4 {font-size: 110%; margin-left:-1px; border-left:1px solid white;  }
.navi-4 a {display:block; border-bottom:1px solid #ffffff; padding:4px 0px 6px 38px; background-image:url(images/bg-act-haken.gif); background-position:-132px 0px;}
.navi-4 a:hover {background-color:#444444; color:white; }
.navi-4-a {font-size: 110%; border-bottom:1px solid #ffffff; padding:4px 0px 6px 38px; background-color:white; border-left:1px solid white; margin-left:-1px;  background-image:url(images/bg-act-haken.gif); background-position:-132px 26px;}
.navi-4-a-c {font-size: 110%; margin-left:-1px; border-left:1px solid white; border-bottom:1px solid #ffffff; padding:4px 0px 6px 38px; background-color:#ffffff; background-image:url(images/bg-cur-sprite80.gif); background-position:-141px 0px; }

.navi-5 {font-size: 105%; margin-left:-1px; border-left:1px solid white; }
.navi-5 a {display:block; border-bottom:1px solid #ffffff; padding:4px 0px 6px 45px; background-image:url(images/bg-act-haken.gif); background-position:-126px 0px; }
.navi-5  a:hover {background-color:#444444; color:white; }
.navi-5-a {font-size: 105%; border-bottom:1px solid #ffffff; padding:4px 0px 6px 45px; background-color:white; border-left:1px solid white; margin-left:-1px;  background-image:url(images/bg-act-haken.gif); background-position:-126px 26px; }
.navi-5-a-c {font-size: 105%; margin-left:-1px; border-left:1px solid white; border-bottom:1px solid #ffffff; padding:4px 0px 6px 45px; background-color:#ffffff; background-image:url(images/bg-cur-sprite80.gif); background-position:-138px 0px; }



/*-----------------------------------------------------------------------*/
@media screen and (min-width: 470px) {
.ueberschrift  { font-size:0.9em; margin-top:4px; max-width:20em;}

/* Startseite und Chronik Bild-Text Elemente + Lehrerliste */
.ce-textpic.ce-left.ce-intext.ce-nowrap .ce-gallery[data-ce-columns="1"] {max-width:26%; }

    /* Spaltenbreiten je nach eingestellten Columns */
.ce-gallery[data-ce-columns="2"] .ce-column {width: 50%; }
.ce-gallery[data-ce-columns="3"] .ce-column {width: 33%; }
.ce-gallery[data-ce-columns="4"] .ce-column {width: 25%; }
.ce-gallery[data-ce-columns="5"] .ce-column {width: 20%; }


/* Reihendarstellung bei breiteren Bildschirmen */
.ce-column { margin-right: 10px; }
.ce-column:last-child { margin-right: 0; }
.ce-row { margin-bottom: 10px; }
.ce-row:last-child { margin-bottom: 0; }

.ce-gallery .ce-column {margin: 0; padding: 0 5px; box-sizing: border-box; }
.ce-gallery .ce-column:first-child { padding-left: 0; }
.ce-gallery .ce-column:last-child { margin-right: 0;}


ul { margin-left:16px;}
ol { margin-left:22px;}


}

/*-----------------------------------------------------------------------*/
@media screen and (min-width: 700px) {
body { font-size:0.8em; }

.page-wrap { display: flex; flex-wrap:wrap; flex-direction: row; }

.header {order:1; max-width:860px;  margin:auto; }


.ueberschrift  {font-size:1.3em; margin-top:8px;}
.logo img {width:100%; height:auto; max-width:180px; }
.sprung {display:none; }
.suche {width: 26px;  padding:12px; }

.banner {order:2; background-image:url(images/banner120-archiv.jpg); width:100%; height: 120px;}

.breadcrumb-box {order:3; width:100%; background-color:white; border:none; font-size:86%;  }
.breadcrumb-align {max-width:860px; margin:auto; }

/* Hilfsboxen für die Zentrierung mit dem IE */
.leer1 {order:4; flex:auto; }


.content {order:5; flex:64; max-width:540px; min-height: 500px; padding:0 0 2em 1em; margin-top:10px; margin-right:26px; overflow:visible;}

/*   Margin Top zurückgenommen bei breiten Bildschirmen*/
.nav {order:5; flex:34; max-width:274px; margin-top:-20px; padding-bottom:10px; margin-left:-7px; margin-bottom:20px; }
.totop-navi  {display:none; }

.leer2  {order:7; flex:auto; }


.footer-box {order:8; width:100%; margin-bottom:0px; }
.footer {max-width:890px; margin:auto; }
.footer_menu  {float:left; margin-top:6px;}

.footer-adresse {float:right; padding-bottom:40px; margin-right:20px; }
.footer-adresse:after {content:""; display:table; clear:both; }

/* Telefonlinks nicht auf Desktop Rechner */
a.telNR {text-decoration:none; border:none; color:#111111; cursor:text; }
a.telNR:hover {background-color:#ffffff; cursor:text; color:#111111; }
.footer-box a.telNR {text-decoration:none; border:none; cursor:text; color:white;}
.footer-box a.telNR:hover {background-color:#666; cursor:text; }

div.termin_text {font-size:90%; margin-top:-2px; }
div.termin_text b {font-size:120%; }

h1 {font-size: 1.6em; }
h2 {font-size: 1.5em; }
h3 {font-size: 1.4em; }
h4 {font-size: 1.3em; }
h5 {font-size: 1.2em; }
h6 {font-size: 1.1em; }

/* -----------------Hauptmenü---wie mobil ----------*/

}



/*-----------------------------------------------------------------------*/
@media screen and (min-width: 870px) {
.content {padding:0 0 2em 0; margin-right:50px;  }
}

/*
    Document   : no-more-tables
    Created on : 28/02/2012, 11:01:54 AM
    Author     : Simon Elvery
    Description:
    Demonstration of the responsive tables method described at by Chris Coyier
    at http://css-tricks.com/responsive-data-tables/
*/

/* Tabelle normal */
table.cf {width: 100%; border-collapse: collapse; }
table.cf th { font-weight: normal; }
table.cf td, table.cf th {padding: 6px; border: 1px solid #999; text-align: left; }


/* Tabellen Hochformat*/
@media only screen and (max-width: 700px) {
  
  /* Force table to not be like tables anymore */
  #no-more-tables table,
  #no-more-tables thead,
  #no-more-tables tbody,
  #no-more-tables th,
  #no-more-tables td,
  #no-more-tables tr {
    display: block;
  }

  /* Hide table headers (but not display: none;, for accessibility) */
  #no-more-tables thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  #no-more-tables tr { border: 1px solid #999; }

  #no-more-tables td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #999;
    position: relative;
    /*original    padding-left: 50%; */
    padding-left: 45%;
    white-space: normal;
    text-align:left;
  }

  #no-more-tables td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    /*original    width: 45%; */
    width: 38%;
    padding-right: 10px;
    /*white-space: nowrap;*/
    text-align:left;
  }

  /*  Label the data  */
  #no-more-tables td:before { content: attr(data-title); }
}