/* 06.11.2023 14:42 */
@font-face { font-family: inkfree; 
			 src: url('../font/inkfree.ttf'); } 


/* text style used for most text rendered by modules */
.Normal
{
font-size: 16px; 
line-height: 24px; 
font-weight: normal;
}


/* GENERIC */
H1  {color:  #000000;
font-size: 32px; 
font-weight: normal;
line-height: 40px;
padding-top: 0px;
padding-bottom: 0px;
margin-top: 0px;
margin-bottom: 10px;

}

H2  {color:  #000000;
font-size: 24px; 
font-weight: normal;
line-height: 32px;
padding-top: 0px;
padding-bottom: 0px;
margin-top: 0px;
margin-bottom: 10px;
}

H3  {color:  #000000;
font-size: 24px; 
font-weight: normal;
line-height: 32px;
margin-top: 0px;
margin-bottom: 10px;
padding-top: 0px;
padding-bottom: 0px;
}

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

H5, DT  {
}

H6  {
}


/* GENERAL */
/* style for module titles */
.Head   {
font-size: 14px; 
}

/* style of item titles on edit and admin pages */
.SubHead    {
}

/* module title style used instead of Head for compact rendering by QuickLinks and Signin modules */
.SubSubHead {
}


.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:0px;
margin-bottom:5px;
padding-top: 0px; 
padding-bottom: 5px;
color: #007bff;
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: 0px;
font-weight: 500;
}
.NA_StartseiteTeaser
{
color: #444;
font-size: 16px; 
line-height:24px;
margin-top:0px;
margin-bottom:0px;
padding: 0px;
}

.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: 0px;
font-weight: 500;
}

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

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





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


A.DetailLink:Link, A.DetailLink:visited, A.DetailLink:active {
    border-color: #CE4718;
    background-color: #CD4718;
    color: #FFF;
    margin: 2px 0px 2px 0px;
    padding: 1px 5px 1px 5px;
    white-space: normal;
    text-decoration: none;
    border: 1px solid transparent;

    border-radius: 4px;}

A.DetailLink:hover {
   
    background-color: #ffffff;
    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 0px 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: #ffffff;
    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: #eeeeee;
    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: #eeeeee;
    color: #955251;
    border: 2px solid;
  }




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

/* text style for the selected tab */
.SelectedTab {
}

/* hyperlink style for the selected tab */
A.SelectedTab:link {
}

A.SelectedTab:visited  {
}

A.SelectedTab:active   {
}

A.SelectedTab:hover    {
}

/* text style for the unselected tabs */
.OtherTabs {
}
    
/* hyperlink style for the unselected tabs */
A.OtherTabs:link {
}

A.OtherTabs:visited  {
}

A.OtherTabs:active   {
}

A.OtherTabs:hover    {
}





/* text style used for textboxes in the admin and edit pages, for Nav compatibility */
.NormalTextBox
{
}

.NormalRed
{
}

.NormalBold
{
}

.NormalWeinrot {
color:#955251}

.FarbeDunkelblau {color:#000080}
.FarbeWeinrot {color:#955251}



/* text style for buttons and link buttons used in the portal admin pages */
.CommandButton     {
}
    
/* hyperlink style for buttons and link buttons used in the portal admin pages */
A.CommandButton:link {
}

A.CommandButton:visited  {
}

A.CommandButton:active   {
}

A.CommandButton:hover    {
}



A.CommandButtonPA:visited  { text-decoration:    none;
}

A.CommandButtonPA:active   { text-decoration:    none;
}


.CommandbuttonPA
      {

      color: #000080;
      background-Color: #eaeaea;
      border-left: 2px solid #CCCCCC;
      border-top: 2px solid #CCCCCC;
      border-right: 3px solid #717171;
      border-bottom: 3px solid #222222;
      text-decoration: none;
      text-align: center;
padding-left: 15px;
padding-right: 15px;
padding-top: 3px;
padding-bottom: 3px;
      }

A.CommandbuttonPA:link
      {
   
      color: #000080;
      font-weight: bold;
      background-Color: #eaeaea;
      border-left: 2px solid #CCCCCC;
      border-top: 2px solid #CCCCCC;
      border-right: 3px solid #717171;
      border-bottom: 3px solid #717171;
      text-decoration: none;
      }

A.CommandbuttonPA:active
      {
    
      color: #000080;
      background-Color: #eaeaea;
      border-left: 2px solid #CCCCCC;
      border-top: 2px solid #CCCCCC;
      border-right: 3px solid #000000;
      border-bottom: 3px solid #000000;
      }

A.CommandbuttonPA:visited
      {
   
      color: #000080;
      background-Color: #eaeaea;
      border-left: 2px solid #CCCCCC;
      border-top: 2px solid #CCCCCC;
      border-right: 3px solid #000000;
      border-bottom: 3px solid #000000;
      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 #cccccc;
      border-bottom: 3px solid #cccccc;
      text-decoration: underline;
      }

   

    


TFOOT, THEAD    {
}

TH  {
}


A:link  {
   
  
    text-decoration:    underline;
    color:  #0071bb;
}

A:visited   {

    text-decoration:    underline;
    color:  #0071bb;
}

A:active    {

    text-decoration:    underline;
    color:  #0071bb;
}

A:hover {

    text-decoration:    underline;
    color:  #0071bb;
}
SMALL   {
}

BIG {
}

BLOCKQUOTE, PRE {
}


UL LI   {
}

UL LI LI    {
}

UL LI LI LI {
}

OL LI   {
}

OL OL LI    {
}

OL OL OL LI {
}

HR {
}


/* ================================
    CSS STYLES FOR DotNetNuke Hallo-Bergstrasse
   ================================
*/   

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



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

.newsreadmore:link, .newsreadmore:active, .newsreadmore:visited,.newsreadmore:hover
{
	font-weight:normal;
	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:normal;
line-height:12px;
text-decoration:underline;
border:0pt solid #0000ff;
display:inline;
}

.newssummary
{}

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

.newssummary9
{
font-size: 0.8em; 
}

.newssummarystartseite
{
}

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

.newstitleabstand
{
font-size: 4px; 
}

.newstitlestartseite
{
	font-weight:bold;
        text-decoration: none;
	color:#003366;	
}

.viewnewsarticle
{
   line-height: 150%;
}

.Panes
{

}

/* PAGE BACKGROUND */
/* background color for the header at the top of the page  */
.HeadBg {
}

/* background color for the content part of the pages */
.Body
{
 
}

/* background/border colors for the selected tab */
.TabBg {
}

.LeftPane  {  white-space:nowrap; 
}

.ContentPane  { 
}

.RightPane  { 
}


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


.TablePanealt {
        border-style: solid;
	border-color: red;
	border-width: 0px;
     
	font-weight: normal;
        letter-spacing:0pt;
	color: #000000;        
}
.TablePaneGrau {
        border-style: solid;
	border-color: red;
	border-width: 0px;
        background-color: #EFEBEF;
    	
	font-weight: normal;
        letter-spacing:0pt;
	color: #000000;
        
}
.TablePaneGeschenke {
        border-style: solid;
	border-color: red;
	border-width: 0px;
   /*     cellspacing: 50px; */
      	
	font-weight: normal;
        letter-spacing:0pt;
	color: #000000;
       
}
.ZeileGrau {
        background-color: #EFEBEF;
	   
}
.ZelleMode {
        background-color: #e0e0e0;
	   
}
.ZelleGrau {
        background-color: #EFEBEF;
	font-size: 9pt;
        vertical-align:top;
        text-align: center;
	        
}
.ZelleRot {
        background-color: #CC0000; 
	font-size: 9pt;
        color: #FFFFFF;
        
vertical-align:top;
	    
text-align: center;    
}
.ZelleImg {
        width: 180px;
        vertical-align:top;
padding: 0;
margin-right: 5px;
margin-top: 10px;
margin-bottom: 10px;
	    
}



/* MODULE-SPECIFIC */
/* text style for reading messages in Discussion */    
.Message    {
}   

/* style of item titles by Announcements and events */
.ItemTitle    {
}

/* Menu-Styles */
/* Module Title Menu */
.ModuleTitle_MenuContainer {
}

.ModuleTitle_MenuBar {
}

.ModuleTitle_MenuItem {
}

.ModuleTitle_MenuIcon {
}

.ModuleTitle_SubMenu {
}

.ModuleTitle_MenuBreak {
}

.ModuleTitle_MenuItemSel {
}

.ModuleTitle_MenuArrow {
}

.ModuleTitle_RootMenuArrow {
}





.CellGruen
{
  border-top: 1px solid #ffffff; 
  border-bottom: 4px solid #ffffff;   
  padding-left: 5px;
  padding-right: 5px;
/*  background-color: #9acd32; */
 
  background-color: #C3E183; 
}
.CellBlau
{
  border-top: 1px solid #ffffff; 
  border-bottom: 4px solid #ffffff;   
  padding-left: 5px;
  padding-right: 5px;
  background-color: #98C6E3; 
}
.CellOcker
{
  border-top: 1px solid #ffffff; 
  border-bottom: 4px solid #ffffff;   
  padding-left: 5px;
  padding-right: 5px;
  background-color: #FEAE27; 
}
.Cellrot
{
  border-top: 1px solid #ffffff; 
  border-bottom: 4px solid #ffffff;   
  padding-left: 5px;
  padding-right: 5px;
  background-color: #B92D1E; 
}

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


/* ######### CSS for Shade Tabs. Remove if not using ######### */

.xshadetabs{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font-weight: bold;
color: #A52A2A;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.xshadetabs li{
display: inline;
color: #003366;
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:bold;
color: #003366;
background: white url(shade.gif) top left repeat-x;
}


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


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

.xshadetabs li a.selected{ /*selected main tab style */
position: relative;
background-image: url(shadeactive.gif);
color: #A52A2A;
top: 1px;
text-decoration: none;
border-bottom-color: white;
}


.xshadetabs li a.selected:hover{ /*selected main tab style */
text-decoration: none;
}

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

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


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

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


.LinkBlau:link, .LinkBlau:active, .LinkBlau:visited, .LinkBlau:hover 
{color: #0000cc;
font-weight:normal;
text-decoration:none;
border:0pt solid #0000ff;
display:inline;
}

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

.LinkBlau:hover 
{text-decoration:underline;}

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


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




/* Formatierung FotoShow
----------------------------------------------------------------- */
----------------------------------------------------------------- */
#HOslideshowMode {
  margin:0 auto;
  width:560px;
  height:883px;
  position:relative;
}
#HOslideshowMode #slidesContainer {
  margin:0 auto;
  width:560px;
  height:883px;
  overflow:auto; /* allow scrollbar */
  position:relative;
}
#HOslideshowMode #slidesContainer .slide {
  margin:0 auto;
  width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
  height:883px;
}


#HOslideshow {
  margin:0 auto;
  width:640px;
  height:683px;
  position:relative;
}
#HOslideshow #slidesContainer {
  margin:0 auto;
  width:560px;
  height:683px;
  overflow:auto; /* allow scrollbar */
  position:relative;
}
#HOslideshow #slidesContainer .slide {
  margin:0 auto;
  width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
  height:683px;
}

/** 
 * Slideshow controls style rules.
 */
.control {
  display:block;
  width:39px;
  height:39px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#leftControl {
  top:150px;
  left:0;
  background:transparent url(https://www.Hallo-Bergstrasse.de/portals/13/images/left.jpg) no-repeat 0 0;
}
#rightControl {
  top:150px;
  right:0;
  background:transparent url(https://www.Hallo-Bergstrasse.de/portals/13/images/right.jpg) no-repeat 0 0;
}


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

/** 
 * Style rules for Demo page
 */

#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: 0px dotted;
    padding-left:0px;
    padding-left:5px;
    padding-top:0px;
    padding-bottom:0px;
    text-align:left;
} 


div.Listing {
    /*width:100%;*/
    clear:left;
    border-top: 1px dotted;
    padding-left:0px;
    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:0px;
    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 white;
    padding-left:3px;
    padding-right:0px;
} 



img.ListingBildBreite{
       width: 100%;
       aspect-ratio: 3/2;
       padding-right:10px;
   } 
div.ListingText {
    width:auto;
    text-align:left;
    padding-left:0px;
    padding-right:0px;
   } 
div.ListingTextRechts {
    float:left;
    width:300px;
    text-align:left;
    padding-left:4px;
    padding-right:0px;
   } 

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {
    *zoom: 1;
}

div.ListingBildUntertitel {
   
font-size:11px;
line-height:15px;
margin-top: 2px;
font-weight:bold;
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: 0px; } 
   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: 0px solid black;
    font-weight:bold;
    padding-bottom:20px;
} 
div.Werbung {
    float:right;
    width:50%;
   } 

div.Einleitung100 {
    float:left;
    width:100%;
    border: 0px solid black;
    font-weight:bold;
    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: 0px dotted;
    padding-left:10px;
    padding-top:10px;
    padding-bottom:0px;
    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: 0px solid #BBB;
    border-top: 0px solid #BBB;
    border-right: 0px solid #BBB;
    border-bottom: 0px solid #BBB;
    margin-top:5px;
    margin-bottom:0px;
    padding-left:10px;
    padding-top:11px;
    padding-bottom:11px;
    padding-right:10px;
    text-align:left;
} 

.SuchFeld {
   float:left;
    background-color: #CE4718;
    border-left: 0px solid #BBB;
    border-top: 0px solid #BBB;
    border-right: 0px solid #BBB;
    border-bottom: 0px solid #BBB;
    margin-top:5px;
    margin-bottom:0px;
    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: 0px dotted;
    margin-top:5px;
    margin-bottom:0px;
    padding-left:0px;
    padding-top:10px;
    padding-bottom:0px;
    padding-right:0px;
    text-align:left;
} 
div.SuchFeldFinden {
    float: left;
    background-color: #952c2c;
    border-left: 0px solid #BBB;
    border-top: 0px solid #BBB;
    border-right: 0px solid #BBB;
    border-bottom: 0px solid #BBB;
    margin-top: 5px;
    margin-bottom: 0px;
    padding-left: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 5px;
    text-align: left;
}



div.SuchButtonLupe {
    float:right;
    border-top: 0px dotted;
    margin-top:0px;
    margin-bottom:0px;
    padding-left:0px;
    padding-top:0px;
    padding-bottom:0px;
    padding-right:0px;
    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: 0px;
    padding: 0px;
    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: 0px;}

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

.RahmenUnten {
       margin-bottom:10px;
  
} 

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

}

.texteinblenden {
  margin-top: -60px;  /* Text hinaufschieben */
  margin-left: 185px;   /* Text horiz. ausrichten */
  font-weight: bold;   /* Text formatieren */
  color: #fff;               /* Text Farbe */
}

.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 {
  /*list-style-image: url("icons/icon-haken.jpg");*/
   
  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: left center; */
            background-position-y: 7px;
            background-size: 20px;
  
}

.infoboxfreizeit.breit {    }

.infoboxfreizeit.grau {   }


.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 {
  /*list-style-image: url("icons/icon-haken.jpg");*/
     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: right;*/
    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: 0px;
    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;
   margin-left: 0;
   margin-right: 0;
}
@media screen and (max-width: 768px) {
    .ListingBild img {width: 100%; height: auto; }
}


/* Formatierung f�r ListungNewsArtikel auf Einzelseiten */

.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 #bbbbbb;
        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 #bbbbbb;
        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: 0px solid white;
    padding-left: 0px;
    padding-right: 0px;
}

.flexboxlisting h2 {
    width: 100%;
    border: 0px solid #bbbbbb;
    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: 0px;
    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: 0px solid #bbbbbb;
    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: 0px solid #bbbbbb;
    color: :#000;
    font-size: 22px;
    font-style: italic;
    line-height: 40px;
    letter-spacing: 0.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 0px 0px 0px;
   /* padding-top: 50px; */
    /* padding-bottom: 30px; */
    margin-top: -3px;
    /* margin-bottom: 20px; */
    width: 250px;
}
.oberunterstriche::after
{ 
    position: absolute;
    left: calc(50% - 125px);
    content: "";
    border: 1px solid;
    border-width: 0px 0px 1px 0px;
    padding-top: 40px;
   /* padding-bottom: 30px; */
   /* margin-top: -5px; */
  /*  margin-bottom: 20px; */
    width: 250px;
}

 .parent {
      position: relative;
      max-width: 980px;
      margin: 0 auto;
      }
     
 .parent .text {
     position: relative;
     background: rgb(0, 50, 0); /* Fallback color */
     background: rgba(0, 50, 0, 0.5); /* Black background with 0.5 opacity */
     color: #ffffff;
     width: 60%;
     padding: 15px;
     margin: 0 auto;
     margin-top:-100px;
     margin-bottom: 60px;
     }

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


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

.parent .text.ocker{
     /*background: rgba(202, 162,39, 0.9);*/ /* Black background with 0.8 opacity */
     background:rgba(249,249,249,0.9);
     color: black;
     width: 400px;
     text-align:center;
     padding-top: 15px;
     padding-bottom: 5px;
     margin-top:-45px;
     margin-bottom: 35px;
     
          }
         .parent .text.maps{
     /*background: rgba(202, 162,39, 0.9);*/ /* Black background with 0.8 opacity */
     background:rgba(249,249,249,0.9);
     color: black;
     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{
   /*color:#fff;*/
    font-size:28px;
     }

.parent .text.ocker h2{
    /*color:#fff;*/
    font-size:24px;
    line-height: 24px; 
    letter-spacing: 0.07em;
    }
@media (max-width: 500px) {
.parent .text.ocker {
      width: 65%; 
         padding-top: 10px;
     padding-bottom: 0px;
     margin-top:-40px;
     margin-bottom: 5px;
    }
    }
@media (max-width: 500px) {
.parent .text.maps {
      width: 86%; 
         padding-top: 10px;
     padding-bottom: 0px;
     margin-top:-100px;
     margin-bottom: 5px;
    }
    }
.parentveranstaltung {
      position: relative;
      max-width: 980px;
      margin: 0 auto;
      }

 
 .parentveranstaltung .textart {
     position: relative;
     background: rgb(0, 50, 0); /* Fallback color */
     background: rgba(0, 50, 0, 0.5); /* Black background with 0.5 opacity */
     color: #ffffff;
     padding: 5px;
     margin-top:-180px;
     margin-left:200px;
     margin-right:10px;
     margin-bottom: 60px;
     font-size:24px;
    line-height: 24px; 
    letter-spacing: 0.07em;
     }


.dropdown{
  position: relative;
  display: inline-block;
}
/* Style the flexbox */
.dropdownflexbox{
  display: flex;
  align-items: center;
}
/* Style the dropdown button */
.dropbtn{
  background-color: white;
  color: black;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
/* Style the dropdown content (hidden by default) */
.dropdown-content{
  display: none;
 /* position: absolute; */
  /*background-color: #f1f1f1; */
  min-width: 160px;
  /*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2) */;
}
/* Style the list inside the dropdown */
.dropdown-content ul{
  list-style-type: square; 
  margin-left: 20px;
  padding: 0;
}
/* Style the links inside the list */
.dropdown-content  a:hover{
  color: black;
  text-decoration: underline; 
  }
  .dropdown-content a{
  color: black;
  padding: 1px 1px;
  text-decoration: none; 
  display: block;
}
.dropdown-content ul li a{
  color: black;
  padding: 1px 1px;
  text-decoration: none; 
  display: block;
}
/* Show the dropdown menu when the checkbox is checked */
#dropdown-toggle:checked ~ .dropdown-content{
  display: block;
}
/* Change the button text when the checkbox is checked */
#dropdown-toggle:checked ~ .dropdownflexbox .dropbtn::after{
  content: "Verbergen";
}
#dropdown-toggle:checked ~ .dropbtn{
  content: "Zuklappen!";
}
/* Add the original button text as a pseudo-element */
.dropbtn::after{
  content: "Anzeigen";
}
.site-header .site-branding .site-description {
    font-size: 1em;
    margin-top: 0em;
    color: rgb( 118, 118, 118 );
}


.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: 0px;
    padding: 0.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.0rem;
    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: 0px;
  }
 }
 


.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 black;
            width:25%;
            padding:10px;
  }
        .pcontainer .box .box-cell.bild {
            background:green;
            color:white;
            text-align:justify;
            width:300px;
         }
        .pcontainer .box .box-cell.text {
            background:lightgreen;
            text-align:justify;
            width:100%-350px;
        }



.flexed { 
     width: 100%; 
     display: flex; 
    flex-direction: row;
     background:#CE4718; /*#E35E2F;#5b9bd5;*#4d2673;  98C6E3;*/
  }
  
     
.flexedbild { 
   width:300px;
   height: 200px;
    background:rgb(167, 227, 152);
}

.flexedtext { 
width:  calc(100%  -  350px);
/* width:auto; */
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;/*E35E2F;*/
      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: white;
    padding: 10px 30px;
    font-size: 24px;
    border: none;
    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: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    padding: 30px 30px;
    margin-top: 60px;
    margin-left: 60px;
    margin-right: 60px;
    font-size: 14px;
    border: none;
    border-radius: 0px;
    position: absolute;
}


.googlemap-hinweis {
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    padding: 20px 20px;
    margin-top: 35px;
    margin-left: 80px;
    margin-right: 80px;
    max-width: 980px;
    font-size: 12px;
    border: none;
    border-radius: 0px;
    line-height: 16px;
    position: absolute;
}


@media (max-width: 700px) {
.googlemap-hinweis {
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    padding: 15px 15px;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    font-size: 12px;
    border: none;
    border-radius: 0px;
    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;
}