/* main.css — Layout und Komponenten.
   Nachbau des Twenty-Fifteen-Layouts (GPLv2). Saemtliche Masse, Abstaende,
   Schriftgroessen und Breakpoints sind dem Theme-Stylesheet entnommen, nicht
   geschaetzt. Reihenfolge der Breakpoints wie im Original:
   38.75em / 46.25em / 55em / 59.6875em / 68.75em / 77.5em / 87.6875em. */

.site { margin: 0 auto; }

/* --- Seitenleiste ------------------------------------------------------- */

.site-header {
  background-color: var(--c-card);
  border-bottom: 1px solid var(--c-rule);
  padding: 7.6923%;
}

.site-branding {
  min-height: 2em;
  padding-right: 60px;
  position: relative;
}

.site-title {
  font-family: var(--font-sans);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.3636;
  margin-bottom: 0;
}
.site-title a { color: var(--c-text); }

.secondary {
  background-color: var(--c-card);
  padding: 0 7.6923%;
}

/* Trennlinien: ueber jedem Punkt und unter dem letzten — so wie das Original
   tatsaechlich rendert. */
.main-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--c-rule);
}
.main-navigation li { border-top: 1px solid var(--c-rule); }
.main-navigation a { display: block; padding: 0.8em 0; position: relative; }
.main-navigation [aria-current="page"] { font-weight: 700; }

/* --- Inhaltsflaeche ----------------------------------------------------- */

.hentry {
  background-color: var(--c-card);
  padding-top: 7.6923%;
  position: relative;
}

/* Mit Banner sitzt das Bild buendig an der Oberkante — kein Innenabstand oben. */
.hentry.has-post-thumbnail { padding-top: 0; }

.post-thumbnail { border: 0; display: block; margin-bottom: 2.4em; }
.post-thumbnail img { display: block; margin: 0 auto; width: 100%; }

.entry-header { padding: 0 7.6923%; }
.entry-title {
  font-size: 2.6rem;
  line-height: 1.1538;
  margin-bottom: 0.9231em;
}

.entry-content {
  padding: 0 7.6923% 7.6923%;
  hyphens: auto;
  word-wrap: break-word;
}
.entry-content > :last-child { margin-bottom: 0; }

.has-text-align-center { text-align: center; }

/* --- Inhaltselemente ---------------------------------------------------- */

.entry-content h2 {
  font-size: 2.2rem;
  line-height: 1.3636;
  margin-top: 2.1818em;
  margin-bottom: 1.0909em;
}
.entry-content h3 {
  font-size: 1.8rem;
  line-height: 1.3333;
  margin-top: 2.6667em;
  margin-bottom: 1.3333em;
}
.entry-content > h2:first-child,
.entry-content > h3:first-child { margin-top: 0; }

.site-footer {
  background-color: var(--c-card);
  border-top: 1px solid var(--c-rule);
  padding: 3.84615% 7.6923%;
}
.site-info {
  color: var(--c-text-soft);
  font-size: 1.2rem;
  line-height: 1.5;
}
.site-info a { color: var(--c-text-soft); border-bottom: 1px solid transparent; }
.site-info a:hover, .site-info a:focus { color: var(--c-text); border-bottom-color: var(--c-text); }
.site-info span[role="separator"] { padding: 0 0.25em 0 0.5em; }
.site-info span[role="separator"]::before { content: "\002f"; }

.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus {
  left: 0;
  background: var(--c-card);
  padding: 0.6em 1em;
  z-index: 10;
}

/* --- 38.75em (620px) ---------------------------------------------------- */

@media screen and (min-width: 38.75em) {
  .site-branding { min-height: 3.2em; }
  .site-title { line-height: 1.0909; }

  .secondary {
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
    margin: 7.6923% 7.6923% 0;
    padding: 7.6923% 7.6923% 0;
  }
  .main-navigation { margin-bottom: 11.1111%; }

  .site-main { padding: 7.6923% 0; }

  /* Die weisse Flaeche ist seitlich eingerueckt — nicht randlos. */
  .hentry {
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
    margin: 0 7.6923%;
  }

  .post-thumbnail { margin-bottom: 2.4em; }
  .entry-header { padding: 0 9.0909%; }
  .entry-content { padding: 0 9.0909% 9.0909%; }
  .site-footer {
    border-top: 0;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
    margin: 0 7.6923%;
    padding: 3.84615% 7.6923%;
  }
}

/* --- 46.25em (740px) ---------------------------------------------------- */

@media screen and (min-width: 46.25em) {
  body { font-size: 1.7rem; line-height: 1.6471; }
  p, address, pre, hr, ul, ol, dl, dd, table { margin-bottom: 1.6471em; }
  .site-branding { min-height: 3.7059em; padding-right: 66px; }
  .site-title { font-size: 2.9rem; line-height: 1.2069; }
  .main-navigation { font-size: 1.4rem; line-height: 1.5; }
  .main-navigation a { padding: 1em 0; }
  .post-thumbnail { margin-bottom: 3em; }
  .entry-title { font-size: 3.5rem; line-height: 1.2; margin-bottom: 1.2em; }
  .entry-content h2 { font-size: 2.9rem; line-height: 1.2069; margin-top: 1.931em; margin-bottom: 0.9655em; }
  .entry-content h3 { font-size: 2.4rem; line-height: 1.1667; margin-top: 2.3333em; margin-bottom: 1.1667em; }
  .site-info { font-size: 1.4rem; }
}

/* --- 55em (880px) ------------------------------------------------------- */

@media screen and (min-width: 55em) {
  body { font-size: 1.9rem; line-height: 1.6842; }
  p, address, pre, hr, ul, ol, dl, dd, table { margin-bottom: 1.6842em; }
  .site-branding { min-height: 3.7895em; padding-right: 74px; }
  .site-title { font-size: 3.2rem; line-height: 1.25; }
  .main-navigation { font-size: 1.6rem; line-height: 1.5; }
  .main-navigation a { padding: 0.75em 0; }
  .post-thumbnail { margin-bottom: 2.9474em; }
  .entry-title { font-size: 3.9rem; line-height: 1.2308; margin-bottom: 1.2308em; }
  .entry-content h2 { font-size: 3.2rem; line-height: 1.25; margin-top: 2em; margin-bottom: 1em; }
  .entry-content h3 { font-size: 2.7rem; line-height: 1.1852; margin-top: 2.3704em; margin-bottom: 1.1852em; }
  .site-info { font-size: 1.6rem; }
}

/* --- 59.6875em (955px): zweispaltig ------------------------------------- */

@media screen and (min-width: 59.6875em) {
  /* weisser Streifen hinter der Seitenleiste, ueber die volle Hoehe */
  body::before {
    background-color: var(--c-card);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 29.4118%;
    height: 100%;
    min-height: 100%;
    z-index: 0;
  }

  body { font-size: 1.5rem; line-height: 1.6; }
  p, address, pre, hr, ul, ol, dl, dd, table { margin-bottom: 1.6em; }

  .site { margin: 0 auto; max-width: 1403px; }

  .sidebar {
    float: left;
    margin-right: -100%;
    max-width: 413px;
    position: relative;
    width: 29.4118%;
  }

  .site-header {
    background-color: transparent;
    border-bottom: 0;
    margin: 20% 0;
    padding: 0 20%;
  }
  .site-branding { min-height: 0; padding: 0; }
  .site-title { font-size: 2.2rem; line-height: 1.3636; }

  .secondary {
    background-color: transparent;
    box-shadow: none;
    margin: 0;
    padding: 0;
  }
  .main-navigation { font-size: 1.2rem; margin: 0 20% 20%; }
  .main-navigation a { padding: 0.5em 0; }

  .site-content {
    float: left;
    margin-left: 29.4118%;
    width: 70.5882%;
  }

  .site-main { padding: 8.3333% 0; }

  .hentry { margin: 0 8.3333%; padding-top: 8.3333%; }
  .post-thumbnail { margin-bottom: 2.4em; }
  .entry-header { padding: 0 10%; }
  .entry-title { font-size: 3.1rem; line-height: 1.1613; margin-bottom: 1.1613em; }
  .entry-content { padding: 0 10% 10%; }
  .entry-content h2 { font-size: 2.6rem; line-height: 1.3846; margin-top: 1.8462em; margin-bottom: 0.9231em; }
  .entry-content h3 { font-size: 2.2rem; line-height: 1.3636; margin-top: 2.1818em; margin-bottom: 1.0909em; }
  /* Footer ist im Theme ein Kind von .site und wird eigens positioniert. */
  .site-footer {
    float: left;
    margin: 0 0 0 35.2941%;
    padding: 0;
    width: 58.8235%;
    box-shadow: none;
  }
  .site-info { padding: 5% 10%; font-size: 1.2rem; }
}

/* --- 68.75em (1100px) --------------------------------------------------- */

@media screen and (min-width: 68.75em) {
  body { font-size: 1.7rem; line-height: 1.6471; }
  p, address, pre, hr, ul, ol, dl, dd, table { margin-bottom: 1.6471em; }
  .site-title { font-size: 2.4rem; line-height: 1.1667; }
  .main-navigation { font-size: 1.4rem; }
  .main-navigation a { padding: 0.4643em 0; }
  .post-thumbnail { margin-bottom: 2.4706em; }
  .entry-title { font-size: 3.5rem; line-height: 1.2; margin-bottom: 1.2em; }
  .entry-content h2 { font-size: 2.9rem; line-height: 1.2069; margin-top: 1.931em; margin-bottom: 0.9655em; }
  .entry-content h3 { font-size: 2.4rem; line-height: 1.1667; margin-top: 2.3333em; margin-bottom: 1.1667em; }
  .site-info { font-size: 1.4rem; }
}

/* --- 77.5em (1240px) ---------------------------------------------------- */

@media screen and (min-width: 77.5em) {
  body { font-size: 1.9rem; line-height: 1.6842; }
  p, address, pre, hr, ul, ol, dl, dd, table { margin-bottom: 1.6842em; }
  .site-title { font-size: 2.7rem; line-height: 1.1852; }
  .main-navigation { font-size: 1.6rem; }
  .main-navigation a { padding: 0.5em 0; }
  .post-thumbnail { margin-bottom: 2.9474em; }
  .entry-title { font-size: 3.9rem; line-height: 1.2308; margin-bottom: 1.2308em; }
  .entry-content h2 { font-size: 3.2rem; line-height: 1.25; margin-top: 2em; margin-bottom: 1em; }
  .entry-content h3 { font-size: 2.7rem; line-height: 1.1852; margin-top: 2.3704em; margin-bottom: 1.1852em; }
  .site-info { font-size: 1.6rem; }
}

/* --- 87.6875em (1403px): Streifen folgt der zentrierten Seite ----------- */

@media screen and (min-width: 87.6875em) {
  body::before { width: calc(50% - 289px); }
}