body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}
#wrapper{width:960px;margin:0 auto}.grid1,.grid2,.grid3,.grid4,.grid5,.grid6,.grid7,.grid8,.grid9,.grid10,.grid11,.grid12{float:left;margin-left:10px;margin-right:10px;display:inline}.mod_article [class^=ce_],.mod_article [class*=" ce_"],.mod_article [class^=content-],.mod_article [class*=" content-"],.mod_article [class^=mod_],.mod_article [class*=" mod_"]{margin-left:10px;margin-right:10px}.ce_sliderStart>.content-slider{margin-left:0;margin-right:0}.mod_article .mod_newsreader,.mod_article .mod_eventreader{margin-left:0;margin-right:0}.mod_article [class^=layout_]>*,.mod_article [class*=" layout_"]>*,.mod_article [class^=event_]>*,.mod_article [class*=" event_"]>*{margin-left:10px;margin-right:10px}.mod_article.grid1,.mod_article.grid2,.mod_article.grid3,.mod_article.grid4,.mod_article.grid5,.mod_article.grid6,.mod_article.grid7,.mod_article.grid8,.mod_article.grid9,.mod_article.grid10,.mod_article.grid11,.mod_article.grid12{margin-left:0;margin-right:0}#main .inside{overflow:hidden}.grid1{width:60px}.grid2{width:140px}.grid3{width:220px}.grid4{width:300px}.grid5{width:380px}.grid6{width:460px}.grid7{width:540px}.grid8{width:620px}.grid9{width:700px}.grid10{width:780px}.grid11{width:860px}.grid12{width:940px}.mod_article.grid1{width:80px}.mod_article.grid2{width:160px}.mod_article.grid3{width:240px}.mod_article.grid4{width:320px}.mod_article.grid5{width:400px}.mod_article.grid6{width:480px}.mod_article.grid7{width:560px}.mod_article.grid8{width:640px}.mod_article.grid9{width:720px}.mod_article.grid10{width:800px}.mod_article.grid11{width:880px}.mod_article.grid12{width:960px}.offset1{margin-left:90px!important}.offset2{margin-left:170px!important}.offset3{margin-left:250px!important}.offset4{margin-left:330px!important}.offset5{margin-left:410px!important}.offset6{margin-left:490px!important}.offset7{margin-left:570px!important}.offset8{margin-left:650px!important}.offset9{margin-left:730px!important}.offset10{margin-left:810px!important}.offset11{margin-left:890px!important}.offset12{margin-left:970px!important}.mod_article.offset1{margin-left:80px!important}.mod_article.offset2{margin-left:160px!important}.mod_article.offset3{margin-left:240px!important}.mod_article.offset4{margin-left:320px!important}.mod_article.offset5{margin-left:400px!important}.mod_article.offset6{margin-left:480px!important}.mod_article.offset7{margin-left:560px!important}.mod_article.offset8{margin-left:640px!important}.mod_article.offset9{margin-left:720px!important}.mod_article.offset10{margin-left:800px!important}.mod_article.offset11{margin-left:880px!important}.mod_article.offset12{margin-left:960px!important}@media (min-width:768px) and (max-width:979px){#wrapper{width:744px}.grid1{width:42px}.grid2{width:104px}.grid3{width:166px}.grid4{width:228px}.grid5{width:290px}.grid6{width:352px}.grid7{width:414px}.grid8{width:476px}.grid9{width:538px}.grid10{width:600px}.grid11{width:662px}.grid12{width:724px}.mod_article.grid1{width:62px}.mod_article.grid2{width:124px}.mod_article.grid3{width:186px}.mod_article.grid4{width:248px}.mod_article.grid5{width:310px}.mod_article.grid6{width:372px}.mod_article.grid7{width:434px}.mod_article.grid8{width:496px}.mod_article.grid9{width:558px}.mod_article.grid10{width:620px}.mod_article.grid11{width:682px}.mod_article.grid12{width:744px}.offset1{margin-left:72px!important}.offset2{margin-left:134px!important}.offset3{margin-left:196px!important}.offset4{margin-left:258px!important}.offset5{margin-left:320px!important}.offset6{margin-left:382px!important}.offset7{margin-left:444px!important}.offset8{margin-left:506px!important}.offset9{margin-left:568px!important}.offset10{margin-left:630px!important}.offset11{margin-left:692px!important}.offset12{margin-left:754px!important}.mod_article.offset1{margin-left:62px!important}.mod_article.offset2{margin-left:124px!important}.mod_article.offset3{margin-left:186px!important}.mod_article.offset4{margin-left:248px!important}.mod_article.offset5{margin-left:310px!important}.mod_article.offset6{margin-left:372px!important}.mod_article.offset7{margin-left:434px!important}.mod_article.offset8{margin-left:496px!important}.mod_article.offset9{margin-left:558px!important}.mod_article.offset10{margin-left:620px!important}.mod_article.offset11{margin-left:682px!important}.mod_article.offset12{margin-left:744px!important}}@media (max-width:767px){#wrapper{width:auto}.grid1,.grid2,.grid3,.grid4,.grid5,.grid6,.grid7,.grid8,.grid9,.grid10,.grid11,.grid12{float:none!important;display:block!important;width:auto!important}.offset1,.offset2,.offset3,.offset4,.offset5,.offset6,.offset7,.offset8,.offset9,.offset10,.offset11,.offset12{margin-left:10px!important}}
.sharebuttons {
	overflow:hidden;
}

.sharebuttons > ul.theme {
	list-style-type:none;
	margin:-4px;
	padding:0;
}

.sharebuttons > ul.theme:after {
	content:"";
	display:block;
	clear:both;
}

.sharebuttons > ul.theme > li {
	float:left;
}

.sharebuttons > ul.theme > li > a {
	margin:4px;
	display:block;
	white-space:nowrap;
	overflow:hidden;
	text-indent:101%;
	background-repeat:no-repeat;
	background-position:center;
}

.sharebuttons > ul.text > li > a {
	text-indent:0;
}

/* source: http://www.twelveskip.com/resources/icons/1091/boxxed-flat-social-media-icons */

.sharebuttons > ul.boxxed > li > a {
	width:32px;
	height:32px;
	background-image:url('../../system/modules/sharebuttons/assets/boxxed/sprites-32.png');
}

.sharebuttons > ul.boxxed > li > a.facebook {
	background-position:-40px 0;
}

.sharebuttons > ul.boxxed > li > a.twitter {
	background-position:-160px 0;
}

.sharebuttons > ul.boxxed > li > a.gplus {
	background-position:-80px 0;
}

.sharebuttons > ul.boxxed > li > a.linkedin {
	background-position:-120px 0;
}

.sharebuttons > ul.boxxed > li > a.xing {
	background-position:-200px 0;
}

.sharebuttons > ul.boxxed > li > a.mail {
	background-position:0 0;
}

.sharebuttons > ul.boxxed > li > a.tumblr {
	background-position:-240px 0;
}

.sharebuttons > ul.boxxed > li > a.pinterest {
	background-position:-280px 0;
}

.sharebuttons > ul.boxxed > li > a.reddit {
	background-position:-320px 0;
}

.sharebuttons > ul.boxxed > li > a.whatsapp {
	background-position:-360px 0;
}

:root {
  --primaryColor: #E31E24; /* rot aus dem Logo */
  --secondColor: #E5761E; /* passendes orange aus dem Farbkreis */
  --thirdColor: #21BA19; /* passendes grün aus dem Farbkreis */
  --forthColor: #128B86; /* passendes blau aus dem Farbkreis */

  --secondColorLight: #F2954B;
}

#footer {
  margin: 0.625rem;
  height: 6rem;
}

/*  Impressum, Datenschutz, Kontakt */
#footer .inside .mod_subscribe {
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 0.75rem;
  background-color: var(--secondColorLight);
}

#footer .mod_customnav ul {
  float: right;
}

#footer .mod_customnav ul li a:hover {
  font-size: 0.75rem;
  font-weight: bold;
}
#footer .mod_customnav ul li a {
  font-size: 0.75rem;
  color: white;
  text-decoration: none;
  list-style-type: none;
}

#footer #sharedID {
  height: 1.9rem;
  list-style-type: none;
  margin-top: 0.625rem;
  float: right;
}

#footer #sharedID .sharebuttons ul li {
  width: 3rem;
}



@media only screen and (min-width: 36rem) {
  #footer .mod_customnav ul {
    width: 60%;
    float: right !important;
  }
  #footer .mod_customnav ul li {
    display: inline-grid;
    float: right;
  }
  #footer .Newsletter {
    position: absolute;
    left: 1rem;
    top: -0.5rem;
    width: 5rem;
  }
  #footer .NewsletterLink {
    position: absolute;
    left: 0.8rem;
    bottom: -1.5rem;
    font-size: 0.75rem;
  }
}

@media only screen and (max-width: 35.9999rem) {
  #footer {
    height: 13rem;
  }

  #footer .Newsletter {
    position: absolute;
    left: 1rem;
    top: 4rem;
    width: 5rem;
  }

  #footer .NewsletterLink {
    position: absolute;
    left: 0.8rem;
    bottom: -1.5rem;
    font-size: 0.75rem;
  }
}

 /*
 * Gefunden bei https://www.drweb.de/responsive-navigation-css-dropdown-menue/
 *
 */

 :root {
   --primaryColor: #E31E24; /* rot aus dem Logo */
   --secondColor: #E5761E; /* passendes orange aus dem Farbkreis */
   --thirdColor: #21BA19; /* passendes grün aus dem Farbkreis */
   --fourthColor: #128B86; /* passendes blau aus dem Farbkreis */

   --secondColorLight: #F2954B;
   --thirdColorLight: #B0E1AD;
   --fourthColorLight: #94C1BF;
   
   --neuesWarmesGrau: #e4e4e4;
   --grauerHintergrund: #f6f4f5;

 /* 16px = 1rem */
 }

#header {
  height: 9rem;
  margin: 1rem;
}

#header > div.inside {
  display: grid;
  grid-template-columns: 9rem 9rem auto;
}

#logo {
  grid-column: 1;
  padding: 0.625rem;
}

#jubilaeumslogo {
  grid-column: 2;
  margin-left: 2rem;
  margin-top: 1rem;
}

#rightHeaderID {
  grid-column: 3;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
  overflow: hidden;
}

nav ul li.active {
  color: white;
  margin-left: 0.625rem;
  text-decoration: none;
  display: block;
  white-space: nowrap;
  padding: 0.625rem;
  background-color: var(--fourthColor);
}

nav ul li a {
  color: white;
  text-decoration: none;
  display: block;
  white-space: nowrap;
  padding: 0.625rem;
  background: var(--secondColorLight);
}

nav > ul > li > ul {
  display: none;
}

nav > ul > li:hover > ul {
  display: block;
  position: absolute;
  z-index: 1;
}

nav > ul > li > ul > li {
  list-style: none;
  position: relative;
  z-index: 1;
}

nav ul > li > ul > li.sibling > a {
  background: var(--secondColorLight);
}

nav > ul > li > ul > li.active {
  background-color: var(--fourthColor);
  color: white;
  z-index: 2;
}
/* parent li of the active element */
nav ul > li.trail a {
  color: white;
  background-color: var(--fourthColor);
}

/*   BREADCRUMB   */
nav.mod_breadcrumb > ul {
  background-color: var(--grauerHintergrund);
  float: left;
}

nav.mod_breadcrumb > ul > li > a {
  background-color: var(--grauerHintergrund);
  color: black;
}

nav.mod_breadcrumb > ul > li > a:after {
  content: " -->";
  color: black;
}

nav.mod_breadcrumb li.active:after {
  content: "";
}

nav.mod_breadcrumb > ul > li {
  background-color: var(--grauerHintergrund);
  float: left;
  color: black;
}

/* removes KGR2020 (D)*/
nav.mod_breadcrumb > ul > li:first-child {
  display: none;
}





@media only screen and (min-width: 54.5rem) {
  nav > ul {
    margin-left: calc(100% - 35rem);
  }

  nav > ul > li {
    min-width: 7rem;
    list-style: none;
    float: left;
    padding-left: 0.5rem;
  }

  /* Schriftzug Kulturring Gaggenau e.V.*/
  div.HeadLine {
    position: absolute;
    top: 4.5rem;
    font-size: 2rem;
    font-weight: bold;
    font-style: italic;
    margin-left: calc(100% - 43.75rem);
  }

  nav.mod_breadcrumb {
    margin-top: 4rem;
    margin-left: calc(100% - 37rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}






@media only screen and (min-width: 30rem) and (max-width: 54.4999rem) {
  #header {
    background-position: left 1rem top 1rem;
    height: 14rem;
  }

  #header > div.inside {
    display: grid;
    grid-template-columns: 8rem 8rem auto;
  }

  #jubilaeumslogo {
    grid-column: 2;
    margin-top: 1.5rem;
  }

  nav > ul {
    margin-left: calc(100% - 11rem);
  }

  nav > ul > li {
    min-width: 8rem;
    list-style: none;
    padding-left: 0.5rem;
  }

  /* Schriftzug Kulturring Gaggenau e.V.*/
  div.HeadLine {
    position: absolute;
    top: 10rem;
    margin-left: -5rem;
    line-height: 125%;
    font-size: 1.45rem;
    font-weight: bold;
    font-style: italic;
  }

  nav.mod_breadcrumb {
    margin-left: -0.5rem;
    margin-top: 2.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}




@media only screen and (max-width: 29.9999rem) {
  #header {
    background-position: left 1rem top 1rem;
    height: 13rem;
  }
  
  #header > div.inside {
    display: grid;
    grid-template-columns: 6.5rem 6rem auto;
  }

  #jubilaeumslogo {
    grid-column: 2;
    margin-top: 1.5rem;
  }

  nav > ul {
    margin-left: calc(100% - 9rem);
  }

  nav > ul > li {
    min-width: 0rem;
    list-style: none;
    padding-left: 0.5rem;
  }

  /* Schriftzug Kulturring Gaggenau e.V.*/
  div.HeadLine {
    margin-left: -8.5rem;
    position: absolute;
    top: 10rem;
    line-height: 115%;
    font-size: 1.25rem;
    font-weight: bold;
    font-style: italic;
  }

  nav.mod_breadcrumb {
    margin-left: -11rem;
    margin-top: 1.5rem;
    margin-right: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

  :root {
  --primaryColor: #E31E24; /* rot aus dem Logo */
  --secondColor: #E5761E; /* passendes orange aus dem Farbkreis */
  --thirdColor: #21BA19; /* passendes grün aus dem Farbkreis */
  --forthColor: #128B86; /* passendes blau aus dem Farbkreis */

  --secondColorLight:#F2954B;
  --thirdColorLight: #B0E1AD;
  --fourthColorLight: #94C1BF;

  --thirdColorSchema_L1: #F3FBF2;
  --thirdColorSchema_L2: #D5F0D4;
  --thirdColorSchema_L3: #85CD81;
  --thirdColorSchema_L4: #54AA4F;

  --fourthColorSchema_L1: #EEF7F7;
  --fourthColorSchema_L2: #C6E1E0;
  --fourthColorSchema_L3: #609A97;
  --fourthColorSchema_L4: #3B807D;


  --alteSeiteGrau: #c4c4c4;  /* rgba(196, 196, 196, 1) */
  --neuesWarmesGrau: #e4e4e4;
  --beschreibungsBreite: 25rem;
}

/* Download von https://google-webfonts-helper.herokuapp.com/fonts */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../../fonts/roboto-v29-latin-regular.woff2');
}
/* roboto-italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('../../fonts/roboto-v29-latin-italic.woff2');
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: url('../../fonts/nunito-v22-latin-regular.woff2');
}

@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 400;
  src: url('../../fonts/nunito-v22-latin-italic.woff2');
}
/*  Handwritten Fonts zum Testen: */
/* @font-face {
  font-family: 'Redressed';
  font-style: normal;
  font-weight: 400;
  src: url('../../fonts/redressed-v23-latin-regular.woff2');
} */


html, body, html * {
  font-family: 'Roboto', sans-serif;
}

.g1,
.g2 {
    float: left;
}

h1,
h2,
h3 {
  padding: 0.25rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  line-height: 125%;
  color: black;
}

h1 {
  text-align: center;
  border-top: 0.06rem solid white;
  font-size: 1.5rem;
  background: var(--thirdColorLight);
}
h2 {
  border-top: 0.06rem solid white;
  font-size: 1.25rem;
  background: var(--fourthColorLight);
}
h3 {
  font-size: 1rem;
}

body {
  font-size: 1rem;
  line-height: 115%;
  letter-spacing: 0.025em;
}

#wrapper {
  background-image: url("https://www.kulturring-gaggenau.de/files/KRG2020/img/BG_Balken_Start_E5_F6_1280.jpg");
  background-repeat:repeat-y;
  width: 100%;
  max-width: 80rem;
  overflow: hidden;
  z-index: 0;
}

#main article#teaserID.mod_article {
  margin: 0.625rem;
}
#main article#teaserID.mod_article > div > div.teaser  img {
  width: 49%;
  max-width: 30rem;
  padding: 0.625rem;
}

/* Satzung, Hygienekonzept, Datenschutz, ... */
#main div.mod_article h1.content-headline {
  display: flex;
  flex-flow: row wrap;
}
#main div.mod_article h1.content-headline.first {
  margin-left: 0.625rem;
  width: 100%;
}

#main div#columnRightID.kontaktformulartextclass {
  margin-right: 0.25rem;
  padding-right: 0.25rem;
  width: 95%;
  box-shadow: none;
}

/*  Spezielle Seiten wie unter Über Uns, Service, ... */
/*    Common Stuff  */
#main div#partnerID,
#main div#vorstandID,
#main div#partnerID,
#main div#fachreferentenID,
#main div#beiratID {
  padding-top: 1.25rem;
  margin: 0.625rem !important;
  width: inherit;
}

#main div#partnerID > table,
#main div#fachreferentenID > table,
#main div#beiratID > table,
#main div#vorstandID > table {
  table-layout: fixed;
  width: 96% !important;
  margin-left: 0.625rem;
}
#main div#partnerID > table > tbody > tr > td:nth-child(1),
#main div#fachreferentenID > table > tbody > tr > td:nth-child(1),
#main div#beiratID > table > tbody > tr > td:nth-child(1),
#main div#vorstandID > table > tbody > tr > td:nth-child(1) {
  width: 50%;
}
#main div#partnerID > table > tbody > tr > td:nth-child(2),
#main div#fachreferentenID > table > tbody > tr > td:nth-child(2),
#main div#beiratID > table > tbody > tr > td:nth-child(2),
#main div#vorstandID > table > tbody > tr > td:nth-child(2) {
  width: 50%;
}

/* Trennlinie */
#main div#partnerID > p,
#main div#fachreferentenID > p,
#main div#beiratID > p,
#main div#vorstandID > p {
  width: 96% !important;
  margin-left: 0.625rem;
}
#main div#partnerID > p  img,
#main div#fachreferentenID > p img,
#main div#beiratID > p img,
#main div#vorstandID > p img:nth-child(1) {
  min-width: 98% !important;
}


tr {
    vertical-align: top;
}
td {
    margin-right: 1.25rem;
}

#rightID > div.content-form.block > form  div.widget.widget-submit > button {
  background-color: var(--forthColor);
}

/* sorgt dafür, dass die labels und input Felder untereinander stehen  */
.FormularClass {
  display: block;
}

input[type=email],
input[type=tel] {
  width: 99%;
  height: 2rem;
  margin-bottom: 0.625rem;
}

/* sorgt dafür, dass die Anmeldung in der Hauptspalte landet */
.mod_newsletterSubscribeNotificationCenter {
    padding-left: 12rem;
}
/* sorgt dafür, dass die Kündigung in der Hauptspalte landet */
.mod_newsletterUnsubscribeNotificationCenter {
    padding-left: 12rem;
}

input[type=text],
input[type=password],
textarea.textarea {
  width: 100% !important;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

div#documentDownload {
  width: 98% !important;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

button {
  background-color: var(--thirdColor);
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

button:hover {
  opacity: 0.8;
}

/* START  Rundschreiben */
#main div#rundschreibenID.mod_article {
  display: grid;
  grid-template-columns: 40% 60%;
  grid-gap: 12px;
}
#main h2#rundschreibenHeadlineID.content-headline {
  grid-column: 1 / -1;
  margin-right: 0.625rem;
  text-align: center;
}
#main div#rundschreibenID div#columnRightID.content-text.rundschreiben.block h3 {
  grid-column: 1 / -1;
  text-align: center;
}
#main div#rundschreibenID div#columnRightID.content-text.rundschreiben.block {
  grid-column: 1 / -1;
  margin-right: 0.625rem;
}
#main div#rundschreibenID.mod_article div#columnLeftID {
  grid-column: 1;
  padding: 0.625rem;
  margin-right: 0.625rem;
  margin-left: 0.625rem;
}

#main div#rundschreibenID div#columnRightID {
  grid-column: 2;
  width: 90%;
  padding: 0.625rem;
}
/* END  Rundschreiben */


/* geschützter Bereich */
#main div#loginID {
  margin-left: -10rem;
  grid-column: 2;
}
#main div#loginID div.widget-submit > button.submit {
  background-color: var(--fourthColor);
  font-size: 1rem;
}
#main div#dateiHochladen {
  margin-left: -15rem;
  grid-column: 2;
}
#main div#dateiHochladen div.widget-submit > button.submit {
  background-color: var(--fourthColor);
  font-size: 1rem;
}
#main div#dateiHochladen > form > div.formbody > div.widget > label {
  display: inline-block;
  width: 24rem;
}
#main div#dateiHochladen div#lineID {
  border-top: 1px solid black;
}

@media only screen and (min-width: 62.5rem) {

    #main > div.inside > div[id*="article-"] {
      display: grid;
      grid-template-columns: 33.75rem auto;
    }

    #main > div.inside > div.mod_article > h1.content-headline {
      grid-column-start: span 2;
      padding: 0.625rem;
      border-top: 5px solid white;
      border-bottom: 5px solid white;
   }

    /*  Startseite  */
    h6 {
      margin: 0;
      font-size: 4rem;
      font-weight: bold;
      padding: 2rem;
    }

    /* Chapter fotos */
    #main div.content-gallery ul li {
      width: 75%;
    }
    #main div#columnLeftID.gallery_heading_two_columns ul li {
      width: 50%;
    }
    /* Photos */
    #main div.mod_article > div.content-gallery {
      padding: 0.625rem;
      margin-right: 0.625rem;
      grid-column: 1;
    }

    #main div#rightID {
      padding: 0.625rem;
      grid-column: 2;
    }
    /* Beschreibung der Veranstaltung */
    #main div#rightID div:nth-child(1) {
      padding: 0.625rem;
      margin-right: 0.625rem;
    }

    /*  z.B. Flyer zur Exkursion */
    #main div#gotoHauptspalte.content-downloads,
    /* Eintritt und Anmeldeformular sofern vorhanden */
    #main div#rightID h1.content-headline {
    }

    /* Teil der Preisinformation */
    #main div#rightID div:nth-child(3) {
      padding: 0.625rem;
    }
    #main div#rightID div:nth-child(3) > p {
      clear: both;
      margin: 0;
      padding: 0;
      padding-left: 0 !important;
      overflow: visible;
    }

    /* Zurück */
    #main p.back {
      margin-left: 70%;
      padding: 0.625rem;
      margin-right: 0.625rem;
      grid-column: 2;
    }
  }







@media only screen and (min-width: 32.5rem) and (max-width: 62.4999rem) {

  #main > div.inside > div[id*="article-"] {
    display: grid;
    grid-template-columns: 50% 50%;
  }

  #main > div.inside h1.content-headline {
   grid-column-start: span 2;
   padding: 0.625rem;
   border-top: 5px solid white;
   border-bottom: 5px solid white;
 }

  /*  Startseite  */
  h6 {
    margin: 0;
    font-size: 4rem;
    font-weight: bold;
    padding: 2rem;
  }

  /* Chapter fotos */
  #main div#columnLeftID.gallery_heading ul li {
    width: 75%;
  }
  #main div#columnLeftID.gallery_heading_two_columns ul li {
    width: 50%;
  }
  /* Photos */
  #main div.mod_article > div.content-gallery {
    padding: 0.625rem;
    margin-right: 0.625rem;
    grid-column: 1;
  }

  #main div#rightID {
    padding: 0.625rem;
    grid-column: 2;
  }
  /* Beschreibung der Veranstaltung */
  #main div#rightID div:nth-child(1) {
    padding: 0.625rem;
    margin-right: 0.625rem;
  }

  /*  z.B. Flyer zur Exkursion */
  #main div#gotoHauptspalte.content-downloads,
  /* Eintritt und Anmeldeformular sofern vorhanden */
  #main div#rightID h1.content-headline {
  }

  /* Teil der Preisinformation */
  #main div#rightID div:nth-child(3) {
    padding: 0.625rem;
  }
  #main div#rightID div:nth-child(3) > p {
    clear: both;
    margin: 0;
    padding: 0;
    padding-left: 0 !important;
    overflow: visible;
  }

  /* Zurück */
  #main p.back {
    margin-left: 70%;
    padding: 0.625rem;
    margin-right: 0.625rem;
    grid-column: 2;
  }
}








@media only screen and (max-width: 32.49999rem) {
  #main > div.inside > div.mod_article block > h1.content-headline {
   width: 96%;
   padding: 0.625rem;
   border-top: 5px solid white;
   border-bottom: 5px solid white;
 }

  /*  Startseite  */
  #main > div.inside h6.content-headline {
    margin: 0;
    font-size: 1.75rem;
    font-weight: bold;
    padding: 0.625rem;
  }

  /* Chapter fotos */
  #main div.content-gallery ul li {
    width: 75%;
  }
  #main div.content-gallery ul li {
    width: 50%;
  }
  /* Photos */
  #main div#rightID > div.content-gallery {
    padding: 0.625rem;
  }
  /* Beschreibung der Veranstaltung */
  #main  div#rightID  div:nth-child(1) {
    padding: 0.625rem;
  }
  /* Eintritt */
  #main div#rightID h1.content-headline {
    padding: 0.625rem;
    margin-left: 0.625rem;
    margin-right: 0.625rem;
  }

  /* Preise */
  #main div#rightID div:nth-child(5) p {
    padding: 0.625rem;
  }
  #main div#rightID div:nth-child(3) > p {
    clear: both;
    margin: 0;
    padding: 0;
    padding-left: 0 !important;
    overflow: visible;
  }

  /* Zurück */
  #main p.back {
    float: right;
    clear: right;
    padding: 0.625rem;
    margin-right: 0.625rem;
    margin-left: 0.625rem;
  }
}

