/* Basis-Regeln aus dem zusammengefassten TYPO3-CSS.
   Nur die Teile, die im Backup nicht als eigene Datei vorliegen:
   fluid_styled_content, cn_multicontent-Spalten, Slidein, Karte. */

/* ---------- fluid_styled_content ---------- */
.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}
.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:0 solid #000;padding:0}
.ce-intext.ce-right .ce-gallery,.ce-intext.ce-left .ce-gallery,.ce-above .ce-gallery{margin-bottom:10px}
.ce-image .ce-gallery{margin-bottom:0}
.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-column{margin-right:10px}
.ce-column:last-child{margin-right:0}
.ce-row{margin-bottom:10px}
.ce-row:last-child{margin-bottom:0}
.ce-above .ce-bodytext{clear:both}
.ce-intext.ce-left ol,.ce-intext.ce-left ul{padding-left:40px;overflow:auto}
.ce-headline-left{text-align:left}
.ce-headline-center{text-align:center}
.ce-headline-right{text-align:right}
.ce-table{width:100%;max-width:100%}
.ce-table th,.ce-table td{padding:.5em .75em;vertical-align:top}

/* ---------- cn_multicontent: Spaltensystem ---------- */
:root{
  --cn_multigap:20px;
  --cn_multifaktor3:1.33;
  --cn_multifaktor4:1.5;
  --cn_multibreite20:calc(100% / 5);
  --cn_multibreite25:calc(100% / 4);
  --cn_multibreite33:calc(100% / 3);
  --cn_multibreite40:calc(var(--cn_multibreite20) * 2);
  --cn_multibreite50:calc(var(--cn_multibreite25) * 2);
  --cn_multibreite60:calc(var(--cn_multibreite20) * 3);
  --cn_multibreite66:calc(var(--cn_multibreite33) * 2);
  --cn_multibreite75:calc(var(--cn_multibreite25) * 3);
  --cn_multibreite80:calc(var(--cn_multibreite20) * 4);
}
.tx_cn-multicontent{width:100%;float:left;clear:both}
.ui-accordion-header,.ui-accordion-content{float:left;clear:both;width:100%}
.tx_cn-columns{width:100%;float:left;clear:both}
.tx_cn-columns .row{width:100%;float:left;clear:both}
.tx_cn-columns .row > div > div{float:left;clear:both}
.tx_cn-columns .row.equalize > div > div{height:100%}
.tx_cn-columns .row + .row{margin-top:calc(var(--cn_multigap) * 2)}
.tx_cn-columns .row .col-20{width:var(--cn_multibreite20);float:left}
.tx_cn-columns .row .col-25{width:var(--cn_multibreite25);float:left}
.tx_cn-columns .row .col-33{width:var(--cn_multibreite33);float:left}
.tx_cn-columns .row .col-40{width:var(--cn_multibreite40);float:left}
.tx_cn-columns .row .col-50{width:var(--cn_multibreite50);float:left}
.tx_cn-columns .row .col-60{width:var(--cn_multibreite60);float:left}
.tx_cn-columns .row .col-66{width:var(--cn_multibreite66);float:left}
.tx_cn-columns .row .col-75{width:var(--cn_multibreite75);float:left}
.tx_cn-columns .row .col-80{width:var(--cn_multibreite80);float:left}
.tx_cn-columns .row .col-100{width:100%;float:left;clear:both}
.tx_cn-columns .row .col-100 > div{width:100%;margin-left:0;margin-right:0}
.tx_cn-columns[data-cols="2"] .row > div > div{width:calc(100% - var(--cn_multigap));margin-left:calc(var(--cn_multigap) / 2);margin-right:calc(var(--cn_multigap) / 2)}
.tx_cn-columns[data-cols="2"] .row > div:nth-child(odd) > div{margin-right:var(--cn_multigap);margin-left:0}
.tx_cn-columns[data-cols="2"] .row > div:nth-child(even) > div{margin-left:var(--cn_multigap);margin-right:0}
.tx_cn-columns[data-cols="3"] .row > div > div{width:calc(100% - (var(--cn_multigap) * var(--cn_multifaktor3)));margin-right:calc(var(--cn_multigap) * var(--cn_multifaktor3));margin-left:0}
.tx_cn-columns[data-cols="3"] .row > div:nth-child(2n+0) > div{margin-left:calc((var(--cn_multigap) * var(--cn_multifaktor3)) / 2);margin-right:calc((var(--cn_multigap) * var(--cn_multifaktor3)) / 2)}
.tx_cn-columns[data-cols="3"] .row > div:nth-child(3n+0) > div{margin-left:calc(var(--cn_multigap) * var(--cn_multifaktor3));margin-right:0}

/* ---------- Karte im Fuss ---------- */
#footer{position:relative}
#karte{float:left;clear:both;width:100%;padding:10px 0 0 0;position:relative;overflow:hidden}
#karte .color{content:"";display:block;width:100px;height:60px;border-radius:100%;position:absolute;left:50%;margin-left:-50px;top:-28px;z-index:3}
#karte.offen .color{box-shadow:0 2px 1px 0 rgba(0,0,0,.3)}
#karte.zu .frame{height:0;overflow:hidden;transition:all .3s ease}
#karte.offen .frame{height:360px;overflow:hidden;width:100% !important;transition:all .3s ease}
.mapsschalter{position:absolute;top:-20px;left:50%;z-index:4;width:30px;margin:0 0 0 -15px}
.pin{width:30px;height:30px;transform:rotate(-45deg);cursor:pointer;position:relative}
.pin span{display:block;border-radius:50% 50% 50% 0;width:100%;height:100%;background:#5a6268}
.pin span::before{content:'';width:14px;height:14px;top:50%;left:50%;margin:-7px 0 0 -7px;background:#fff;position:absolute;border-radius:50%;z-index:2}

/* ---------- Slidein: Grundpositionierung ---------- */
.owl-lock{overflow:hidden}
.slidein{position:fixed;right:0;top:30vh;z-index:4}
.slideinmob{position:absolute;right:0;top:20vh}
.slidein > .frame > .rahmen{float:right;max-width:450px;overflow:hidden;background:#fff;box-shadow:0 0 3px 0 rgba(0,0,0,.3);margin-bottom:10px}
.slidein > .frame.open > .rahmen{height:auto !important}
.slidein > .frame > .rahmen .ce-textpic{width:calc(100% - 20px);margin:10px 10px}
.slidein > .frame > .button{display:block;float:left;cursor:pointer}
.slidein > .frame > .button img{display:block}
.slidein > .frame{width:auto;position:relative;margin:0 0 10px 0}
.slidein > .frame > .button .ce-column,.slidein > .frame > .button .image{float:right;margin:0;padding:0}
.slidein > .frame > header.button{transform:rotate(90deg);transform-origin:right top;padding:0 10px;width:auto;white-space:nowrap;position:relative}
.slidein > .frame > header.button > *{margin:0;padding:0;line-height:60px;color:#fff;transform:rotate(180deg)}

/* ---------- Statische Fassung: nichts per JavaScript verstecken ---------- */
#oben .navi .hnavi li{opacity:1 !important}
.frame-bildslider{opacity:1 !important}

/* ---------- Kontaktleiste auf dem Handy ---------- */
.slideinmob > .frame > .rahmen{display:none}
.slideinmob > .frame{margin:0 0 10px 0}
.slideinmob .button.textbutton{width:50px;float:right;clear:both}
.slideinmob .button .ce-column,.slideinmob .button .image{float:right;margin:0;padding:0}
.slideinmob header.button{
  transform:rotate(90deg);transform-origin:right top;padding:0 10px;width:auto;
  white-space:nowrap;position:relative;
}
.slideinmob header.button > *{margin:0;padding:0;line-height:60px;color:#fff;transform:rotate(180deg)}
.slideinlayer{
  width:100%;height:100%;position:fixed;right:0;top:0;bottom:0;left:0;z-index:12;
  display:block;background:rgba(0,0,0,.8);cursor:pointer;
}
.slideinrespinhalt{
  width:80%;max-height:60vh !important;background:#fff;float:right;clear:both;
  position:fixed;z-index:13;top:20%;right:10%;padding:10px 0;height:auto !important;
}
.slideinrespinhalt > .ce-textpic{overflow-y:auto;padding:0 10px;width:calc(100% - 20px);max-height:60vh}
.slideinschliessen{
  width:24px;height:24px;cursor:pointer;display:block;position:absolute;left:0;top:-24px;
  background:url('../fileadmin/cn_website/module/slidein/schliessen.png') right top no-repeat;
}
@media (max-width:1200px){
  .slideinmob .button{width:40px;height:40px}
  .slideinmob .button img{width:100% !important;height:auto !important}
  .slideinmob header.button{font-size:16px;height:auto;padding:5px 10px}
  .slideinmob header.button > *{line-height:1em}
}