/*
 * layout.css — compiled once from source/scss/layout.scss (webpack/wp-scripts removed).
 * This is now a hand-maintained static file; edit it directly.
 */

/* ---------------------------------------------------------------
     GRUNDMASSE
     - Seite: 1220px breit, davon 20px "Rand" links/rechts als Padding
       (nutzbarer Inhalt also 1180px)
     - Ad: klassisches Halfpage-Format 300x600
     - Gap: Abstand zwischen Seite und Ad (hier 20px, frei anpassbar)
  ----------------------------------------------------------------*/

:root{
  --page-width: 1180px;
  --page-padding: 20px;
  --page-width-with-paddings: 1220px;
  --ad-width: 340px;
  --ad-height: 600px;
  --gap: 20px;
  --group-width: calc(var(--page-width) + var(--gap) + var(--ad-width)); /* 1540px */
}



.podium {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  width: 100%;
  margin:auto;
}

@media all and (min-width: 1220px) {
  .podium {
    width: var(--page-width-with-paddings);
  }
}

@media all and (min-width: 1540px) {
  .podium {
    width: var(--page-width);
  }

  .has-sidebar-ad-outer .podium {
    width: var(--group-width);
    margin-left: max(
            0px,
            min(
                    calc((100vw - var(--page-width)) / 2),
                    calc(100vw - var(--group-width))
            )
    );
  }
}


.podium-area {
  width: 100%;
  max-width: 100%;
  padding-left:var(--page-padding);
  padding-right:var(--page-padding);
  box-sizing: border-box;
}

@media all and (min-width: 1220px) {
  .podium-area {
    width: var(--page-width);
    max-width: var(--page-width);
    padding-left: var(--page-padding);
    padding-right: var(--page-padding);
  }
}

/**
 * MIXINS
 */
aside.mobile-wrap .widget,
aside.fourcol .widget {
  background: none;
  padding: 0;
  margin-bottom: 48px;
}

aside.mobile-wrap .widget {
  margin-bottom: 20px;
}

.podium .podium-area .row .eightcol {
  width: 100%;
}

@media all and (min-width: 768px) {
  .podium-area .container .row .eightcol {
    width: 100%;
  }
}

@media all and (min-width: 1220px) {
  .podium-area .container .row .eightcol {
    width: 100%;
  }
}


.home .container .row .eightcol,
.home .container .row .fourcol {
  margin-top: 0;
}

.container .row .eightcol {

}

#masthead {
  margin-bottom:2rem;
}

/* Opti Overwrites */

.container {

}

section#main {
  margin:0;
  padding:0;
}


.container a:hover, .container a:focus, .container a:hover, .container li:hover, .container input:hover {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.container .row {
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  gap:40px;
}

.container .header-section.row {
  gap:10px;
  margin-top:1rem;
  flex-direction: row;
}

@media all and (min-width: 768px) {
  .container .row {
    flex-direction: row;
  }

  .container .header-section.row {
    flex-direction: row;
  }
}

.container .row .eightcol,
.container .row .fourcol {
  border: none;
  padding: 0;
  float:none;
}

@media all and (min-width: 1180px){
  .container .row .eightcol {

  }
}

.archive .row .eightcol,
.wp-singular .row .eightcol {
  border:none;
  padding:0;
}

.wp-singular .entry {
  margin-left:0;
}

/* New Layout */

.container .row {
  max-width: 1180px;
}

.row .fourcol.layout--sidebar {
  width:300px;
}

footer.layout--footer {
  background: var(--monitor-100);
  color:var(--ink-300);
}

footer.layout--footer a {
  color:var(--ink-300);
}

footer.layout--footer a:hover {
  color:var(--monitor-600) !important;
}

.container .wrapper {
  max-width: none;
}