@charset "utf-8";

/*---------------------------------------------------------------------------------------
------------------ DYNAMIC CONTENT MODUL (BLOG) -----------------------------------------
-----------------------------------------------------------------------------------------
Portiert aus css/scss/layout/_dc.scss des Moduls. Das Original setzt das Grid und
die Variablen des site.framework2 voraus, die es in diesem Projekt nicht gibt.
Die Klassennamen des Moduls sind unveraendert uebernommen, damit das Modul-JS
(/_modules/dc/assets/js/index.js) weiterhin greift.

Farben und Groessen aus css/styles.css:
  #512f11 Ueberschrift  #4d4119 Zwischenueberschrift  #3f200e Fliesstext
  #1e4216 Links         #e4dfc8 Seitenhintergrund     650px Inhaltsspalte
---------------------------------------------------------------------------------------*/

/* Hinweis: Das Styling des Blog-Links in #navigationAdditional steht in
   css/styles.css, weil der Link auf allen Seiten vorkommt -- auch auf denen,
   die diese Datei nicht laden. */

/*-------------------------- DYNAMISCHE BEITRAGSNAVIGATION --------------------------*/

/* Seitenspalte #contentMain1 ist 190px breit, Grundschrift dort 11px.
   Inhalt kommt aus inc/blog-navigation.php (ewcms_navigation im JSON-Modus). */
.dcBlogNav {
  width: 190px;
  margin: 0 0 25px 0;
  padding: 0 0 15px 0;
  border-bottom: 1px solid #cfc8a8;
}

.dcBlogNav .dcBlogNavTitle {
  font-size: 12px;
  font-weight: bold;
  color: #512f11;
  margin: 0 0 8px 0;
}

.dcBlogNavList {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dcBlogNavList li {
  margin: 0 0 6px 0;
  line-height: 14px;
}

.dcBlogNavList li a {
  font-size: 11px;
  color: #1e4216;
  text-decoration: underline;
}

.dcBlogNavList li a:hover {
  font-size: 11px;
  text-decoration: none;
}

/* aktueller Beitrag */
.dcBlogNavList li.active a {
  font-size: 11px;
  font-weight: bold;
  color: #512f11;
  text-decoration: none;
}

.dcBlogNav .dcBlogNavArchive {
  margin: 10px 0 0 0;
  font-size: 11px;
}

/*----------------------------------- UEBERSICHT -----------------------------------*/

.dc {
  display: block;
}

/* Flexbox statt float: das Raster bleibt korrekt, egal welche und wie viele
   Kacheln der Filter gerade einblendet. Ein float-Layout muesste dafuer bei
   jeder sichtbaren zweiten Kachel clearen -- das laesst sich per CSS nicht
   ausdruecken, weil :nth-of-type auch die ausgeblendeten mitzaehlt.
   space-between erzeugt die 30px-Luecke zwischen zwei 310px-Kacheln
   (2 x 310 + 30 = 650) und setzt eine einzelne Kachel linksbuendig. */
.dcArticleGrid {
  width: 650px;
  min-height: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 32px;
}

/* Beitraege sind zunaechst ausgeblendet; das Modul-JS blendet die zur aktuellen
   Seite und Filterauswahl passenden per .show wieder ein. Ohne das JS bliebe die
   Uebersicht leer -- siehe js/dc-essentials.js. */
.dcOverviewItem {
  display: none;
}

.dcOverviewItem.show {
  display: flex;
  flex-direction: column;
  width: 310px;
  min-height: 20px;
  margin: 0 0 30px 0;
}

.dcOverviewItem .dcCoverImage {
  display: block;
  width: 310px;
  height: 200px;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  background: #d9d3b8;
}

.dcOverviewItem .dcCoverImage img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  min-height: 100%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.dcOverviewItem time {
  display: block;
  font-size: 11px;
  color: #555;
  margin: 8px 0 2px 0;
}

.dcOverviewItem .title,
.dcOverviewItem h4.title {
  font-size: 16px;
  color: #4d4119;
  font-weight: bold;
  margin: 0 0 8px 0;
  padding: 0;
}

.dcOverviewItem .title a {
  font-size: 16px;
  color: #4d4119;
  text-decoration: none;
}

.dcOverviewItem .title a:hover {
  font-size: 16px;
  text-decoration: underline;
}

.dcOverviewItem p {
  margin-bottom: 10px;
}

.dcOverviewItem .more {
  margin-top: 16px;
  display: inline-block;
  align-self: start;
}

/*----------------------------------- KATEGORIEFILTER -----------------------------------*/

.dcNavCategories {
  width: 650px;
  margin: 0 0 30px 0;
  padding: 0 0 20px 0;
  border-bottom: 1px solid #cfc8a8;
}

.dcNavCategories .dcFilterTitle {
  font-size: 12px;
  font-weight: bold;
  color: #512f11;
  margin: 0 0 10px 0;
}

.dcCategoryNav,
.dcCategoryNav .dcSubCategories {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dcCategoryNav .dcMainCategory {
  float: left;
  margin: 0 25px 8px 0;
}

.dcCategoryNav .dcCategoryItem {
  position: relative;
  display: block;
  max-height: 1000px;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  cursor: pointer;
}

/* vom Modul-JS gesetzt, wenn mehr Unterkategorien als catCrop vorhanden sind */
.dcCategoryNav .dcCategoryItem.hide {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  margin: 0;
}

.dcCategoryNav label {
  display: block;
  font-size: 12px;
  color: #3f200e;
  margin-bottom: 4px;
  cursor: pointer;
}

.dcCategoryNav input {
  margin-right: 5px;
  vertical-align: middle;
}

.dcCategoryNav .dcSubCategories .dcCategoryItem {
  padding-left: 16px;
}

/* "Show more"/"Show less" wird vom Modul-JS als leeres <li> eingefuegt */
.dcCategoryNav .showButton {
  display: inline-block;
  font-size: 11px;
  color: #1e4216;
  cursor: pointer;
  padding-top: 4px;
  text-decoration: underline;
}

.dcCategoryNav .showButton.more:before {
  content: "+ ";
}

.dcCategoryNav .showButton.more:after {
  content: "mehr anzeigen";
}

.dcCategoryNav .showButton.less:before {
  content: "- ";
}

.dcCategoryNav .showButton.less:after {
  content: "weniger anzeigen";
}

#resetButton {
  clear: both;
  display: inline-block;
  margin-top: 10px;
}

/* Kategorieliste unter der Beitragsueberschrift */
.dcCategoryList {
  list-style: none;
  margin: 0 0 10px 0;
  padding: 0;
  font-size: 11px;
  text-transform: uppercase;
  color: #555;
}

.dcCategoryList li {
  display: inline-block;
}

.dcCategoryList li:not(:last-child):after {
  content: "/";
  margin: 0 5px;
}

/*----------------------------------- PAGINATION -----------------------------------*/

#dcPagination {
  clear: both;
  list-style: none;
  margin: 10px 0 30px 0;
  padding: 0;
}

#dcPagination li {
  display: inline-block;
  margin: 0 5px 5px 0;
}

#dcPagination button {
  border: none;
  background: #512f11;
  color: #e4dfc8;
  font-size: 11px;
  padding: 6px 12px;
  cursor: pointer;
}

#dcPagination li:hover button,
#dcPagination li.active button {
  background: #3f200e;
}

/*----------------------------------- EINZELBEITRAG -----------------------------------*/

.dcArticleHeader time {
  display: block;
  font-size: 11px;
  color: #555;
  margin-bottom: 4px;
}

.dcArticleCover {
  width: 650px;
  margin: 0 0 20px 0;
}

.dcArticleCover img {
  max-width: 650px;
  height: auto;
}

.dcArticleText {
  width: 650px;
  margin-bottom: 20px;
}

.dcArticleFooter {
  clear: both;
  width: 650px;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #cfc8a8;
}

.dcArticleShare {
  list-style: none;
  margin: 0 0 15px 0;
  padding: 0;
}

.dcArticleShare li {
  display: inline-block;
  margin-right: 12px;
}

.dcArticleShare a {
  font-size: 11px;
}

/*----------------------------------- GALERIE -----------------------------------*/

.dcGallery {
  width: 650px;
  margin: 20px 0 0 0;
}

.dcGalleryItem {
  float: left;
  margin: 0 10px 10px 0;
}

.dcGalleryItem img {
  display: block;
}

/*----------------------------------- CMS-BACKEND -----------------------------------*/

/* nur fuer eingeloggte Redakteure sichtbar */
.dcBackendHint {
  font-size: 12px;
  color: #512f11;
  margin-bottom: 10px;
}

.dcBackendBlock {
  width: 650px;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #cfc8a8;
}

.dcBackendBlock a[rel] img {
  width: 100%;
}

.dcRefreshButton,
a.btn {
  display: inline-block;
  background: #512f11;
  color: #e4dfc8;
  font-size: 11px;
  padding: 6px 12px;
  margin-bottom: 15px;
  text-decoration: none;
}

.dcRefreshButton:hover,
a.btn:hover {
  background: #3f200e;
  color: #e4dfc8;
  text-decoration: none;
}

.highlight {
  color: #8a2b1e;
}

/* Vorlagen des Moduls, die nicht gerendert werden sollen */
[data-dc-template] {
  display: none;
}