/*
Nachträgliches "Responsive Design" für www.regionalgeschichte.net (Template 2011). Einige Sachen sind ziemlich hacky...
Funktioniert im Zusammenspiel mit responsive.js (Glossar, Inhaltsverzeichnis, Navigation)
Erstellt von Simeon Guthier

*/

* {
  --logo-bar-height: 40px;
  --side-margin:10px;
  --color-link:#4868DE;
  --color-secondary:#794C24;
  --color-tertiary:#ef9303;
  --color-search-button:#f6b563;
  --color-logo-background:#fdfdfd;
  --color-navregion-background:#c07200; 
  --navmain-fallback-color:rgb(242,146,1);
  --navmain-gradient:linear-gradient(to bottom, rgba(242,146,1,1) 36%,rgba(209,123,0,1) 100%);
  --navmain-active-fallback-color:rgb(188,113,0);
  --navmain-active-gradient:linear-gradient(to bottom, rgba(188,113,0,1) 36%,rgba(173,101,0,1) 100%);
}

.hideelement {
  display:none;
}

@media only screen and (max-width: 768px) {
  .csc-invisible-below-767px-incl {
    display:none;
  }
}



/* class for clearing elements */
.clearer {
  clear: both;
  visibility: hidden;
}

/* Temp CSS */

dfn.section,
div.sectionmenu dfn {
  display: none;
}

#orte-searchbox {
  display:none;
}

/* Reset & base-config */

@font-face {
  font-family: Axel;
  src: url('../fonts/Axel-Regular.ttf');
}

@font-face {
  font-family: Axel;
  font-weight: bold;
  src: url('../fonts/Axel-Bold.ttf');
}

@font-face {
  font-family: Droid Serif;
  src: url('../fonts/DroidSerif-Regular.ttf');
}

@font-face {
  font-family: Droid Serif;
  font-weight: bold;
  src: url('../fonts/DroidSerif-Bold.ttf');
}

@font-face {
  font-family: Droid Serif;
  font-style: italic;
  src: url('../fonts/DroidSerif-Italic.ttf');
}

/* iframes, (fast) egal wo und wann */
/* nicht überall, da inkompatibel mit damlightbox*/
#main iframe,
aside iframe {
  width:calc(100vw - 30px);
  margin:0;
  padding:0;
}




head {
  font-family: "Droid Serif", Cambria, Georgia, Times, Serif;
  font-size: 1.3em;
  width:100%;
}

body {
  background:none !important;
  margin: 0;
  padding: 0;
  font-family: "Droid Serif", Cambria, Georgia, Times, Serif;
  font-size: 1.3em;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
}

body::-webkit-scrollbar {
width: 0;
height: 0;
}

#main, footer {
  height:1%;
  margin:var(--side-margin);
  line-height: 1.5;
  font-size: 0.85em;
  display:inline-block;
  /* overflow: hidden; */
  width: calc(100vw - 20px);
}

footer  {
  margin:0;
  padding:var(--side-margin);
}


h1 {
  margin: 0;
}

a {
  text-decoration: none;
  color: var(--color-link);
  word-break: break-word;
}

a:hover {
  text-decoration: underline;
}

div#container {
  position: relative;
  width: 100%;
  margin: 0 auto 0 auto;
}

/* Sorting */

header {

  display: -webkit-box;
    display: -moz-box;
    display: box;

    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
}

#responsive_margin {
  margin-top: var(--logo-bar-height);
}

#navregion {
  -webkit-box-ordinal-group: 2;
  -moz-box-ordinal-group: 2;
  box-ordinal-group: 2;
}

header h1 {
  -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    box-ordinal-group: 3;
}

/* Headings */

header h1 {
  visibility:hidden;
  font-size:0;
  position: relative;
  padding: 15px 0 15px 0;
  font-family: Axel, Calibri, Helvetica, Arial;
  font-weight: normal;
  z-index: 0;
  vertical-align:center;
  text-align:center;
}
header h1 span{
  font-size:40px;
  visibility:visible;
}

header h1 span {
  font-weight: bold;
}

header h1,
header h1 a,
header h1 a:hover {
  color: var(--color-secondary);
  text-decoration: none;
}

header img#beta {
  position: absolute;
  top: 0.5em;
  left: -7em;
  z-index: 2000;
  border: none;
}

/* Searchbox */

header div#searchbox {
  width: var(--logo-bar-height);
  height: var(--logo-bar-height);
  position: fixed;
  z-index: 60;
  right:0;
  top:0;
  right:0;
}



header div#searchbox #search_text {
  display:none;
}

header div#searchbox #search_button {
  width: 100%;
  height: 100%;
  float:left;
  position:absolute;
  top:0;
  right:0;
  
    color: var(--color-search-button);
    background-color: transparent;
    text-align: center;
    font-size: 1.5em;
    outline: 0;
    border: 0;
}

/* Tables; Bildschirmbreite erzwingen */
table {
  table-layout: fixed;
}

/*Header*/

#logobg {
  height:0;
  position:fixed;
  top:var(--logo-bar-height);
  width:100%;
  border-bottom: 1px #ccc solid;
  z-index:40;
}

/* Meta Toggle */
#logowrap {
  position:fixed;
  height:var(--logo-bar-height);
  width:100%;
  background-color:var(--color-logo-background);
  z-index:50;
  box-shadow: 0 3px 2px #cccccc4a;
}


#logowrap a {
  width: 28px;
  height: var(--logo-bar-height);
  margin: 18px var(--side-margin) 0;
  position:absolute;
}

#logowrap a img {
  margin: -15px var(--logo-bar-height) 0;
  position: absolute;
  max-height:calc(var(--logo-bar-height) - 6px);
  max-width: calc(100vw - 80px);
}

#logowrap a:after,
#logowrap a:before {
  content: "";
  position: absolute;
  left: 0;
  top: -9px;
}
#logowrap a:after{
  top: 9px;
}

/* upper and middle toggle icon bar */
#logowrap a,
#logowrap a:before {
  width: 30px;
  height: 5px;
  background-color: #999;
  transition: transform 0.2s;
  backface-visibility: hidden;
  /*border-radius: 2px;*/
}

/* bottom toggle icon bar */
#logowrap a:after{
  width: 30px;
  height: 5px;
  background-color: #bbb;
  transition: transform 0.2s;
  backface-visibility: hidden;
  /*border-radius: 2px;*/
}


#logowrap.on a {
  background-color: transparent;
}

#logowrap.on {
  box-shadow: none;
}

#logowrap.on a:before {
  transform: rotate(45deg) translate(5px, 5px);
  background-color: #ddd;
}
#logowrap.on a:after {
  transform: rotate(-45deg) translate(7px, -8px);
  background-color: #ddd;
}

#logowrap.on:hover > a:before {
  background-color: #df8700;
}
#logowrap.on:hover > a:after {
background-color: #df8700;
}


#meta.on {
  padding-top:0;
  opacity: 1;
  visibility: visible;
  transform: scaleY(1);
  width: 100vw;
  height: calc(100vh - var(--logo-bar-height));
  margin-top: var(--logo-bar-height);
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
  position: absolute;
  z-index: 20;
  transition: 0.26s cubic-bezier(0.47, -0.13, 0.32, 1.04);
}
#meta .on::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/*
#logowrap.on {
      transform: translate(0, -5px);
}
*/


/* don't scroll the page when the
meta navigation is shown to prevent
scrolling of the main content in the background
instead of the meta navigation*/

body.lock {
  overflow:hidden !important;
}

#rglogo {
  pointer-events: none;
}

#meta a[href="startseite.html"] {
  visibility:hidden;
}
#meta a[href="startseite.html"]::before {
  visibility:visible;
  content:"Startseite";
  position: absolute;
  text-align:center;
}

#meta {
  display:block !important;
  background: #ececec;
  transform: scaleY(0);
  opacity: 0;
  visibility: hidden;
  height:0;
  transform-origin: top;
}

#meta>ul>li {
  list-style: none;
  display: block;
  margin: 0;
  padding-bottom:10px;
}

#meta>ul>li:last-child {
  padding-bottom:30px;
}

#meta ul, #meta li a {
  list-style: none;
  display: block;
  padding:0;
}

#meta>ul>li>ul>li>a, .home {
  padding-top:15px;
  padding-bottom: 15px;
  padding-right: 5px;
  padding-left:20px;
  margin-top:1px;
  color: #333;
  background-color: #fff;
  text-decoration: none;
  transition: color .2s, background-color .2s;
  text-align:left;
}

.home a {
  height:100%;
  text-align:left;
}

.home>a>img {
  -webkit-filter: brightness(2.0);
  filter: brightness(2.0);
  padding-right:5px;
}


#meta>ul>li {
  padding-bottom: 15px;
  color: #333;
  font-size: 1.1em;
  text-align:center;
  vertical-align:center;
}

#meta>ul>li>a {
  color: #555;
  padding-bottom:15px;
  font-weight:800;
}

#meta>ul>li>ul>li>a {
  /*border-radius: 5px;*/
  border-left: solid 2px var(--color-tertiary);
}


.home:focus,
#meta li>ul>li>a:focus {
  background-color: #df8700;
  color: #fff;
  border-left: solid 6px var(--color-tertiary);
}

#meta p, #meta p a {
  font-size: 12px;
  text-align:
  center;
  color: #888;
}

/* Navregion Navigation */

nav {
  width:100% !important;
}

#navregion>nav>a:first-child::before {
  /* ⯆ */
  content:"\25BC\00FE0E ";
  padding-left:5px;
  padding-right:5px;
}

#navregion>nav>a.region.on::before,
#navregion>nav>a.regionactive.on::before{
  /* ⯅ */
  content:"\25B2\00FE0E ";
  padding-left:5px;
  padding-right:5px;
}

#navregion a::before:not(:first-of-type){
   /* ⯈ */
   /* Workaround: using an image instead of unicode to fix emoji display on most android systems */
  content:url(/fileadmin/templates2011/images/pfeil_mobile_nav_braun.png);
  padding-left:5px;
  padding-right:5px;
}

#navregion a {
  display: block;
  float: left;
  width:100%;
  background-color:var(--color-navregion-background);
  text-decoration: none;
  color:white;
  padding: 10px 0 10px 0;
  margin-top:2px;
}


#navregion>nav>a.region,
#navregion>nav>a.regionactive,
#navregion>nav>a.region.on,
#navregion>nav>a.regionactive.on {
  visibility:visible;
  background-color: var(--color-secondary);
  color: #fff;
  /*border-radius: 5px;*/
}


#navregion>nav>a:not(:first-of-type){
  height:0;
  padding:0;
  transform:scaleY(0.1);
  transition: transform .2s ease;
  visibility:hidden;
}

#navregion>nav>a.on ~ a {
  visibility: visible;
  height: auto;
  width: calc(100% - 30px);
  padding: 10px 0 10px 10px;
  transform:scaleY(1);
  border: 1px var(--color-secondary) solid;
  box-shadow: inset 0 -3px 1px #dedede;
  background-color: white;
  color: var(--color-secondary);
  border-radius: 3px;
  margin-left:var(--side-margin);
}


/* Navmain Navigation */

#navmain {
  -webkit-box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.7);
  -moz-box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.7);
  box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.7);
  display:table;
  width:100%;
  background-color:black;
  overflow:hidden;
}

#navmain:empty {
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
  background:url(/fileadmin/templates2011/images/bg_short.png) bottom left repeat-x;
}


.ortsstartseite img,
#navmain br{
  display:none;
}

@media only screen and (max-width: 450px) {
  #navmain>nav>li>a,
  #navmain .active>a,
  #navmain .sub>a{
    font-size:0!important;
  }

  #navmain>nav>li>a>span,
  #navmain .active>a>span,
  #navmain .sub>a>span{
    font-size:22px!important;
  }

}
@media only screen and (min-width: 451px) {
  #navmain>nav>li>a,
  #navmain .active>a,
  #navmain .sub>a{
    font-size:0.6em!important;
    white-space: nowrap;
  }

  #navmain>nav>li>a>span,
  #navmain .active>a>span,
  #navmain .sub>a>span{
    font-size:22px!important;
  }

  #navmain>nav>li>a>span::after {
    font-size:0.6em!important;
    content: ' ';
    padding-left:20px;
  }


  #navmain>nav>li>a br {
    display:none !important;
  }

}

#navmain .sub>ul,
#navmain .active>ul {
  display:none;
}

#navmain>nav>li>a,
#navmain .active>a,
#navmain .sub>a,
#navmain .sub>ul{
  visibility:visible;
  color:white;
}

#navmain>nav>li {
  text-decoration: none;
  list-style-type: none;
  width:100%;
  margin-bottom:0px;
  height:30px !important;
}

#navmain nav a{
  padding-top:8px;
  padding-bottom:2px;
  padding-left:var(--side-margin);
  width:calc(100% - var(--side-margin));
  height:100%;
  display:inline-block;
  float:left;
  border-top: 2px solid var(--color-secondary);
  background: var(--navmain-fallback-color); /* Old browsers */
  background: var(--navmain-gradient);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f29201', endColorstr='#d17b00',GradientType=0 ); /* IE6-9 */

}



#navmain>nav>li>a:hover {
  background-color:#ffbe5f;
  text-decoration: none;
}


#navmain .active>a{
  /*padding-top:4px;
  padding-bottom:6px;*/

  vertical-align: middle;
  height:100%;
  display:inline-block;
  float:left;
  box-shadow: inset 3px 3px 3px #000;
   -moz-box-shadow: inset 3px 3px 3px #000;
   -webkit-box-shadow: inset 3px 3px 3px #000;

  background: var(--navmain-active-fallback-color); /* Old browsers */
  background: var(--navmain-active-gradient);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bc7100', endColorstr='#ad6500',GradientType=0 ); /* IE6-9 */

}

#navmain .ortsstartseite>a{
  padding-top:8px;
  padding-bottom:2px;

}

#navmain .active>a:before{
  /* ⯈ */
  /* Work around: using an image instead of unicode to fix emoji display on most android systems */
  padding-left:var(--side-margin);
  content:url(/fileadmin/templates2011/images/pfeil_mobile_nav.png);
  padding-right:5px;
  color:white;
}

#navmain .ortsstartseite>a:before{
  padding-left:var(--side-margin);
  content:url('/fileadmin/templates2011/images/icon_ortsstartseite.png');
  color:white;
}



/* Rootline hidden */
#rootline {
  height:0;
  width:0;
  visibility:hidden;
}

/* Glossary adjustement */

dfn:after {
  left:0;
}


abbr[title]:hover:after, acronym[title]:hover:after, dfn[title]:hover:after {
  left: 50% !important;
  right: 50% !important;
  top: var(--logo-bar-height) !important;
  position: fixed !important;
  transform: translate(-50%, 0) !important;
  width: 100% !important;
  box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.7);
}

abbr[title]:after, acronym[title]:after, dfn[title]:after{
  content: attr(title) "\a (Mehr erfahren?)" !important;
  white-space: pre-wrap !important;
}

/* Monument carousel hidden*/

#denkmaeler {
  height:0;
  width:0;
  visibility:hidden;
}

/* Endnodes adjustment*/

.csc-frame-source {
  font-size:0.7em !important;
  width:calc(100% - 1em) !important;
}


/* Wappen */
#wappen {
  padding-left: calc(50% - 55px);
}


/* Footer */
footer{
  background-color:var(--color-secondary);
  Color:white;
  line-height: 1.4em;
  font-size:0.7em;
}

footer a {
  color:var(--color-tertiary);
}

footer a:hover {
  color:#fff;
}

#footer_regions,
#footer_library {
  height:0;
  width:0;
  visibility:hidden;
  font-size:0;
}

#footer_project h3,
#footer_website h3,
#herausgeber h3{
  margin:0;
}

#footer_project ul,
#footer_website ul,
#herausgeber p {
  list-style:none;
  display:inline-block;
  margin:0;
  padding:0 0 10px var(--side-margin);
}

#herausgeber img {
  width:100%;
}

#footer_project li,
#footer_website li {
  float:left;
  padding-left:5px;
}

#footer_project li::after,
#footer_website li::after {
  content:" |";
  white-space: pre;
}

#footer_project li:last-child:after,
#footer_website li:last-child:after {
  content:"";
}

#innerFooter #copyright {
  font-size: 2.3vw;
}

#innerFooter #fragFINN_button {
  padding-top:20px;
  padding-left: calc(50% - 50px);
  float:right;
  height:60px;
}

#innerFooter #fragFINN_button img {
  width: 50px !important;
  margin: var(--side-margin) !important;
}

/* Inhaltsverzeichnis */


.sectionmenu {
  position: fixed;
  bottom:0;
  width:auto;
  margin: 0 0 0 calc(var(--side-margin) * -1) !important;
  padding: 3px !important;
  font-size:0.8em;

  max-height:90%;
  overflow-y:scroll;
  overflow-x:hidden;
  -webkit-overflow-scrolling: touch;
  width:calc(100% - 1.5em);
  z-index:1;

}

.sectionmenu:hover,
.sectionmenu:focus {
  background-color:#fff;
}

.sectionmenu>li,
.sectionmenu>ul {
  transform: scaleY(0);
  opacity: 0;
  visibility: hidden;
  height:0;
  transform-origin: bottom;
  transition: transform 0.26s ease;
}

.sectionmenu.on>li,
.sectionmenu.on>ul {
  opacity: 1;
  visibility: visible;
  transform: scaleY(1);
  width:100%;
  height:auto;
}


.sectionmenu.on>ul {
  margin-top:15px;
  padding-bottom:15px;
}

.sectionmenu:before {
  content:"≡ Inhaltsverzeichnis ausklappen";
}

.sectionmenu.on:before {
  content:"";
}

.sectionmenu.on:after {
  content:"≡ Inhaltsverzeichnis einklappen";
}





aside {
  z-index:1 !important;
  /*padding:5px;*/
  /*border: 1px silver solid;*/
  /*border-radius: 5px;*/
  width:calc(100% - var(--side-margin) - 2px) !important;
}

aside:empty {
  border: none !important;
}

aside div#bibliothek {
  border-bottom: none !important;
}

aside h2 {
  display: none;
}


/* Fit different content boxes */
.content-03 {
  text-align:center;
}

.csc-frame {
  border: 1px silver solid;
  /*border-radius: 5px;*/
  padding: 5px !important;
  width:calc(100% - var(--side-margin)) !important;
  float:left !important;
  margin-left:0 !important;
}

.csc-frame-leftcolumnbox h3,
.csc-frame-rightcolumnbox h3 {
  padding: 1.3em 0.5em 0.4em 1.5em !important;
}

.csc-frame-teasermain {
  width: calc(100% - var(--side-margin) - 4px) !important;
}

.csc-frame-teaserright {
  width: 100% !important;
}

.csc-frame-teasermain .csc-textpic-caption .copy, .csc-caption {
    display:none;
}

@media only screen and (max-width: 460px) {
  .csc-textpic-intext-left .csc-textpic-image,
  .csc-textpic-intext-right .csc-textpic-image {
    width:50% !important;
    max-width: calc(100vw - var(--side-margin) * 2) !important;
  }
}

@media only screen and (max-width: 370px) {
  .csc-textpic-intext-left .csc-textpic-image,
  .csc-textpic-intext-right .csc-textpic-image {
    width:100% !important;
  }
}

/* enable word wrap for very long words next to images */
@media only screen and (max-width: 550px) and (min-width: 451px) {
  .csc-textpic-text p {
    overflow-wrap: break-word;
  }
}


.csc-textpic-image img {
  max-width: calc(100vw - var(--side-margin) * 2) !important;
  height: auto !important;
  width: 100%;
}

.csc-frame .csc-frame-rightcolumnbox,
.csc-frame .csc-frame-leftcolumnbox {

}


.csc-frame-teaserright p.rubrik,
.csc-frame-teaserright div.csc-textpic img,
.csc-frame-teaserright .csc-textpic-imagewrap,
.csc-frame-teaserright .csc-textpic,
.csc-frame-teasermain p.rubrik,
.csc-frame-teasermain div.csc-textpic img,
.csc-frame-teasermain .csc-textpic-imagewrap,
.csc-frame-teasermain .csc-textpic {
  width:100% !important;
  height:auto;
  position:unset !important;
}

.csc-textpic div {
  margin-right:0 !important;
  margin-left:0 !important;
}

.csc-textpic-imagewrap{
  width:100% !important;
}
.csc-textpic-intext-right,
.csc-textpic-intext-left,
.csc-textpic-imagewrap {
    float: none !important;
}

.csc-frame-teaserright h3,
.csc-frame-teasermain h3 {
  margin-top: 0.5em !important;
}

.csc-frame-teaserright hr,
.csc-frame-teasermain hr {
  display:none;
}

.news-list-container {
  z-index:0;
  width:calc(100vw - 20px);
}

.news-list-resultbrowser {
  display: contents;
}


/*
.csc-frame-columnbox1, .csc-frame-columnbox2 {
  padding: 1em 1em 0 1em !important;
}
*/

/* Ortskarte */
#ortemap {
    width: calc(100vw - 50px);
}

#ortemap > .noSel {
  max-width:calc(100vw - 20px) !important;
  width:100% !important;
}

/* Google Maps */
div#map_canvas {
  width:100% !important;
}

/* hide defunctional google maps */
#map_canvas_overview:empty {
  display:none;
}


/* Kalender */

.vevent .dtstart-container {
  font-size:0.7em;
}


/* damlightbox-Anpassungen */
/* lbCenter.scale, lbBottomContainer.scale und lbBottomContainer.top werden in 768px.js festgelegt */
/* Dieser zweite Schritt ist notwendig, da die Bildbreite in der Extension damlightbox per PHP auf dem Server berechnet wird.*/

#lbCloseLink {
  float:left;
  margin-left:20px;
}

#lbOverlay {
  top:0 !important;
  left:0 !important;
  position:fixed !important;
  width:100% !important;
  height:100% !important;
}

#lbBottomContainer,
#lbCenter {
  left:0 !important;
  margin:0 !important;
  margin left:20px !important;
}

#lbCenter {
  transform-origin:bottom left;

}


#lbBottomContainer {
  transform-origin:top left;
}



/* Ortskarten ausblenden */
.ortskarte {
  /*display:none;*/
content: url("");
width:0 !important;
height:0 !important;
}


/* Startseiten-Anpassungen */

#regionet-12546 #meta {
  padding-top: 0;
}

#regionet-12546 aside {
  border:0;
}

div#main-column {
  width:auto !important;
}

#region_list {
  font-size:0.7em;
  padding-bottom:1em;
  line-height:0;
}

#region_list a {
  float:left;
  margin:0 !important;
  padding:0 !important;
}


#region_list a::after {
  content:" | ";
  white-space: pre;
  color: var(--color-secondary);
  font-weight:100;
}

#region_list a:last-child::after {
  content:"";
}

#regionetmap {
  float: left !important;
  width:100%;
  text-align:center;
  margin-top:0 !important;
  margin-bottom:20px;
}


/* Zentrale Dienste */
#links-aktionen,
#links-aktionen h2,
#links-aktionen a,
#links-zentrale-dienste,
#links-zentrale-dienste h2,
#links-zentrale-dienste nav,
#links-zentrale-dienste a {
  width: 100% !important;
  padding-left:var(--side-margin);
}

#links-aktionen img,
#links-zentrale-dienste img {
  max-width:20% !important;
}


#links-aktionen p,
#links-zentrale-dienste p {
  display:flex !important;
  padding-right:5px;
}

#links-aktionen a>div,
#links-zentrale-dienste a>div {
  display:flow-root;
}

/*
#logo {
  max-width: 239px;
  width:239px;
}
*/


/* Formulare */

.csc-mailform {
  width: calc(100vw - 20px);
}

.csc-mailform ol {
 margin:0 !important;
}

.csc-mailform textarea,
.csc-mailform input {
  width: calc(100% - 0.5em) !important;
}