/* Entspricht einer Box die alle Artikel eines Tages zusammenfasst */

@media screen and (min-width:600px) and (max-width:799px) {
    .daybox__container {
        width: 570px;
      }
}

.daybox {
    font-family: var(--font-primary);
    font-size: 24px;
    word-wrap: break-word;
    /*margin-bottom: 60px;*/
}

/*Box Überschrift (Datum der Artikel) */
.daybox .daybox-date-header {
    height: 43px;
    line-height: 1.8;
    background-color: var(--color-background);
    color: white;
    padding-left: 10px;
}

/*Umliegendes Div, das alle Artikel unter der Überschrift hält*/
.daybox .daybox-teaser-box {
    margin-left: 20px;
    margin-right: 20px;
    display: flex;
    break-inside: avoid-column;
    
}

/*Zeichnung des "Zeitstrahls"*/
.daybox .daybox-teaser-box::before {
    content: '';
    border-left: 1px solid black;
}

/*Zeichung eines Punktes auf dem Zeitstrahl*/
.timeline-point {
    width: 8px;
    height: 8px;
    background-color: black;
    margin-top: 18px;
    flex-basis: 8px;
    flex-grow: 0;
    flex-shrink: 0;
}

/*Ein einzelner Artikel Teaser*/
.daybox .daybox-teaser-element {
    flex-basis: 100%;
    margin-top: 10px !important;
    margin-left: 48px;
}

/*Erste Zeile in der Metadaten angeordnet werden*/
.daybox .daybox-teaser-element-meta {
    display: flex;
    flex-direction: row;
    height: 25px;
}

/*Uhrzeit*/
.daybox .daybox-teaser-element-meta-date {
    font-size: 20px;
    line-height: 25px;
    color: var(--color-spacer);
}

/*Symbole*/
.daybox .daybox-teaser-element-meta-symbols {
    margin-left: auto;
}

/*Artikel Teaser Dachzeile*/
.daybox .daybox-teaser-element-category {
    font-weight: 700;
    color: var(--color-accent);
    padding-top: 10px;
    text-transform: uppercase;
}

/*Artikel Teaser Text*/
.daybox .daybox-teaser-element-lead {
    font-weight: 700;
    color: var(--color-text);
    padding-bottom: 20px;
}

/*Trennlinien zwischen den einzelnen Artikel Teasern eines Tages. Letzter Strich fehlt*/
.daybox .daybox-teaser-box:not(:last-child) .daybox-teaser-element-lead {
    padding-bottom: 10px;
    border-bottom: solid 1px lightgrey;
}

/*Fotosymbol*/
.icon-picture-included::before {
    content: "\e942";
    color: #000;
    top: 2px;
    position: relative;
    font-size: 25px;
}

/*Anpassung Read More Button*/
.daybox-read-more .read-more-container {
    padding: 0 !important;
}

/*Zwei Reihen Resonsive*/
@media screen and (min-width: 800px) {
    .twocolumns{
        column-count: 2;
    }
  }
  
@media screen and (min-width: 800px) and (max-width:1241px) {
    .twocolumns{
    max-width:800px;
    }
}

@media screen and (min-width: 1242px) {
    .twocolumns{
        column-count: 3;
    }
  }
  
  /* Anpassung für neues Layout gemäß Prototyp Mrz. 2023 */
  .twocolumns .daybox.column .daybox-teaser-element{
      margin-left: 10px;
  }
  
  .twocolumns .daybox.column {
      font-size: inherit;
  }
  
  .twocolumns .daybox-date-header {
      height: 36px;
      font-size:20px;
      background-color: var(--color-grey2);
  }
  
  .twocolumns .timeline-point {
      background-color: var(--color-grey2);
  }
  
  .twocolumns .daybox-teaser-element-meta {
      text-transform: uppercase;
      color: var(--color-trademark);
      align-items: flex-end;
      height: auto;
  }
  
  
  .twocolumns .daybox-teaser-element-meta-date{
      font-size: 16px;
      line-height: 18px;
  }
  
  .twocolumns .daybox-teaser-element-headline {
      font-size: 18px;
      font-weight: 700;
      padding-top: 5px;
  }