/*
 * Texte von Matthias Küntzel – statische Version
 * Basiert auf /contents/res/css/app.css (Textpattern-Theme "Yeah but still"),
 * ohne Foundation/jQuery. Breakpoints wie Foundation: 30em, 40em, 64em.
 */

/* Schriften lokal eingebunden (keine Verbindung zu Google Fonts).
   Variable Fonts von fonts.gstatic.com, SIL Open Font License. */

@font-face {
  font-family: "Alegreya";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/alegreya-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Alegreya";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/alegreya-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Alegreya";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/alegreya-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Alegreya";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/alegreya-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Chivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/chivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Chivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/chivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --blue: #009bb9;
  --blue-light: #9ED5EC;
  --text: #444;
  --bg: #efefef;
  --footer-bg: #4e4e4e;
}

/* ---------- Basis ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: "Alegreya", serif;
  font-size: .9555rem;
  line-height: 1.6;
  hyphens: auto;
  -webkit-font-smoothing: antialiased;
}
@media screen and (min-width: 480px)  { body { font-size: 1.1025rem; } }
@media screen and (min-width: 1024px) { body { font-size: 1.2495rem; } }

img { max-width: 100%; height: auto; display: inline-block; vertical-align: middle; }

h1, h2, h3 { line-height: 1.4; margin-top: 0; }

h2 {
  color: var(--blue);
  font-family: "Chivo", sans-serif;
  font-weight: bold;
  text-align: center;
  font-size: 1.176rem;
  margin-bottom: 1.5rem;
}
@media screen and (min-width: 480px)  { h2 { font-size: 1.2495rem; margin-bottom: 2rem; } }
@media screen and (min-width: 640px)  { h2 { font-size: 1.3965rem; margin-bottom: 2.375rem; } }
@media screen and (min-width: 1024px) { h2 { font-size: 1.617rem;  margin-bottom: 2.875rem; } }

p { margin: 0 0 .8125rem; }
@media screen and (min-width: 480px)  { p { margin-bottom: .9375rem; } }
@media screen and (min-width: 1024px) { p { margin-bottom: 1.0625rem; } }

ul, ol { margin: 0; }

a {
  border-bottom: 1px solid rgba(68, 68, 68, .6);
  color: var(--text);
  text-decoration: none;
  transition: all .2s;
}
a:hover,
a:focus { border-bottom-color: rgba(0, 155, 185, .6); color: var(--blue); outline: none; }

button {
  background: none;
  border: 0;
  font: inherit;
  transition: all .2s;
}
button:hover { cursor: pointer; }
button:focus { outline: none; }

input { font: inherit; }

::placeholder { color: #3FA7D6; opacity: 1; }

.container { max-width: 75rem; margin: 0 auto; }

/* Chivo für Navigation & Footer */
.meta-navi,
.site-navi,
.footer {
  font-family: "Chivo", sans-serif;
  font-size: .75rem;
}
@media screen and (min-width: 480px)  { .meta-navi, .site-navi, .footer { font-size: .8125rem; } }
@media screen and (min-width: 1024px) { .meta-navi, .site-navi, .footer { font-size: .9375rem; } }

.meta-navi a,
.site-navi a,
.footer a { border-bottom: 1px solid transparent; }

/* Skip-Links: nur bei Tastaturfokus sichtbar */
#accessibility a {
  position: absolute;
  left: -999rem;
  z-index: 2000;
  background: #fff;
  padding: .5rem 1rem;
}
#accessibility a:focus { left: 1rem; top: 1rem; }

/* ---------- Header ---------- */

.header {
  position: relative;
  z-index: 10;
  box-shadow: 0 0 1.25rem 0 rgba(0, 0, 0, .4);
  overflow: hidden;
}

.meta-navi {
  background-color: #fff;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
.meta-navi .menu-trigger { order: 1; text-align: left; }
.meta-navi .meta-navi-links { order: 2; margin: 0; }
.meta-navi .searchbox { order: 3; }

.meta-navi a,
.meta-navi .menu-trigger {
  border: 0 none !important;
  color: var(--blue);
  display: inline-block;
  padding: .625rem .3125rem;
}
.meta-navi a:hover,
.meta-navi a:focus,
.meta-navi .menu-trigger:hover,
.meta-navi .menu-trigger:focus { color: var(--blue) !important; }
@media screen and (min-width: 20em) { .meta-navi a, .meta-navi .menu-trigger { padding: .625rem .5rem; } }
@media screen and (min-width: 30em) { .meta-navi a, .meta-navi .menu-trigger { padding: .625rem; } }

.meta-navi .menu-trigger { padding-top: .4375rem; }
.meta-navi .menu-icon {
  display: inline-block;
  font-size: 1.5em;
  line-height: 1;
  vertical-align: -.1em;
  text-rendering: geometricPrecision;
}

.searchbox input[type="text"] {
  border: 1px solid var(--blue);
  border-radius: 0;
  color: var(--text);
  display: inline-block;
  padding: .3125rem;
  transition: all .2s;
}
.searchbox input[type="text"]:focus { border-color: #fff; outline: none; }

.header .searchbox { margin-left: auto; margin-right: .625rem; text-align: right; }
.header .searchbox input[type="text"] { border-color: var(--blue-light); width: 12.5rem; }
.header .searchbox input[type="text"]:focus { border-color: var(--blue); }
@media screen and (max-width: 46.25em) { .header .searchbox { display: none; } }

/* Logo-Band */
.logo-tagline {
  background-color: var(--blue);
  border-bottom: 0 none;
  color: #fff;
  display: block;
  line-height: 1.2;
  padding: 2.5rem .625rem 3rem;
  text-align: center;
}
.logo-tagline:hover,
.logo-tagline:focus { border-bottom: 0 none; color: #fff; }
.logo-tagline .logo { width: 15rem; max-width: 100%; height: auto; }

/* ---------- Off-Canvas-Navigation ("Themen") ---------- */

.off-canvas {
  background-color: var(--blue);
  color: #fff;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1100;
  width: 250px;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform .5s ease, box-shadow .5s ease;
  visibility: hidden;
}
.off-canvas.is-open {
  transform: none;
  box-shadow: 0 0 5rem rgba(68, 68, 68, .5);
  visibility: visible;
}

.off-canvas-overlay {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(255, 255, 255, .25);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility .5s ease;
}
.off-canvas-overlay.is-visible { opacity: 1; visibility: visible; }

.site-navi { padding: 1.25rem; }
.site-navi .close-button {
  color: #fff;
  font-size: 2em;
  line-height: 1;
  position: absolute;
  right: 1.25rem;
  top: .5rem;
  padding: 0;
}
.site-navi h2 { color: #fff; margin: 1.25rem 0; text-align: left; font-size: 1.2495rem; }
.site-navi a,
.site-navi a:hover,
.site-navi a:focus { color: #fff; }

.off-canvas .searchbox { margin: .625rem 0 1.875rem; }
.off-canvas .searchbox input[type="text"] { width: 100%; }
@media screen and (min-width: 46.3125em) { .off-canvas .searchbox { display: none; } }

.cat-list { list-style-type: none; padding: 0; }
.cat-list .cat-list { padding-left: 1.25rem; }
.cat-list a {
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  display: block;
  padding: .375rem 0;
}
.cat-list .li-header { border: 0 none; display: block; padding: .375rem 0; }
.cat-list .cat-list a { padding-left: 1.25rem; position: relative; }
.cat-list .cat-list a::before {
  content: "—";
  left: 0;
  opacity: .75;
  position: absolute;
  top: .375rem;
}
@media screen and (min-width: 64em) {
  .cat-list a,
  .cat-list .li-header { padding: .625rem 0; }
  .cat-list .cat-list a::before { top: .625rem; }
}
.cat-list.books li { border-bottom: 1px solid rgba(255, 255, 255, .3); }
.cat-list.books ul li,
.cat-list.books a { border: 0 none; }

/* ---------- Intro ---------- */

#intro {
  font-size: 1.029rem;
  hyphens: none;
  padding: 5rem .625rem 1.25rem;
  text-align: center;
}
@media screen and (min-width: 480px)  { #intro { font-size: 1.176rem; } }
@media screen and (min-width: 640px)  { #intro { font-size: 1.2495rem; } }
@media screen and (min-width: 1024px) { #intro { font-size: 1.3965rem; } }

#intro h3 { margin-block-end: .25em;}
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
  #intro p { width: 66.66667%; margin-left: auto; margin-right: auto; }
}
@media screen and (min-width: 64em) {
  #intro p { width: 50%; margin-left: auto; margin-right: auto; }
}

/* ---------- Unterseiten (z. B. Impressum) ---------- */

#content {
  padding: 5rem .625rem 2.5rem;
  margin-bottom: 5rem;
}
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
  #content { width: 66.66667%; margin-left: auto; margin-right: auto; }
}
@media screen and (min-width: 64em) {
  #content { width: 50%; margin-left: auto; margin-right: auto; }
}

#content h1.article-title {
  color: var(--text);
  font-size: 1.764rem;
  margin-bottom: 1.5rem;
  text-align: center;
}
@media screen and (min-width: 480px)  { #content h1.article-title { font-size: 2.352rem; margin-bottom: 2rem; } }
@media screen and (min-width: 640px)  { #content h1.article-title { font-size: 2.793rem; margin-bottom: 2.375rem; } }
@media screen and (min-width: 1024px) { #content h1.article-title { font-size: 3.381rem; margin-bottom: 2.875rem; } }

/* ---------- Neuestes Buch / Neueste Artikel ---------- */

#sidebar-2 { padding-top: 2.5rem; }
#sidebar-2 h2 { font-size: 1.375rem; }
@media screen and (min-width: 30em) { #sidebar-2 h2 { font-size: 1.5rem; } }
@media screen and (min-width: 40em) { #sidebar-2 h2 { font-size: 1.625rem; } }
@media screen and (min-width: 64em) { #sidebar-2 h2 { font-size: 2rem; } }

.books-container {
  margin-bottom: 5rem;
  padding-left: .625rem;
  padding-right: .625rem;
}
@media screen and (min-width: 40em) { .books-container { width: calc(66.66667% - 1.875rem); margin-left: auto; margin-right: auto; } }
@media screen and (min-width: 64em) { .books-container { width: calc(50% - 1.875rem); } }

.book { overflow: hidden; }
.book a { border: 0 none; display: block; }
.book .title { font-weight: bold; margin: 0; padding: .625rem 0; }
.book .book-cover { float: left; margin-right: 1.25rem; width: 145px; }
.book .book-links { list-style-type: none; margin-left: 10.3125rem; padding: 0; }
.book .book-links a { padding-left: 1.5rem; position: relative; }
.book .book-links a::before {
  content: "—";
  left: 0;
  opacity: .75;
  position: absolute;
  top: -.0625rem;
}

.articles-container { max-width: 75rem; margin: 0 auto 5rem; }

.latest-articles {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  list-style-type: none;
  padding: 0;
}
.latest-articles li {
  width: calc(100% - 1.25rem);
  margin: 0 .625rem 1.25rem;
}
@media screen and (min-width: 40em) { .latest-articles li { width: calc(50% - 1.875rem); margin: 0 .9375rem 1.875rem; } }
@media screen and (min-width: 64em) { .latest-articles li { width: calc(33.33333% - 1.875rem); } }

.latest-articles a {
  background-color: #fff;
  border: 0;
  border-radius: .1875rem;
  box-shadow: 0 .125rem .3125rem 0 rgba(0, 0, 0, .1);
  display: block;
  overflow: hidden;
  padding: 0 0 1.875rem;
}
.latest-articles a:hover,
.latest-articles a:focus {
  box-shadow: 0 0 1.875rem 0 rgba(0, 0, 0, .25);
  color: inherit;
  transform: translateY(-2px);
}
.latest-articles a:hover .subheader,
.latest-articles a:focus .subheader { opacity: 1; }
.latest-articles a:hover .whenwhere,
.latest-articles a:focus .whenwhere { opacity: .75; }

.latest-articles img {
  border-bottom: 3px solid var(--blue);
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.latest-articles h3 {
  color: var(--blue);
  font-size: 1.176rem;
  font-weight: bold;
  margin: .75em 1.25rem 0;
}
@media screen and (min-width: 480px)  { .latest-articles h3 { font-size: 1.2495rem; } }
@media screen and (min-width: 640px)  { .latest-articles h3 { font-size: 1.3965rem; } }
@media screen and (min-width: 1024px) { .latest-articles h3 { font-size: 1.617rem; } }

.latest-articles .subheader {
  color: var(--text);
  line-height: 1.4;
  margin: .625rem 1.25rem 0;
  opacity: .5;
  transition: opacity .2s;
}
.latest-articles .whenwhere {
  font-family: "Chivo", sans-serif;
  font-size: .75rem;
  margin: .625rem 1.25rem 0;
  opacity: .35;
  transition: opacity .2s;
}
@media screen and (min-width: 480px)  { .latest-articles .whenwhere { font-size: .8125rem; } }
@media screen and (min-width: 1024px) { .latest-articles .whenwhere { font-size: .9375rem; } }

/* ---------- Footer ---------- */

.footer {
  background-color: var(--footer-bg);
  border-top: 10px solid var(--blue);
  color: #fff;
  padding: 2.5rem 1.25rem;
  text-align: center;
}
.footer p { margin: 0; }
.footer a,
.footer a:hover,
.footer a:focus { color: #fff; }
.footer a:hover,
.footer a:focus { border-bottom-color: rgba(255, 255, 255, .6); }