/* 06.01.2025 15:00  www.hallo-bergstrasse.de */

@font-face {
    font-family: inkfree;
    src: url(../font/inkfree.ttf)
}

.Normal {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400
}

H1 {
    color: #000;
    font-size: 32px;
    font-weight: 400;
    line-height: 40px;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 10px
}

H2,H3 {
    color: #000;
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 10px
}

H4 {
    color: #955251;
    font-size: 14px;
    line-height: 14px;
    padding-top: 10px
}

.Head {
    font-size: 14px
}

.DatumVonBis {
    margin-top: 2px;
    margin-bottom: 2px;
    color: #444;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700
}

.NA_Kategorie {
    margin-top: 2px;
    color: #ce4718;
    font-size: 16px;
    line-height: 24px
}

.NA_Headline {
    margin-top: 0;
    margin-bottom: 5px;
    padding-top: 0;
    padding-bottom: 5px;
    color: #006ee5;
    font-weight: 700;
    font-size: 16px;
    line-height: 30px
}

.NA_StartseiteTitel,.NA_startseitetitel {
    color: #444;
    font-size: 20px;
    line-height: 26px;
    margin-top: 5px;
    margin-bottom: 10px;
    padding: 0;
    font-weight: 500
}

.NA_StartseiteTeaser {
    color: #444;
    font-size: 16px;
    line-height: 24px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0
}

.VK_StartseiteDatumVonBis {
    margin-top: 2px;
    margin-bottom: 2px;
    color: #444;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700
}

.VK_StartseiteTitel {
    color: #e35e2f;
    font-size: 24px;
    line-height: 29px;
    margin-top: 5px;
    margin-bottom: 10px;
    padding: 0;
    font-weight: 500
}

.VK_StartseiteLocation {
    color: #444;
    font-size: 14px;
    line-height: 20px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0
}

.VK_StartseiteTeaser {
    color: #444;
    font-size: 16px;
    line-height: 24px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0
}

.TablePaneRahmenOben {
    border-top: 1px dotted;
    border-right: 0 solid;
    border-bottom: 0 solid;
    border-left: 0 solid;
    line-height: 20px
}

A.DetailLink:Link,A.DetailLink:visited,A.DetailLink:active {
    border-color: #ce4718;
    background-color: #cd4718;
    color: #fff;
    margin: 2px 0 2px 0;
    padding: 1px 5px 1px 5px;
    white-space: normal;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 4px
}

A.DetailLink:hover {
    background-color: #fff;
    color: #e35e2f;
    border: 1px solid
}

A.link_rot:Link,A.link_rot:visited,A.link_rot:active {
    border-color: #737916;
    background-color: #955251;
    color: #fff;
    margin: 2px 0 2px 8px;
    padding: 1px 5px 1px 5px;
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 4px
}

A.link_rot:hover {
    background-color: #fff;
    color: #955251;
    border: 1px solid
}

A.SuchenLink:Link,A.SuchenLink:visited,A.SuchenLink:active {
    border-color: #955251;
    background-color: #955251;
    color: #fff;
    margin: 2px 120px 6px 2px;
    padding: 15px 80px 15px 80px;
    position: relative;
    left: 5px;
    white-space: nowrap;
    text-decoration: none;
    border: 2px solid;
    border-radius: 4px
}

A.SuchenLink:hover {
    background-color: #eee;
    color: #955251;
    border: 2px solid
}

A.SuchenLinkLupe:Link,A.SuchenLinkLupe:visited,A.SuchenLinkLupe:active {
    border-color: #955251;
    background-color: #955251;
    color: #fff;
    margin: 2px 2px 2px 2px;
    padding: 2px 2px 2px 2px;
    position: relative;
    left: 5px;
    white-space: nowrap;
    text-decoration: none;
    border: 2px solid;
    border-radius: 4px
}

A.SuchenLinkLupe:hover {
    background-color: #eee;
    color: #955251;
    border: 2px solid
}

.SiteHeaderTab {
    background-image: url(Pix/PortalSiteBanner.jpg);
    width: 100%;
    height: 103px;
    background-repeat: no-repeat;
    border-right: #404040 0 solid;
    padding-left: 5px
}

.NormalWeinrot {
    color: #955251
}

.Farbe {
    color: #066
}

.FarbeDunkelblau {
    color: navy
}

.FarbeWeinrot {
    color: #955251
}

A.CommandButtonPA:active,A.CommandButtonPA:visited {
    text-decoration: none
}

.CommandbuttonPA {
    border-bottom: 3px solid #222;
    text-align: center;
    padding: 3px 15px
}

.CommandbuttonPA,A.CommandbuttonPA:active,A.CommandbuttonPA:link,A.CommandbuttonPA:visited {
    color: navy;
    background-Color: #eaeaea;
    border-left: 2px solid #ccc;
    border-top: 2px solid #ccc
}

.CommandbuttonPA,A.CommandbuttonPA:link {
    border-right: 3px solid #717171;
    text-decoration: none
}

A.CommandbuttonPA:link {
    font-weight: 700;
    border-bottom: 3px solid #717171
}

A.CommandbuttonPA:active,A.CommandbuttonPA:visited {
    border-right: 3px solid #000;
    border-bottom: 3px solid #000
}

A.CommandbuttonPA:visited {
    text-decoration: none
}

A.CommandButtonPA:hover {
    Color: #955251;
    background-Color: #efefef;
    border-left: 2px solid #717171;
    border-top: 2px solid #717171;
    border-right: 3px solid #ccc;
    border-bottom: 3px solid #ccc;
    text-decoration: underline
}

A:active,A:hover,A:link,A:visited {
    text-decoration: underline;
    color: #0071bb
}

.articleEntry {
    font-size: 16px;
    line-height: 26px;
    max-width: 900px
}

.newsreadmore A:hover {
    color: red;
    text-decoration: underline;
    background-color: #fff
}

.newsreadmore:link,.newsreadmore:active,.newsreadmore:visited,.newsreadmore:hover {
    font-weight: 400;
    text-decoration: underline;
    line-height: 12px;
    color: #955251
}

.newsreadmore A,.newsreadmore A:link,.newsreadmore A:active,.newsreadmore A:visited,.newsreadmore A:hover {
    color: red;
    font-weight: 400;
    line-height: 12px;
    text-decoration: underline;
    border: 0 solid #00f;
    display: inline
}

.newssummary150 {
    line-height: 150%;
    background-color: #fff
}

.newssummary9 {
    font-size: .8em
}

.newstitle {
    font-weight: 700;
    font-size: 10pt;
    text-decoration: none;
    color: #036
}

.newstitleabstand {
    font-size: 4px
}

.newstitlestartseite {
    font-weight: 700;
    text-decoration: none;
    color: #036
}

.viewnewsarticle {
    line-height: 150%
}

.TablePane {
    border-style: solid;
    border-color: red;
    border-width: 0;
    line-height: 20px
}

.TablePanealt {
    border-style: solid;
    border-color: red;
    border-width: 0;
    font-weight: 400;
    letter-spacing: 0;
    color: #000
}

.TablePaneGrau {
    border-style: solid;
    border-color: red;
    border-width: 0;
    background-color: #efebef;
    font-weight: 400;
    letter-spacing: 0;
    color: #000
}

.TablePaneGeschenke {
    border-style: solid;
    border-color: red;
    border-width: 0;
    font-weight: 400;
    letter-spacing: 0;
    color: #000
}

.ZeileGrau {
    background-color: #efebef
}

.ZelleMode {
    background-color: #e0e0e0
}

.ZelleGrau {
    background-color: #efebef;
    font-size: 9pt;
    vertical-align: top;
    text-align: center
}

.ZelleRot {
    background-color: #c00;
    font-size: 9pt;
    color: #fff;
    vertical-align: top;
    text-align: center
}

.ZelleImg {
    width: 180px;
    vertical-align: top;
    padding: 0;
    margin-right: 5px;
    margin-top: 10px;
    margin-bottom: 10px
}

.CellGruen {
    border-top: 1px solid #fff;
    border-bottom: 4px solid #fff;
    padding-left: 5px;
    padding-right: 5px;
    background-color: #c3e183
}

.CellBlau {
    border-top: 1px solid #fff;
    border-bottom: 4px solid #fff;
    padding-left: 5px;
    padding-right: 5px;
    background-color: #98c6e3
}

.CellOcker {
    border-top: 1px solid #fff;
    border-bottom: 4px solid #fff;
    padding-left: 5px;
    padding-right: 5px;
    background-color: #feae27
}

.Cellrot {
    border-top: 1px solid #fff;
    border-bottom: 4px solid #fff;
    padding-left: 5px;
    padding-right: 5px;
    background-color: #b92d1e
}

.Rahmen {
    border-top: thin solid #aaa;
    border-bottom: thin solid #aaa;
    border-left: 0 solid #aaa;
    border-right: 0 solid #aaa
}

.xshadetabs {
    padding: 3px 0;
    margin-left: 0;
    margin-top: 1px;
    margin-bottom: 0;
    font-weight: 700;
    color: brown;
    list-style-type: none;
    text-align: left
}

.xshadetabs li {
    display: inline;
    color: #036;
    text-decoration: none;
    margin: 0
}

.xshadetabs li a {
    text-decoration: none;
    position: relative;
    z-index: 1;
    padding: 3px 7px;
    margin-right: 3px;
    border: 1px solid #778;
    font-weight: 700;
    color: #036;
    background: #fff url(shade.gif)top left repeat-x
}

.shadetabs li a:visited {
    color: #036;
    text-decoration: none
}

.shadetabs li a:hover {
    color: brown;
    text-decoration: underline
}

.xshadetabs li a.selected {
    position: relative;
    background-image: url(shadeactive.gif);
    color: brown;
    top: 1px;
    text-decoration: none;
    border-bottom-color: #fff
}

.xshadetabs li a.selected:hover {
    text-decoration: none
}

.tabcontent {
    display: none;
    line-height: 16px
}

@media print {
    .tabcontent {
        display: block!important
    }
}

.Listing a:link,a.Listing:active,a.Listing:hover,a.Listing:link,a.Listing:visited,a:active,a:hover,a:visited {
    color: #000
}

.LinkBlau:link,.LinkBlau:active,.LinkBlau:visited,.LinkBlau:hover {
    color: #00c;
    font-weight: 400;
    text-decoration: none;
    border: 0 solid #00f;
    display: inline
}

.LinkBlau[href^=http]:after {
    content: " ↗";
    font-size: .9em;
    margin-left: 0;
    margin-right: .3em;
    vertical-align: top
}

.LinkBlau:hover {
    text-decoration: underline
}

.Link_PfeilBlau:active,.Link_PfeilBlau:hover,.Link_PfeilBlau:link,.Link_PfeilBlau:visited {
    color: #036;
    font-weight: 400;
    line-height: 20px;
    text-decoration: none;
    border: 0 solid #00f;
    padding-left: 8px;
    background: url(https://www.hallo-bergstrasse.de/Portals/13/images/pfeilrot.gif)no-repeat 0 3px
}

.Link_PfeilBlau:hover {
    text-decoration: underline
}

.LinkText:link,.LinkText:active,.LinkText:visited,.LinkText:hover {
    color: #00f;
    text-decoration: underline
}

#HOslideshowMode #slidesContainer .slide {
    margin: 0 auto;
    width: 540px;
    height: 883px
}

#HOslideshow,#HOslideshow #slidesContainer {
    margin: 0 auto;
    width: 640px;
    height: 683px;
    position: relative
}

#HOslideshow #slidesContainer {
    width: 560px;
    overflow: auto
}

#HOslideshow #slidesContainer .slide {
    margin: 0 auto;
    width: 540px;
    height: 683px
}

.control {
    display: block;
    width: 39px;
    height: 39px;
    text-indent: -10000px;
    position: absolute;
    cursor: pointer
}

#leftControl {
    top: 150px;
    left: 0;
    background: url(https://www.Hallo-Bergstrasse.de/portals/13/images/left.jpg)no-repeat 0 0
}

#rightControl {
    top: 150px;
    right: 0;
    background: url(https://www.Hallo-Bergstrasse.de/portals/13/images/right.jpg)no-repeat 0 0
}

#leftControlMode {
    top: 450px;
    left: 0;
    background: url(https://www.Hallo-Bergstrasse.de/portals/13/images/left.jpg)no-repeat 0 0
}

#rightControlMode {
    top: 450px;
    right: 0;
    background: url(https://www.Hallo-Bergstrasse.de/portals/13/images/right.jpg)no-repeat 0 0
}

#pageContainer {
    margin: 0 auto;
    width: 660px
}

#pageContainer h1 {
    display: block;
    width: 660px;
    height: 114px;
    text-indent: -10000px
}

.slide h2,.slide p {
    margin: 15px;
    text-align: center
}

.slide h2 {
    font: italic 16px Verdana,Geneva,sans-serif;
    color: #ccc;
    letter-spacing: -1px
}

.slide img {
    display: inline;
    text-align: center;
    border: 2px solid #ccc
}

div.slide a.advance-link {
    display: block;
    text-align: center
}

div.ListingFloatLeft {
    width: 48%;
    float: left;
    border-top: 0 dotted;
    padding-left: 0;
    padding-left: 5px;
    padding-top: 0;
    padding-bottom: 0;
    text-align: left
}

div.Listing {
    clear: left;
    border-top: 1px dotted;
    padding-left: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: left
}

@media screen and (max-width:768px) {
    div.Listing {
        padding-left: 15px;
        padding-right: 5px
    }
}

@media screen and (min-width:768px) {
    div.Listing {
        width: 100%
    }
}

div.ListingBild {
    float: left;
    width: 320px;
    max-width: 100%;
    padding-left: 0;
    padding-right: 10px;
    margin: 0 0 7px 0
}

.Listing .ListingBild {
    padding-right: 10px
}

.Listing a:link {
    text-decoration: none
}

div.ListingBild100 {
    float: left;
    width: 100%;
    border-top: 1px solid #fff;
    padding-left: 3px;
    padding-right: 0
}

img.ListingBildBreite {
    width: 100%;
    aspect-ratio: 3/2;
    padding-right: 10px
}

div.ListingText {
    width: auto;
    text-align: left;
    padding-left: 0;
    padding-right: 0
}

div.ListingTextRechts {
    float: left;
    width: 300px;
    text-align: left;
    padding-left: 4px;
    padding-right: 0
}

.clearfix:before,.clearfix:after {
    content: " ";
    display: table
}

.clearfix:after {
    clear: both
}

.clearfix {
    *zoom: 1
}

div.ListingBildUntertitel {
    font-size: 11px;
    line-height: 15px;
    margin-top: 2px;
    font-weight: 700;
    text-transform: uppercase
}

div.ListingBildText {
    float: left;
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    font-size: 16px;
    line-height: 22px
}

@media screen and (max-width:600px) {
    div.ListingBild {
        width: auto;
        float: none;
        padding-right: 0
    }

    div.ListingText {
        width: auto;
        float: none
    }

    div.ListingTextRechts {
        width: auto;
        float: none;
        padding-left: 10px;
        padding-right: 10px
    }

    img.ListingBildBreite {
        width: 100%
    }
}

div.Einleitung {
    float: left;
    width: 49%;
    border: 0 solid #000;
    font-weight: 700;
    padding-bottom: 20px
}

div.Werbung {
    float: right;
    width: 50%
}

div.Einleitung100 {
    float: left;
    width: 100%;
    border: 0 solid #000;
    font-weight: 700;
    padding-bottom: 20px
}

div.Werbung400 {
    float: right;
    width: 400px
}

@media screen and (max-width:450px) {
    div.Einleitung {
        width: 100%
    }

    div.Werbung {
        width: 100%
    }

    div.Werbung400 {
        width: 100%
    }
}

div.Veranstaltung {
    clear: left;
    border-top: 0 dotted;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 0;
    padding-right: 10px;
    text-align: left
}

@media screen and (max-width:768px) {
    div.Veranstaltung {
        padding-left: 15px;
        padding-right: 15px
    }
}

.Suchfeld select {
    background-color: #eac40a;
    border-radius: 10px;
    height: 30px;
    font-size: 14px
}

.Suchfeld .select select {
    background-color: #eac40a;
    border-radius: 10px;
    height: 30px;
    font-size: 14px
}

div.Suchfeld select {
    background-color: #eac40a;
    border-radius: 10px;
    height: 30px;
    font-size: 14px
}

div.SuchFeld {
    float: left;
    background-color: #ce4718;
    border-left: 0 solid #bbb;
    border-top: 0 solid #bbb;
    border-right: 0 solid #bbb;
    border-bottom: 0 solid #bbb;
    margin-top: 5px;
    margin-bottom: 0;
    padding-left: 10px;
    padding-top: 11px;
    padding-bottom: 11px;
    padding-right: 10px;
    text-align: left
}

.SuchFeld {
    float: left;
    background-color: #ce4718;
    border-left: 0 solid #bbb;
    border-top: 0 solid #bbb;
    border-right: 0 solid #bbb;
    border-bottom: 0 solid #bbb;
    margin-top: 5px;
    margin-bottom: 0;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
    text-align: left
}

.Suchfeld select {
    background-color: #eac40a;
    border-radius: 10px;
    height: 30px;
    font-size: 14px
}

option {
    margin: 5px 0 5px;
    padding: 10px 10px 10px;
    min-height: 30px
}

div.SuchButton {
    float: left;
    border-top: 0 dotted;
    margin-top: 5px;
    margin-bottom: 0;
    padding-left: 0;
    padding-top: 10px;
    padding-bottom: 0;
    padding-right: 0;
    text-align: left
}

div.SuchFeldFinden {
    float: left;
    background-color: #952c2c;
    border-left: 0 solid #bbb;
    border-top: 0 solid #bbb;
    border-right: 0 solid #bbb;
    border-bottom: 0 solid #bbb;
    margin-top: 5px;
    margin-bottom: 0;
    padding-left: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 5px;
    text-align: left
}

div.SuchButtonLupe {
    float: right;
    border-top: 0 dotted;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
    text-align: left
}

@media screen and (max-width:768px) {
    .RahmenUnten {
        margin-bottom: 15px
    }

    div.SuchFeld {
        width: auto;
        float: none;
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 2px;
        padding-bottom: 2px
    }

    div.SuchFeldFinden {
        width: auto;
        float: none;
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 2px;
        padding-bottom: 2px
    }

    div.Suchbutton {
        width: auto;
        float: none
    }
}

.wrapper {
    height: auto;
    margin: 0;
    padding: 0;
    text-align: left
}

.box {
    display: inline-block;
    width: 30%;
    height: 480px;
    min-width: 300px;
    padding-right: 30px;
    margin-right: 10px;
    background-color: #fff;
    float: left;
    margin: 0
}

@media screen and (max-width:850px) {
    .box {
        width: 48%;
        margin: 8px auto
    }
}

@media screen and (max-width:550px) {
    .box {
        width: 99%;
        height: auto;
        margin: 8px auto;
        padding: 0
    }

    H1 {
        font-size: 30px;
        line-height: 32px
    }

    .RahmenUnten {
        margin-bottom: 10px
    }

    .SuchFeld {
        padding-top: 0;
        padding-bottom: 0
    }

    .SuchFeldFinden {
        padding-top: 0;
        padding-bottom: 0
    }
}

.texteinblenden {
    margin-top: -60px;
    margin-left: 185px;
    font-weight: 700;
    color: #fff
}

.SubHead {
    font-size: 15px;
    margin-top: 10px;
    margin-bottom: 10px
}

.infobox li {
    text-align: left;
    line-height: 1.4em
}

.infobox.grau {
    background: #f0f0f0;
    color: #000
}

.infobox.gruen {
    background: #becc76;
    color: #fff
}

.infobox.braun {
    background: #56321a;
    color: #fff
}

.infobox.wide {
    width: 93%
}

.infobox.breit {
    margin: 10px 40px 20px 0;
    padding: 15px 1px 5px 5px;
    float: left;
    width: 100%
}

.infobox.left {
    margin: 10px 40px 20px 0;
    float: left
}

.infobox a:link {
    text-decoration: none
}

.infobox {
    display: block;
    padding: 15px 25px;
    box-shadow: 0 0 15px rgba(31,30,30,.25);
    border-radius: 3px;
    background: #fff;
    color: #fff;
    float: left;
    width: 40%;
    text-align: left
}

.infoboxfreizeit H2 {
    text-align: left;
    line-height: 1.4em;
    padding-left: 56px
}

.infoboxfreizeit ul {
    margin-left: 30px
}

.infoboxfreizeit li {
    text-align: left;
    list-style: none;
    padding: 5px 28px;
    background-image: url(icons/icon-haken.jpg);
    background-repeat: no-repeat;
    background-position-y: 7px;
    background-size: 20px
}

.infoboxfreizeit {
    display: block;
    margin: 10px 40px 20px 0;
    padding: 15px 1px 5px 5px;
    box-shadow: 0 0 15px rgba(31,30,30,.25);
    border-radius: 3px;
    background: #f0f0f0;
    color: #000;
    background-image: url(icons/icon-info.jpg);
    background-position-x: 5px;
    background-position-y: 12px;
    background-size: 40px;
    background-repeat: no-repeat;
    float: left;
    width: 100%;
    text-align: left
}

.infoboxfreizeit.historie {
    background-image: url(icons/icon-geschichte.jpg)
}

.infoboxmehr a:link {
    text-decoration: none;
    color: #000
}

.infoboxmehr H2 {
    text-align: left;
    line-height: 1.4em;
    padding-left: 56px
}

.infoboxmehr ul {
    margin-left: 30px;
    margin-right: 20px
}

.infoboxmehr li {
    text-align: left;
    list-style: none;
    padding: 5px 28px;
    background-image: url(icons/icon-linkpfeil.jpg);
    background-repeat: no-repeat;
    background-position-y: 7px;
    background-size: 20px
}

.infoboxmehr li.ohne {
    background-size: 1px
}

.infoboxmehr {
    display: block;
    margin: 10px 40px 20px 0;
    padding: 15px 1px 5px 5px;
    box-shadow: 0 0 15px rgba(31,30,30,.25);
    border: #bbb;
    border-style: solid;
    border-width: 0;
    border-radius: 3px;
    background: #fff;
    background-image: url(icons/icon-tipp.jpg);
    background-position-x: 5px;
    background-position-y: 12px;
    background-size: 40px;
    background-repeat: no-repeat;
    color: #000;
    float: left;
    width: 100%;
    text-align: left
}

.zentriert {
    text-align: center;
    font-size: 12px;
    font-style: italic
}

@media screen and (max-width:850px) {
    .infobox.left {
        width: 85%
    }
}

img {
    max-width: 100%;
    height: auto
}

.xflexbox img {
    max-width: auto;
    width: 300px;
    height: 200p;
    display: block;
    margin-left: auto;
    margin-left: auto
}

.ListingBild img {
    width: 100%;
    height: auto;
    aspect-ratio: 3/2;
    object-fit: cover;
    margin-left: 0;
    margin-right: 0
}

@media screen and (max-width:768px) {
    .ListingBild img {
        width: 100%;
        height: auto
    }
}

.flexboxlisting {
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 100%
}

.flexboxlisting .fb {
    border: 1px solid #bbb;
    width: 300px;
    border-radius: 5px;
    margin-bottom: 25px
}

@media (min-width:700px) {
    .flexboxlisting {
        max-width: 690px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between
    }

    .flexboxlisting .fb {
        width: 228px
    }
}

@media (min-width:1000px) {
    .flexboxlisting {
        max-width: 800px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between
    }

    .flexboxlisting .fb {
        width: 228px
    }
}

.flexbox {
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    font-size: 100%;
    display: flex;
    flex-wrap: wrap
}

.fb {
    margin-bottom: 25px
}

fb a:link {
    text-decoration: none
}

.flexbox .fb {
    border: 1px solid #bbb;
    width: 300px;
    border-radius: 5px;
    margin-bottom: 25px;
    box-shadow: 4px 4px rgb(0 0 0/15%);
    text-decoration: none
}

@media (max-width:500px) {
    .flexbox {
        width: 90%;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto
    }

    .flexbox .fb {
        width: 100%
    }
}

@media (min-width:700px) {
    .flexbox {
        max-width: 630px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between
    }

    .flexbox .fb {
        width: 300px
    }
}

@media (min-width:1000px) {
    .flexbox {
        max-width: 980px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between
    }

    .flexbox .fb {
        width: 32%
    }
}

.flexboxlisting .ListingBild {
    float: left;
    border-top: 0 solid #fff;
    padding-left: 0;
    padding-right: 0
}

.flexboxlisting h2 {
    width: 100%;
    border: 0 solid #bbb;
    color: #444;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: 2.5px;
    text-align: center;
    margin-top: 25px;
    margin-bottom: 20px;
    padding-bottom: 5px;
    text-decoration: overline underline;
    text-decoration-color: #aaa;
    text-underline-offset: 4px
}

.flexboxlisting .ListingBild img {
    width: 300px;
    height: 200px;
    padding-left: 0;
    margin-left: 0;
    margin-right: 0
}

@media (min-width:700px) {
    .flexboxlisting .ListingBild img {
        width: 228px;
        height: 151px
    }
}

.flexbox h1 {
    margin: auto
}

.flexbox h2 {
    width: 100%;
    border: 0 solid #bbb;
    color: :#000;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: 2.5px;
    text-align: center;
    margin-top: 25px;
    margin-bottom: 20px;
    padding-bottom: 5px;
    text-decoration: none;
    text-decoration-color: #aaa;
    text-underline-offset: 4px
}

.oberunterstriche {
    position: relative;
    width: 100%;
    border: 0 solid #bbb;
    color: :#000;
    font-size: 22px;
    font-style: italic;
    line-height: 40px;
    letter-spacing: .5px;
    text-align: center;
    margin-top: 25px;
    margin-bottom: 20px;
    padding-bottom: 5px;
    text-decoration: none;
    text-decoration-color: #aaa;
    text-underline-offset: 4px
}

.oberunterstriche::before {
    position: absolute;
    left: calc(50% - 125px);
    content: "";
    border: 1px solid;
    border-width: 1px 0 0 0;
    margin-top: -3px;
    width: 250px
}

.oberunterstriche::after {
    position: absolute;
    left: calc(50% - 125px);
    content: "";
    border: 1px solid;
    border-width: 0 0 1px 0;
    padding-top: 40px;
    width: 250px
}

.parent {
    position: relative;
    max-width: 980px;
    margin: 0 auto
}

.parent .text {
    position: relative;
    background: #003200;
    background: rgba(0,50,0,.5);
    color: #fff;
    width: 60%;
    padding: 15px;
    margin: 0 auto;
    margin-top: -100px;
    margin-bottom: 60px
}

.parent .text.weiss {
    background: rgb(255,255,255,.8);
    color: #000;
    width: 75%;
    padding-top: 10px;
    margin-top: -55px;
    margin-bottom: 20px
}

@media (max-width:500px) {
    .parent .text.weiss {
        background: rgb(255,255,255,.85);
        margin-top: -55px;
        width: 80%
    }
}

.parent .text.ocker {
    background: rgba(249,249,249,.9);
    color: #000;
    width: 400px;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 5px;
    margin-top: -45px;
    margin-bottom: 35px
}

.parent .text.maps {
    background: rgba(249,249,249,.9);
    color: #000;
    width: 400px;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 5px;
    font-size: 12px;
    line-height: 13px;
    margin-top: -200px;
    margin-bottom: 35px
}

.parent .text.ocker h1 {
    font-size: 28px
}

.parent .text.ocker h2 {
    font-size: 24px;
    line-height: 24px;
    letter-spacing: .07em
}

@media (max-width:500px) {
    .parent .text.ocker {
        width: 65%;
        padding-top: 10px;
        padding-bottom: 0;
        margin-top: -40px;
        margin-bottom: 5px
    }
}

@media (max-width:500px) {
    .parent .text.maps {
        width: 86%;
        padding-top: 10px;
        padding-bottom: 0;
        margin-top: -100px;
        margin-bottom: 5px
    }
}

.parentveranstaltung {
    position: relative;
    max-width: 980px;
    margin: 0 auto
}

.parentveranstaltung .textart {
    position: relative;
    background: #003200;
    background: rgba(0,50,0,.5);
    color: #fff;
    padding: 5px;
    margin-top: -180px;
    margin-left: 200px;
    margin-right: 10px;
    margin-bottom: 60px;
    font-size: 24px;
    line-height: 24px;
    letter-spacing: .07em
}

.dropdown {
    position: relative;
    display: inline-block
}

.dropdownflexbox {
    display: flex;
    align-items: center
}

.dropbtn {
    background-color: #fff;
    color: #000;
    padding: 16px;
    font-size: 16px;
    border: 0;
    cursor: pointer
}

.dropdown-content {
    display: none;
    min-width: 160px
}

.dropdown-content ul {
    list-style-type: square;
    margin-left: 20px;
    padding: 0
}

.dropdown-content a:hover {
    color: #000;
    text-decoration: underline
}

.dropdown-content a {
    color: #000;
    padding: 1px 1px;
    text-decoration: none;
    display: block
}

.dropdown-content ul li a {
    color: #000;
    padding: 1px 1px;
    text-decoration: none;
    display: block
}

#dropdown-toggle:checked~.dropdown-content {
    display: block
}

#dropdown-toggle:checked~.dropdownflexbox .dropbtn::after {
    content: "Verbergen"
}

#dropdown-toggle:checked~.dropbtn {
    content: "Zuklappen!"
}

.dropbtn::after {
    content: "Anzeigen"
}

.site-header .site-branding .site-description {
    font-size: 1em;
    margin-top: 0;
    color: #767676
}

.site-header .site-branding {
    margin: 92px 0 41px 0;
    text-align: center;
    display: block;
    clear: both
}

.site-header .site-branding .site-title {
    font-family: "inkfree",sans-serif;
    font-size: 2.9em;
    font-weight: 400;
    letter-spacing: 1px;
    margin: 0;
    color: #1c1e1f;
    display: inline-block
}

.my-dropdown {
    border: 1px solid #ccc;
    padding: 5px;
    background-color: #f7f7f7;
    border-radius: 10px;
    font-size: 17px;
    width: 195px
}

.my-dropdown li {
    font-size: 17px
}

.box-caption {
    position: absolute;
    max-width: 290px;
    margin: 0;
    padding: .55rem;
    word-break: break-word;
    background-color: rgba(170,170,170,.8);
    color: #fff
}

.box-flex {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    padding: 0;
    text-align: center;
    font-size: 24px;
    word-break: break-word;
    background-color: #333;
    color: #d9d9d9
}

.box-flex-top-right {
    justify-content: flex-end
}

.einruecken {
    padding-left: 310px
}

@media (max-width:500px) {
    .einruecken {
        padding-left: 0
    }
}

.pcontainer {
    max-width: 980px
}

.pcontainer .box {
    display: flex;
    flex-direction: table
}

.container .box .box-row {
    display: table-row
}

.container .box .box-cell {
    display: table-cell;
    border: 1px solid #000;
    width: 25%;
    padding: 10px
}

.pcontainer .box .box-cell.bild {
    background: green;
    color: #fff;
    text-align: justify;
    width: 300px
}

.pcontainer .box .box-cell.text {
    background: #90ee90;
    text-align: justify;
    width: 100% -350px
}

.flexed {
    width: 100%;
    display: flex;
    flex-direction: row;
    background: #ce4718
}

.flexedbild {
    width: 300px;
    height: 200px;
    background: #a7e398
}

.flexedtext {
    width: calc(100% - 350px);
    color: #fff;
    text-align: left;
    padding-top: 10px;
    padding-left: 10px
}

.flexedtext h1 {
    color: #fff
}

.flexedtext a {
    color: #fff
}

@media (max-width:700px) {
    .flexed {
        flex-direction: column
    }

    .flexedbild {
        width: 100%;
        height: 66%
    }

    .flexedtext {
        width: 100%;
        padding-bottom: 10px
    }
}

.PlanerLink:link,.PlanerLink:active,.PlanerLink:visited,.PlanerLink:hover {
    color: #ce4718;
    font-size: 14px;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 38px;
    text-decoration: underline
}

.LinkRot:link,.LinkRot:active,.LinkRot:visited {
    color: #ce4718;
    text-decoration: none
}

.LinkRot:hover {
    text-decoration: underline
}

.Artikeltext {
    font-size: 16px;
    line-height: 26px;
    max-width: 980px
}

.modulbreite {
    width: 95%;
    margin-left: 15px;
    margin-right: 15px
}

.ArtikelDetail {
    width: 100%;
    margin-left: 5px;
    margin-right: 5px
}

.FreizeitDetail {
    width: 100%;
    margin-left: 5px;
    margin-right: 5px
}

.VeranstaltungDetail {
    width: 100%;
    margin-left: 5px;
    margin-right: 5px
}

@media (max-width:700px) {
    .modulbreite {
        width: 95%;
        margin-left: 15px;
        margin-right: 15px
    }

    .ArtikelDetail {
        width: 95%;
        margin-left: 15px;
        margin-right: 15px
    }

    .FreizeitDetail {
        width: 95%;
        margin-left: 15px;
        margin-right: 15px
    }

    .VeranstaltungDetail {
        width: 95%;
        margin-left: 15px;
        margin-right: 15px
    }
}

.googlemap-iframe {
    height: 480px;
    width: 100%
}

.googlemap-button {
    background-color: #ce4718;
    color: #fff;
    padding: 10px 30px;
    font-size: 24px;
    border: 0;
    border-radius: 10px;
    cursor: pointer
}

.googlemap {
    background-image: url(https://www.hallo-bergstrasse.de/Portals/13/maps/maps_background.jpg)
}

.googlemapfreizeit {
    background-image: url(https://www.hallo-bergstrasse.de/Portals/13/maps/maps_freizeittipps.jpg)
}

.googlemap-hinweis2 {
    background-color: #fff;
    color: #000;
    padding: 30px 30px;
    margin-top: 60px;
    margin-left: 60px;
    margin-right: 60px;
    font-size: 14px;
    border: 0;
    border-radius: 0;
    position: absolute
}

.googlemap-hinweis {
    background-color: #fff;
    color: #000;
    padding: 20px 20px;
    margin-top: 35px;
    margin-left: 80px;
    margin-right: 80px;
    max-width: 980px;
    font-size: 12px;
    border: 0;
    border-radius: 0;
    line-height: 16px;
    position: absolute
}

@media (max-width:700px) {
    .googlemap-hinweis {
        background-color: #fff;
        color: #000;
        padding: 15px 15px;
        margin-top: 10px;
        margin-left: 10px;
        margin-right: 10px;
        font-size: 12px;
        border: 0;
        border-radius: 0;
        line-height: 14px;
        position: absolute
    }
}

.googlemap-placeholder {
    data-height: 480px;
    data-width: 100%;
    height: 480px;
    width: 100%;
    min-height: 480px
}

.bildfuss {
    font-size: 12px;
    line-height: 12px;
    font-style: italic
}

@font-face {
    font-family:inkfree;src:url(../font/inkfree.ttf)
}

.Normal {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400
}

H1 {
    color: #000;
    font-size: 32px;
    font-weight: 400;
    line-height: 40px;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 10px
}

H2,H3 {
    color: #000;
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 10px
}

H4 {
    color: #955251;
    font-size: 14px;
    line-height: 14px;
    padding-top: 10px
}

.Head {
    font-size: 14px
}

.DatumVonBis {
    margin-top: 2px;
    margin-bottom: 2px;
    color: #444;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700
}

.NA_Kategorie {
    margin-top: 2px;
    color: #ce4718;
    font-size: 16px;
    line-height: 24px
}

.NA_Headline {
    margin-top: 0;
    margin-bottom: 5px;
    padding-top: 0;
    padding-bottom: 5px;
    color: #006ee5;
    font-weight: 700;
    font-size: 16px;
    line-height: 30px
}

.NA_StartseiteTitel,.NA_startseitetitel {
    color: #444;
    font-size: 20px;
    line-height: 26px;
    margin-top: 5px;
    margin-bottom: 10px;
    padding: 0;
    font-weight: 500
}

.NA_StartseiteTeaser {
    color: #444;
    font-size: 16px;
    line-height: 24px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0
}

.VK_StartseiteDatumVonBis {
    margin-top: 2px;
    margin-bottom: 2px;
    color: #444;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700
}

.VK_StartseiteTitel {
    color: #e35e2f;
    font-size: 24px;
    line-height: 29px;
    margin-top: 5px;
    margin-bottom: 10px;
    padding: 0;
    font-weight: 500
}

.VK_StartseiteLocation {
    color: #444;
    font-size: 14px;
    line-height: 20px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0
}

.VK_StartseiteTeaser {
    color: #444;
    font-size: 16px;
    line-height: 24px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0
}

.TablePaneRahmenOben {
    border-top: 1px dotted;
    border-right: 0 solid;
    border-bottom: 0 solid;
    border-left: 0 solid;
    line-height: 20px
}

A.DetailLink:Link,A.DetailLink:visited,A.DetailLink:active {
    border-color: #ce4718;
    background-color: #cd4718;
    color: #fff;
    margin: 2px 0 2px 0;
    padding: 1px 5px 1px 5px;
    white-space: normal;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 4px
}

A.DetailLink:hover {
    background-color: #fff;
    color: #e35e2f;
    border: 1px solid
}

A.link_rot:Link,A.link_rot:visited,A.link_rot:active {
    border-color: #737916;
    background-color: #955251;
    color: #fff;
    margin: 2px 0 2px 8px;
    padding: 1px 5px 1px 5px;
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 4px
}

A.link_rot:hover {
    background-color: #fff;
    color: #955251;
    border: 1px solid
}

A.SuchenLink:Link,A.SuchenLink:visited,A.SuchenLink:active {
    border-color: #955251;
    background-color: #955251;
    color: #fff;
    margin: 2px 120px 6px 2px;
    padding: 15px 80px 15px 80px;
    position: relative;
    left: 5px;
    white-space: nowrap;
    text-decoration: none;
    border: 2px solid;
    border-radius: 4px
}

A.SuchenLink:hover {
    background-color: #eee;
    color: #955251;
    border: 2px solid
}

A.SuchenLinkLupe:Link,A.SuchenLinkLupe:visited,A.SuchenLinkLupe:active {
    border-color: #955251;
    background-color: #955251;
    color: #fff;
    margin: 2px 2px 2px 2px;
    padding: 2px 2px 2px 2px;
    position: relative;
    left: 5px;
    white-space: nowrap;
    text-decoration: none;
    border: 2px solid;
    border-radius: 4px
}

A.SuchenLinkLupe:hover {
    background-color: #eee;
    color: #955251;
    border: 2px solid
}

.SiteHeaderTab {
    background-image: url(Pix/PortalSiteBanner.jpg);
    width: 100%;
    height: 103px;
    background-repeat: no-repeat;
    border-right: #404040 0 solid;
    padding-left: 5px
}

.NormalWeinrot {
    color: #955251
}

.Farbe {
    color: #066
}

.FarbeDunkelblau {
    color: navy
}

.FarbeWeinrot {
    color: #955251
}

A.CommandButtonPA:active,A.CommandButtonPA:visited {
    text-decoration: none
}

.CommandbuttonPA {
    border-bottom: 3px solid #222;
    text-align: center;
    padding: 3px 15px
}

.CommandbuttonPA,A.CommandbuttonPA:active,A.CommandbuttonPA:link,A.CommandbuttonPA:visited {
    color: navy;
    background-Color: #eaeaea;
    border-left: 2px solid #ccc;
    border-top: 2px solid #ccc
}

.CommandbuttonPA,A.CommandbuttonPA:link {
    border-right: 3px solid #717171;
    text-decoration: none
}

A.CommandbuttonPA:link {
    font-weight: 700;
    border-bottom: 3px solid #717171
}

A.CommandbuttonPA:active,A.CommandbuttonPA:visited {
    border-right: 3px solid #000;
    border-bottom: 3px solid #000
}

A.CommandbuttonPA:visited {
    text-decoration: none
}

A.CommandButtonPA:hover {
    Color: #955251;
    background-Color: #efefef;
    border-left: 2px solid #717171;
    border-top: 2px solid #717171;
    border-right: 3px solid #ccc;
    border-bottom: 3px solid #ccc;
    text-decoration: underline
}

A:active,A:hover,A:link,A:visited {
    text-decoration: underline;
    color: #0071bb
}

.articleEntry {
    font-size: 16px;
    line-height: 26px;
    max-width: 900px
}

.newsreadmore A:hover {
    color: red;
    text-decoration: underline;
    background-color: #fff
}

.newsreadmore:link,.newsreadmore:active,.newsreadmore:visited,.newsreadmore:hover {
    font-weight: 400;
    text-decoration: underline;
    line-height: 12px;
    color: #955251
}

.newsreadmore A,.newsreadmore A:link,.newsreadmore A:active,.newsreadmore A:visited,.newsreadmore A:hover {
    color: red;
    font-weight: 400;
    line-height: 12px;
    text-decoration: underline;
    border: 0 solid #00f;
    display: inline
}

.newssummary150 {
    line-height: 150%;
    background-color: #fff
}

.newssummary9 {
    font-size: .8em
}

.newstitle {
    font-weight: 700;
    font-size: 10pt;
    text-decoration: none;
    color: #036
}

.newstitleabstand {
    font-size: 4px
}

.newstitlestartseite {
    font-weight: 700;
    text-decoration: none;
    color: #036
}

.viewnewsarticle {
    line-height: 150%
}

.TablePane {
    border-style: solid;
    border-color: red;
    border-width: 0;
    line-height: 20px
}

.TablePanealt {
    border-style: solid;
    border-color: red;
    border-width: 0;
    font-weight: 400;
    letter-spacing: 0;
    color: #000
}

.TablePaneGrau {
    border-style: solid;
    border-color: red;
    border-width: 0;
    background-color: #efebef;
    font-weight: 400;
    letter-spacing: 0;
    color: #000
}

.TablePaneGeschenke {
    border-style: solid;
    border-color: red;
    border-width: 0;
    font-weight: 400;
    letter-spacing: 0;
    color: #000
}

.ZeileGrau {
    background-color: #efebef
}

.ZelleMode {
    background-color: #e0e0e0
}

.ZelleGrau {
    background-color: #efebef;
    font-size: 9pt;
    vertical-align: top;
    text-align: center
}

.ZelleRot {
    background-color: #c00;
    font-size: 9pt;
    color: #fff;
    vertical-align: top;
    text-align: center
}

.ZelleImg {
    width: 180px;
    vertical-align: top;
    padding: 0;
    margin-right: 5px;
    margin-top: 10px;
    margin-bottom: 10px
}

.CellGruen {
    border-top: 1px solid #fff;
    border-bottom: 4px solid #fff;
    padding-left: 5px;
    padding-right: 5px;
    background-color: #c3e183
}

.CellBlau {
    border-top: 1px solid #fff;
    border-bottom: 4px solid #fff;
    padding-left: 5px;
    padding-right: 5px;
    background-color: #98c6e3
}

.CellOcker {
    border-top: 1px solid #fff;
    border-bottom: 4px solid #fff;
    padding-left: 5px;
    padding-right: 5px;
    background-color: #feae27
}

.Cellrot {
    border-top: 1px solid #fff;
    border-bottom: 4px solid #fff;
    padding-left: 5px;
    padding-right: 5px;
    background-color: #b92d1e
}

.Rahmen {
    border-top: thin solid #aaa;
    border-bottom: thin solid #aaa;
    border-left: 0 solid #aaa;
    border-right: 0 solid #aaa
}

.xshadetabs {
    padding: 3px 0;
    margin-left: 0;
    margin-top: 1px;
    margin-bottom: 0;
    font-weight: 700;
    color: brown;
    list-style-type: none;
    text-align: left
}

.xshadetabs li {
    display: inline;
    color: #036;
    text-decoration: none;
    margin: 0
}

.xshadetabs li a {
    text-decoration: none;
    position: relative;
    z-index: 1;
    padding: 3px 7px;
    margin-right: 3px;
    border: 1px solid #778;
    font-weight: 700;
    color: #036;
    background: #fff url(shade.gif)top left repeat-x
}

.shadetabs li a:visited {
    color: #036;
    text-decoration: none
}

.shadetabs li a:hover {
    color: brown;
    text-decoration: underline
}

.xshadetabs li a.selected {
    position: relative;
    background-image: url(shadeactive.gif);
    color: brown;
    top: 1px;
    text-decoration: none;
    border-bottom-color: #fff
}

.xshadetabs li a.selected:hover {
    text-decoration: none
}

.tabcontent {
    display: none;
    line-height: 16px
}

@media print {
    .tabcontent {
        display: block!important
    }
}

.Listing a:link,a.Listing:active,a.Listing:hover,a.Listing:link,a.Listing:visited,a:active,a:hover,a:visited {
    color: #000
}

.LinkBlau:link,.LinkBlau:active,.LinkBlau:visited,.LinkBlau:hover {
    color: #00c;
    font-weight: 400;
    text-decoration: none;
    border: 0 solid #00f;
    display: inline
}

.LinkBlau[href^=http]:after {
    content: " ↗";
    font-size: .9em;
    margin-left: 0;
    margin-right: .3em;
    vertical-align: top
}

.LinkBlau:hover {
    text-decoration: underline
}

.Link_PfeilBlau:active,.Link_PfeilBlau:hover,.Link_PfeilBlau:link,.Link_PfeilBlau:visited {
    color: #036;
    font-weight: 400;
    line-height: 20px;
    text-decoration: none;
    border: 0 solid #00f;
    padding-left: 8px;
    background: url(https://www.hallo-bergstrasse.de/Portals/13/images/pfeilrot.gif)no-repeat 0 3px
}

.Link_PfeilBlau:hover {
    text-decoration: underline
}

.LinkText:link,.LinkText:active,.LinkText:visited,.LinkText:hover {
    color: #00f;
    text-decoration: underline
}

#HOslideshowMode #slidesContainer .slide {
    margin: 0 auto;
    width: 540px;
    height: 883px
}

#HOslideshow,#HOslideshow #slidesContainer {
    margin: 0 auto;
    width: 640px;
    height: 683px;
    position: relative
}

#HOslideshow #slidesContainer {
    width: 560px;
    overflow: auto
}

#HOslideshow #slidesContainer .slide {
    margin: 0 auto;
    width: 540px;
    height: 683px
}

.control {
    display: block;
    width: 39px;
    height: 39px;
    text-indent: -10000px;
    position: absolute;
    cursor: pointer
}

#leftControl {
    top: 150px;
    left: 0;
    background: url(https://www.Hallo-Bergstrasse.de/portals/13/images/left.jpg)no-repeat 0 0
}

#rightControl {
    top: 150px;
    right: 0;
    background: url(https://www.Hallo-Bergstrasse.de/portals/13/images/right.jpg)no-repeat 0 0
}

#leftControlMode {
    top: 450px;
    left: 0;
    background: url(https://www.Hallo-Bergstrasse.de/portals/13/images/left.jpg)no-repeat 0 0
}

#rightControlMode {
    top: 450px;
    right: 0;
    background: url(https://www.Hallo-Bergstrasse.de/portals/13/images/right.jpg)no-repeat 0 0
}

#pageContainer {
    margin: 0 auto;
    width: 660px
}

#pageContainer h1 {
    display: block;
    width: 660px;
    height: 114px;
    text-indent: -10000px
}

.slide h2,.slide p {
    margin: 15px;
    text-align: center
}

.slide h2 {
    font: italic 16px Verdana,Geneva,sans-serif;
    color: #ccc;
    letter-spacing: -1px
}

.slide img {
    display: inline;
    text-align: center;
    border: 2px solid #ccc
}

div.slide a.advance-link {
    display: block;
    text-align: center
}

div.ListingFloatLeft {
    width: 48%;
    float: left;
    border-top: 0 dotted;
    padding-left: 0;
    padding-left: 5px;
    padding-top: 0;
    padding-bottom: 0;
    text-align: left
}

div.Listing {
    clear: left;
    border-top: 1px dotted;
    padding-left: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: left
}

@media screen and (max-width:768px) {
    div.Listing {
        padding-left: 15px;
        padding-right: 5px
    }
}

@media screen and (min-width:768px) {
    div.Listing {
        width: 100%
    }
}

div.ListingBild {
    float: left;
    width: 320px;
    max-width: 100%;
    padding-left: 0;
    padding-right: 10px;
    margin: 0 0 7px 0
}

.Listing .ListingBild {
    padding-right: 10px
}

.Listing a:link {
    text-decoration: none
}

div.ListingBild100 {
    float: left;
    width: 100%;
    border-top: 1px solid #fff;
    padding-left: 3px;
    padding-right: 0
}

img.ListingBildBreite {
    width: 100%;
    aspect-ratio: 3/2;
    padding-right: 10px
}

div.ListingText {
    width: auto;
    text-align: left;
    padding-left: 0;
    padding-right: 0
}

div.ListingTextRechts {
    float: left;
    width: 300px;
    text-align: left;
    padding-left: 4px;
    padding-right: 0
}

.clearfix:before,.clearfix:after {
    content: " ";
    display: table
}

.clearfix:after {
    clear: both
}

.clearfix {
    *zoom: 1
}

div.ListingBildUntertitel {
    font-size: 11px;
    line-height: 15px;
    margin-top: 2px;
    font-weight: 700;
    text-transform: uppercase
}

div.ListingBildText {
    float: left;
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    font-size: 16px;
    line-height: 22px
}

@media screen and (max-width:600px) {
    div.ListingBild {
        width: auto;
        float: none;
        padding-right: 0
    }

    div.ListingText {
        width: auto;
        float: none
    }

    div.ListingTextRechts {
        width: auto;
        float: none;
        padding-left: 10px;
        padding-right: 10px
    }

    img.ListingBildBreite {
        width: 100%
    }
}

div.Einleitung {
    float: left;
    width: 49%;
    border: 0 solid #000;
    font-weight: 700;
    padding-bottom: 20px
}

div.Werbung {
    float: right;
    width: 50%
}

div.Einleitung100 {
    float: left;
    width: 100%;
    border: 0 solid #000;
    font-weight: 700;
    padding-bottom: 20px
}

div.Werbung400 {
    float: right;
    width: 400px
}

@media screen and (max-width:450px) {
    div.Einleitung {
        width: 100%
    }

    div.Werbung {
        width: 100%
    }

    div.Werbung400 {
        width: 100%
    }
}

div.Veranstaltung {
    clear: left;
    border-top: 0 dotted;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 0;
    padding-right: 10px;
    text-align: left
}

@media screen and (max-width:768px) {
    div.Veranstaltung {
        padding-left: 15px;
        padding-right: 15px
    }
}

.Suchfeld select {
    background-color: #eac40a;
    border-radius: 10px;
    height: 30px;
    font-size: 14px
}

.Suchfeld .select select {
    background-color: #eac40a;
    border-radius: 10px;
    height: 30px;
    font-size: 14px
}

div.Suchfeld select {
    background-color: #eac40a;
    border-radius: 10px;
    height: 30px;
    font-size: 14px
}

div.SuchFeld {
    float: left;
    background-color: #ce4718;
    border-left: 0 solid #bbb;
    border-top: 0 solid #bbb;
    border-right: 0 solid #bbb;
    border-bottom: 0 solid #bbb;
    margin-top: 5px;
    margin-bottom: 0;
    padding-left: 10px;
    padding-top: 11px;
    padding-bottom: 11px;
    padding-right: 10px;
    text-align: left
}

.SuchFeld {
    float: left;
    background-color: #ce4718;
    border-left: 0 solid #bbb;
    border-top: 0 solid #bbb;
    border-right: 0 solid #bbb;
    border-bottom: 0 solid #bbb;
    margin-top: 5px;
    margin-bottom: 0;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
    text-align: left
}

.Suchfeld select {
    background-color: #eac40a;
    border-radius: 10px;
    height: 30px;
    font-size: 14px
}

option {
    margin: 5px 0 5px;
    padding: 10px 10px 10px;
    min-height: 30px
}

div.SuchButton {
    float: left;
    border-top: 0 dotted;
    margin-top: 5px;
    margin-bottom: 0;
    padding-left: 0;
    padding-top: 10px;
    padding-bottom: 0;
    padding-right: 0;
    text-align: left
}

div.SuchFeldFinden {
    float: left;
    background-color: #952c2c;
    border-left: 0 solid #bbb;
    border-top: 0 solid #bbb;
    border-right: 0 solid #bbb;
    border-bottom: 0 solid #bbb;
    margin-top: 5px;
    margin-bottom: 0;
    padding-left: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 5px;
    text-align: left
}

div.SuchButtonLupe {
    float: right;
    border-top: 0 dotted;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
    text-align: left
}

@media screen and (max-width:768px) {
    .RahmenUnten {
        margin-bottom: 15px
    }

    div.SuchFeld {
        width: auto;
        float: none;
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 2px;
        padding-bottom: 2px
    }

    div.SuchFeldFinden {
        width: auto;
        float: none;
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 2px;
        padding-bottom: 2px
    }

    div.Suchbutton {
        width: auto;
        float: none
    }
}

.wrapper {
    height: auto;
    margin: 0;
    padding: 0;
    text-align: left
}

.box {
    display: inline-block;
    width: 30%;
    height: 480px;
    min-width: 300px;
    padding-right: 30px;
    margin-right: 10px;
    background-color: #fff;
    float: left;
    margin: 0
}

@media screen and (max-width:850px) {
    .box {
        width: 48%;
        margin: 8px auto
    }
}

@media screen and (max-width:550px) {
    .box {
        width: 99%;
        height: auto;
        margin: 8px auto;
        padding: 0
    }

    H1 {
        font-size: 30px;
        line-height: 32px
    }

    .RahmenUnten {
        margin-bottom: 10px
    }

    .SuchFeld {
        padding-top: 0;
        padding-bottom: 0
    }

    .SuchFeldFinden {
        padding-top: 0;
        padding-bottom: 0
    }
}

.texteinblenden {
    margin-top: -60px;
    margin-left: 185px;
    font-weight: 700;
    color: #fff
}

.SubHead {
    font-size: 15px;
    margin-top: 10px;
    margin-bottom: 10px
}

.infobox li {
    text-align: left;
    line-height: 1.4em
}

.infobox.grau {
    background: #f0f0f0;
    color: #000
}

.infobox.gruen {
    background: #becc76;
    color: #fff
}

.infobox.braun {
    background: #56321a;
    color: #fff
}

.infobox.wide {
    width: 93%
}

.infobox.breit {
    margin: 10px 40px 20px 0;
    padding: 15px 1px 5px 5px;
    float: left;
    width: 100%
}

.infobox.left {
    margin: 10px 40px 20px 0;
    float: left
}

.infobox a:link {
    text-decoration: none
}

.infobox {
    display: block;
    padding: 15px 25px;
    box-shadow: 0 0 15px rgba(31,30,30,.25);
    border-radius: 3px;
    background: #fff;
    color: #fff;
    float: left;
    width: 40%;
    text-align: left
}

.infoboxfreizeit H2 {
    text-align: left;
    line-height: 1.4em;
    padding-left: 56px
}

.infoboxfreizeit ul {
    margin-left: 30px
}

.infoboxfreizeit li {
    text-align: left;
    list-style: none;
    padding: 5px 28px;
    background-image: url(icons/icon-haken.jpg);
    background-repeat: no-repeat;
    background-position-y: 7px;
    background-size: 20px
}

.infoboxfreizeit {
    display: block;
    margin: 10px 40px 20px 0;
    padding: 15px 1px 5px 5px;
    box-shadow: 0 0 15px rgba(31,30,30,.25);
    border-radius: 3px;
    background: #f0f0f0;
    color: #000;
    background-image: url(icons/icon-info.jpg);
    background-position-x: 5px;
    background-position-y: 12px;
    background-size: 40px;
    background-repeat: no-repeat;
    float: left;
    width: 100%;
    text-align: left
}

.infoboxfreizeit.historie {
    background-image: url(icons/icon-geschichte.jpg)
}

.infoboxmehr a:link {
    text-decoration: none;
    color: #000
}

.infoboxmehr H2 {
    text-align: left;
    line-height: 1.4em;
    padding-left: 56px
}

.infoboxmehr ul {
    margin-left: 30px;
    margin-right: 20px
}

.infoboxmehr li {
    text-align: left;
    list-style: none;
    padding: 5px 28px;
    background-image: url(icons/icon-linkpfeil.jpg);
    background-repeat: no-repeat;
    background-position-y: 7px;
    background-size: 20px
}

.infoboxmehr li.ohne {
    background-size: 1px
}

.infoboxmehr {
    display: block;
    margin: 10px 40px 20px 0;
    padding: 15px 1px 5px 5px;
    box-shadow: 0 0 15px rgba(31,30,30,.25);
    border: #bbb;
    border-style: solid;
    border-width: 0;
    border-radius: 3px;
    background: #fff;
    background-image: url(icons/icon-tipp.jpg);
    background-position-x: 5px;
    background-position-y: 12px;
    background-size: 40px;
    background-repeat: no-repeat;
    color: #000;
    float: left;
    width: 100%;
    text-align: left
}

.zentriert {
    text-align: center;
    font-size: 12px;
    font-style: italic
}

@media screen and (max-width:850px) {
    .infobox.left {
        width: 85%
    }
}

img {
    max-width: 100%;
    height: auto
}

.xflexbox img {
    max-width: auto;
    width: 300px;
    height: 200p;
    display: block;
    margin-left: auto;
    margin-left: auto
}
/* Beginn Flexbox */
/* 1. GLOBALE BILD-EINSTELLUNGEN */
.ListingBild img {
    width: 100%;
    height: auto;
    aspect-ratio: 3/2;
    object-fit: cover;
    display: block;
}

/* 2. GEMEINSAME FLEXBOX-BASIS */
.flexbox, .flexboxlisting {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Erzeugt saubere Abstände ohne Margin-Rechnerei */
    justify-content: center;
    margin: 0 auto;
    max-width: 100%;
}

.fb {
    border: 1px solid #bbb;
    border-radius: 5px;
    overflow: hidden; /* Damit das Bild oben nicht über die Rundung ragt */
    margin-bottom: 20px;
    text-decoration: none;
    background: #fff;
    box-sizing: border-box;
}

.flexbox .fb {
    box-shadow: 4px 4px rgba(0,0,0,0.15);
}

/* 3. RESPONSIVE BREITEN (Mobile First) */

/* Smartphone: 1 Spalte */
.flexbox .fb, .flexboxlisting .fb {
    width: 100%;
    max-width: 400px; 
}

/* Tablet (ab 700px): 2 Spalten */
@media (min-width: 700px) {
    .flexbox, .flexboxlisting { max-width: 800px; }
    .flexbox .fb, .flexboxlisting .fb { 
        width: calc(50% - 10px); 
    }
}

/* Desktop (ab 1000px): 3 Spalten */
@media (min-width: 1000px) {
    .flexbox { max-width: 980px; }
    .flexboxlisting { max-width: 900px; }
    
    .flexbox .fb { width: calc(33.33% - 14px); }
    .flexboxlisting .fb { width: calc(33.33% - 14px); }
}

/* 4. TYPOGRAFIE */
.flexbox h2, .flexboxlisting h2 {
    width: 100%;
    text-align: center;
    letter-spacing: 2px;
    padding: 10px;
}

.flexbox h2 {
    color: #000;
    font-size: 28px;
}

.flexboxlisting h2 {
    color: #444;
    font-size: 22px;
    text-decoration: underline;
    text-decoration-color: #aaa;
}
/* Ende Flexbox */

.oberunterstriche {
    position: relative;
    width: 100%;
    border: 0 solid #bbb;
    color: :#000;
    font-size: 22px;
    font-style: italic;
    line-height: 40px;
    letter-spacing: .5px;
    text-align: center;
    margin-top: 25px;
    margin-bottom: 20px;
    padding-bottom: 5px;
    text-decoration: none;
    text-decoration-color: #aaa;
    text-underline-offset: 4px
}

.oberunterstriche::before {
    position: absolute;
    left: calc(50% - 125px);
    content: "";
    border: 1px solid;
    border-width: 1px 0 0 0;
    margin-top: -3px;
    width: 250px
}

.oberunterstriche::after {
    position: absolute;
    left: calc(50% - 125px);
    content: "";
    border: 1px solid;
    border-width: 0 0 1px 0;
    padding-top: 40px;
    width: 250px
}

.parent {
    position: relative;
    max-width: 980px;
    margin: 0 auto
}

.parent .text {
    position: relative;
    background: #003200;
    background: rgba(0,50,0,.5);
    color: #fff;
    width: 60%;
    padding: 15px;
    margin: 0 auto;
    margin-top: -100px;
    margin-bottom: 60px
}

.parent .text.weiss {
    background: rgb(255,255,255,.8);
    color: #000;
    width: 75%;
    padding-top: 10px;
    margin-top: -55px;
    margin-bottom: 20px
}

@media (max-width:500px) {
    .parent .text.weiss {
        background: rgb(255,255,255,.85);
        margin-top: -55px;
        width: 80%
    }
}

.parent .text.ocker {
    background: rgba(249,249,249,.9);
    color: #000;
    width: 400px;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 5px;
    margin-top: -45px;
    margin-bottom: 35px
}

.parent .text.maps {
    background: rgba(249,249,249,.9);
    color: #000;
    width: 400px;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 5px;
    font-size: 12px;
    line-height: 13px;
    margin-top: -200px;
    margin-bottom: 35px
}

.parent .text.ocker h1 {
    font-size: 28px
}

.parent .text.ocker h2 {
    font-size: 24px;
    line-height: 24px;
    letter-spacing: .07em
}

@media (max-width:500px) {
    .parent .text.ocker {
        width: 65%;
        padding-top: 10px;
        padding-bottom: 0;
        margin-top: -40px;
        margin-bottom: 5px
    }
}

@media (max-width:500px) {
    .parent .text.maps {
        width: 86%;
        padding-top: 10px;
        padding-bottom: 0;
        margin-top: -100px;
        margin-bottom: 5px
    }
}

.parentveranstaltung {
    position: relative;
    max-width: 980px;
    margin: 0 auto
}

.parentveranstaltung .textart {
    position: relative;
    background: #003200;
    background: rgba(0,50,0,.5);
    color: #fff;
    padding: 5px;
    margin-top: -180px;
    margin-left: 200px;
    margin-right: 10px;
    margin-bottom: 60px;
    font-size: 24px;
    line-height: 24px;
    letter-spacing: .07em
}

.dropdown {
    position: relative;
    display: inline-block
}

.dropdownflexbox {
    display: flex;
    align-items: center
}

.dropbtn {
    background-color: #fff;
    color: #000;
    padding: 16px;
    font-size: 16px;
    border: 0;
    cursor: pointer
}

.dropdown-content {
    display: none;
    min-width: 160px
}

.dropdown-content ul {
    list-style-type: square;
    margin-left: 20px;
    padding: 0
}

.dropdown-content a:hover {
    color: #000;
    text-decoration: underline
}

.dropdown-content a {
    color: #000;
    padding: 1px 1px;
    text-decoration: none;
    display: block
}

.dropdown-content ul li a {
    color: #000;
    padding: 1px 1px;
    text-decoration: none;
    display: block
}

#dropdown-toggle:checked~.dropdown-content {
    display: block
}

#dropdown-toggle:checked~.dropdownflexbox .dropbtn::after {
    content: "Verbergen"
}

#dropdown-toggle:checked~.dropbtn {
    content: "Zuklappen!"
}

.dropbtn::after {
    content: "Anzeigen"
}

.site-header .site-branding .site-description {
    font-size: 1em;
    margin-top: 0;
    color: #767676
}

.site-header .site-branding {
    margin: 92px 0 41px 0;
    text-align: center;
    display: block;
    clear: both
}

.site-header .site-branding .site-title {
    font-family: "inkfree",sans-serif;
    font-size: 2.9em;
    font-weight: 400;
    letter-spacing: 1px;
    margin: 0;
    color: #1c1e1f;
    display: inline-block
}

.my-dropdown {
    border: 1px solid #ccc;
    padding: 5px;
    background-color: #f7f7f7;
    border-radius: 10px;
    font-size: 17px;
    width: 195px
}

.my-dropdown li {
    font-size: 17px
}

.box-caption {
    position: absolute;
    max-width: 290px;
    margin: 0;
    padding: .55rem;
    word-break: break-word;
    background-color: rgba(170,170,170,.8);
    color: #fff
}

.box-flex {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    padding: 0;
    text-align: center;
    font-size: 24px;
    word-break: break-word;
    background-color: #333;
    color: #d9d9d9
}

.box-flex-top-right {
    justify-content: flex-end
}

.einruecken {
    padding-left: 310px
}

@media (max-width:500px) {
    .einruecken {
        padding-left: 0
    }
}

.pcontainer {
    max-width: 980px
}

.pcontainer .box {
    display: flex;
    flex-direction: table
}

.container .box .box-row {
    display: table-row
}

.container .box .box-cell {
    display: table-cell;
    border: 1px solid #000;
    width: 25%;
    padding: 10px
}

.pcontainer .box .box-cell.bild {
    background: green;
    color: #fff;
    text-align: justify;
    width: 300px
}

.pcontainer .box .box-cell.text {
    background: #90ee90;
    text-align: justify;
    width: 100% -350px
}

.flexed {
    width: 100%;
    display: flex;
    flex-direction: row;
    background: #ce4718
}

.flexedbild {
    width: 300px;
    height: 200px;
    background: #a7e398
}

.flexedtext {
    width: calc(100% - 350px);
    color: #fff;
    text-align: left;
    padding-top: 10px;
    padding-left: 10px
}

.flexedtext h1 {
    color: #fff
}

.flexedtext a {
    color: #fff
}

@media (max-width:700px) {
    .flexed {
        flex-direction: column
    }

    .flexedbild {
        width: 100%;
        height: 66%
    }

    .flexedtext {
        width: 100%;
        padding-bottom: 10px
    }
}

.PlanerLink:link,.PlanerLink:active,.PlanerLink:visited,.PlanerLink:hover {
    color: #ce4718;
    font-size: 14px;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 38px;
    text-decoration: underline
}

.LinkRot:link,.LinkRot:active,.LinkRot:visited {
    color: #ce4718;
    text-decoration: none
}

.LinkRot:hover {
    text-decoration: underline
}

.Artikeltext {
    font-size: 16px;
    line-height: 26px;
    max-width: 980px
}

.modulbreite {
    width: 95%;
    margin-left: 15px;
    margin-right: 15px
}

.ArtikelDetail {
    width: 100%;
    margin-left: 5px;
    margin-right: 5px
}

.FreizeitDetail {
    width: 100%;
    margin-left: 5px;
    margin-right: 5px
}

.VeranstaltungDetail {
    width: 100%;
    margin-left: 5px;
    margin-right: 5px
}

@media (max-width:700px) {
    .modulbreite {
        width: 95%;
        margin-left: 15px;
        margin-right: 15px
    }

    .ArtikelDetail {
        width: 95%;
        margin-left: 15px;
        margin-right: 15px
    }

    .FreizeitDetail {
        width: 95%;
        margin-left: 15px;
        margin-right: 15px
    }

    .VeranstaltungDetail {
        width: 95%;
        margin-left: 15px;
        margin-right: 15px
    }
}

.googlemap-iframe {
    height: 480px;
    width: 100%
}

.googlemap-button {
    background-color: #ce4718;
    color: #fff;
    padding: 10px 30px;
    font-size: 24px;
    border: 0;
    border-radius: 10px;
    cursor: pointer
}

.googlemap {
    background-image: url(https://www.hallo-bergstrasse.de/Portals/13/maps/maps_background.jpg)
}

.googlemapfreizeit {
    background-image: url(https://www.hallo-bergstrasse.de/Portals/13/maps/maps_freizeittipps.jpg)
}

.googlemap-hinweis2 {
    background-color: #fff;
    color: #000;
    padding: 30px 30px;
    margin-top: 60px;
    margin-left: 60px;
    margin-right: 60px;
    font-size: 14px;
    border: 0;
    border-radius: 0;
    position: absolute
}

.googlemap-hinweis {
    background-color: #fff;
    color: #000;
    padding: 20px 20px;
    margin-top: 35px;
    margin-left: 80px;
    margin-right: 80px;
    max-width: 980px;
    font-size: 12px;
    border: 0;
    border-radius: 0;
    line-height: 16px;
    position: absolute
}

@media (max-width:700px) {
    .googlemap-hinweis {
        background-color: #fff;
        color: #000;
        padding: 15px 15px;
        margin-top: 10px;
        margin-left: 10px;
        margin-right: 10px;
        font-size: 12px;
        border: 0;
        border-radius: 0;
        line-height: 14px;
        position: absolute
    }
}

.googlemap-placeholder {
    data-height: 480px;
    data-width: 100%;
    height: 480px;
    width: 100%;
    min-height: 480px
}

.bildfuss {
    font-size: 12px;
    line-height: 12px;
    font-style: italic
}