/*
 * 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;
  /* Dunkleres Blau fuer kleine Schrift und hinter kleiner weisser Schrift (Kontrast mind. 4,5 : 1) */
  --blue-dark: #00758c;
  --grau: #6b6b6b;
  --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%; }
/* Sprungziele (Fussnoten, Tastaturfokus) nicht unter der festen Kopfleiste verstecken */
@media screen and (min-width: 30em) { html { scroll-padding-top: 4rem; } }

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-dark); 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: var(--blue-dark); 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-dark);
  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-dark) !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;
}

/* Suchfelder sollen wie schlichte Textfelder aussehen (Safari zeichnet type="search" sonst rund) */
input[type="search"] { -webkit-appearance: none; appearance: none; background-color: #fff; border-radius: 0; box-sizing: border-box; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }

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

.header .searchbox { margin-left: auto; margin-right: .625rem; text-align: right; }
.header .searchbox input[type="search"] { border-color: var(--blue-dark); width: 12.5rem; }
.header .searchbox input[type="search"]:focus { border-color: var(--blue-dark); }
@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-dark);
  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="search"] { 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: 1; }

.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: .75;
  transition: opacity .2s;
}
.latest-articles .whenwhere {
  font-family: "Chivo", sans-serif;
  font-size: .75rem;
  margin: .625rem 1.25rem 0;
  opacity: .75;
  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); }

/* ==========================================================================
   Ergaenzungen fuer die vollstaendige Website (Artikelseiten, Themenlisten, Suche)
   ========================================================================== */

/* ---------- Kleiner Kopf auf Unterseiten ---------- */

.sub .logo-tagline { padding: 1.25rem .625rem 1.5rem; }
.sub .logo-tagline .logo { width: 20rem; }

.meta-navi .searchbox input[type="search"] { margin: 0; }

/* ---------- Schmale Leiste nach dem Scrollen ----------
   js/site.js setzt .sticky, sobald der Kopf aus dem Bild gescrollt ist,
   und kurz danach .sichtbar, damit die Leiste hereingleitet. */

.logo-tagline .logo-leiste { display: none; }

@media screen and (min-width: 30em) {
  .header.sticky {
    background-color: var(--blue);
    height: 3.125rem;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    transform: translateY(-110%);
    transition: transform .2s;
    z-index: 1000;
  }
  .header.sticky.sichtbar { transform: none; }

  .header.sticky .meta-navi { background-color: transparent; flex-wrap: nowrap; height: 3.125rem; }
  .header.sticky .meta-navi-links,
  .header.sticky .menu-trigger-label { display: none; }
  .header.sticky .meta-navi .menu-trigger { padding-top: .5rem; }
  .header.sticky .meta-navi .menu-trigger,
  .header.sticky .meta-navi .menu-trigger:hover,
  .header.sticky .meta-navi .menu-trigger:focus { color: #fff !important; }
  .header.sticky .searchbox input[type="search"] { background: #fff; border-color: #fff; }

  .header.sticky .logo-tagline {
    background-color: transparent;
    left: 3.125rem;
    padding: 0;
    position: absolute;
    top: .625rem;
  }
  .header.sticky .logo-tagline .logo-haupt { display: none; }
  .header.sticky .logo-tagline .logo-leiste { display: block; width: 14rem; }
}

/* ---------- Artikel ---------- */

.sub #content { padding-top: 3rem; border-bottom: 1px solid #cacaca; }

#content .subheader {
  font-size: 1.176rem;
  margin-bottom: 1.5rem;
  text-align: center;
}
@media screen and (min-width: 480px)  { #content .subheader { font-size: 1.2495rem; margin-bottom: 2rem; } }
@media screen and (min-width: 640px)  { #content .subheader { font-size: 1.3965rem; margin-bottom: 2.375rem; } }
@media screen and (min-width: 1024px) { #content .subheader { font-size: 1.617rem;  margin-bottom: 2.875rem; } }

.article-img img {
  border-bottom: 3px solid var(--blue);
  display: block;
  margin: 0 auto;
}
.article-img.book-img img { border-bottom: 0; max-width: 12rem; }

.author { font-style: italic; margin: 1.875rem 0 0; text-align: center; }
.source { color: var(--grau); font-size: .9em; margin: 0 0 1.5rem; text-align: center; }
/* Seitenspalte: Teilen-Symbole, Sprachfassungen, PDF- und Druckansicht.
   Ab 40em steht sie links neben dem Text, darunter ueber dem Text;
   die Teilen-Symbole liegen auf kleinen Bildschirmen als Leiste am unteren Rand. */

#content { position: relative; }
@media screen and (min-width: 64em) { #content { max-width: 43.75rem; } }

@media screen and (max-width: 29.9375em) {
  .meta { margin-top: 2.5rem; padding-bottom: 1.25rem; text-align: center; }
  .meta .options li { display: inline-block; }
  .meta .options li + li { margin-left: .625rem; }
}
@media screen and (min-width: 30em) and (max-width: 39.9375em) {
  .meta { float: right; margin-top: 2.5rem; padding: 0 0 1.25rem 1.25rem; width: 8.75rem; }
  .meta + .article-text { margin-top: 2.5rem; }
}
@media screen and (min-width: 40em) {
  .meta { position: absolute; right: calc(100% + .625rem); width: calc(25% - 1.5625rem); }
}
@media screen and (min-width: 64em) {
  .meta { right: calc(100% + 3.5rem); width: 11.875rem; }
}

.options, .share-link {
  font-family: "Chivo", sans-serif;
  font-size: .75rem;
}
@media screen and (min-width: 480px)  { .options, .share-link { font-size: .8125rem; } }
@media screen and (min-width: 1024px) { .options, .share-link { font-size: .9375rem; } }

.options { color: var(--grau); list-style-type: none; margin: 0; padding-left: 0; }
.options a { border-bottom: 1px solid transparent; color: var(--grau); display: inline-block; margin: .3125rem 0; }
.options a:hover, .options a:focus { border-bottom: 1px solid var(--blue-dark); color: var(--blue-dark); }
@media screen and (min-width: 40em) { .options { margin-top: 1.875rem; } }

.share-list { list-style-type: none; margin: 0; padding: 0; position: relative; }
.share-list li { display: inline-block; margin-right: .5rem; }
.share-list li:last-child { margin-right: 0; }
@media screen and (min-width: 64em) { .share-list li { margin-right: .625rem; } }
@media screen and (max-width: 39.9375em) {
  .share-list {
    background: #fff;
    border-top: 1px solid #e4e4e4;
    bottom: 0;
    box-shadow: 0 0 1.25rem 0 rgba(0, 0, 0, .4);
    left: 0;
    padding: .3125rem 0;
    position: fixed;
    right: 0;
    text-align: center;
    z-index: 1000;
  }
  .share-list li { margin: 0 .625rem; width: 2rem; }
  /* Platz, damit die Leiste den Seitenfuss nicht verdeckt */
  .sub .footer { padding-bottom: 5rem; }
}
.share-link { border: 0 none !important; display: block; padding: .3125rem 0; }
.share-icon {
  background-color: var(--blue);
  border-radius: 1rem;
  display: block;
  height: 2rem;
  overflow: hidden;
  position: relative;
  text-align: center;
  transition: background-color .2s;
  width: 2rem;
  z-index: 101;
}
.share-icon svg { display: inline-block; height: 1.25rem; margin-top: .375rem; width: 1.25rem; }
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
  .share-icon { border-radius: .75rem; height: 1.5rem; width: 1.5rem; }
  .share-icon svg { height: 1rem; margin-top: .25rem; width: 1rem; }
}
.share-text {
  background-color: #fff;
  color: var(--text);
  display: block;
  height: 0;
  left: -.625rem;
  line-height: 2.5rem;
  opacity: .0001;
  overflow: hidden;
  padding-left: .625rem;
  position: absolute;
  top: 1.875rem;
  transition: height .2s, opacity .4s;
  width: 10.25rem;
  z-index: 100;
}
@media screen and (min-width: 64em) { .share-text { top: 2.25rem; width: 12.5rem; } }
@media screen and (min-width: 40em) {
  .share-link:hover .share-text, .share-link:focus .share-text { height: 2.5rem; opacity: 1; }
}

/* Knoepfe der Druckansicht; sichtbar macht sie erst print.css */
.druckleiste { display: none; }

.article-text { margin-top: 2.5rem; }
.article-text h2, .article-text h3, .article-text h4, .article-text h5 {
  color: var(--text);
  font-family: "Alegreya", serif;
  font-weight: bold;
  line-height: 1.4;
  margin: 2em 0 .6em;
  text-align: left;
}
.article-text h2 { font-size: 1.45em; }
.article-text h3 { font-size: 1.25em; }
.article-text h4 { font-size: 1.1em; }
.article-text h5 { font-size: 1em; font-style: italic; }
.article-text ul, .article-text ol { margin: 0 0 1em; padding-left: 1.5em; }
.article-text li { margin-bottom: .35em; }
.article-text a { overflow-wrap: anywhere; }

/* Zitat: kursiv, dahinter ein grosses Anfuehrungszeichen in der Form der jeweiligen Sprache */
blockquote { font-style: italic; isolation: isolate; margin: 1em 0; padding: 1em; position: relative; }
blockquote::before,
blockquote::after {
  color: var(--blue);
  font-family: "Alegreya", serif;
  font-size: 9em;
  font-style: normal;
  font-weight: bold;
  line-height: 1;
  opacity: .22;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}
/* Das deutsche Zeichen steht vorn unten (an der Grundlinie der ersten Zeile) und hinten oben */
blockquote::before { content: "\201E"; left: -.3em; top: -.5em; }
blockquote::after { content: "\201C"; right: -.3em; bottom: -.35em; }
/* Englisch: beide Zeichen oben; Franzoesisch: Guillemets */
blockquote:lang(en)::before { content: "\201C"; top: -.1em; }
blockquote:lang(en)::after { content: "\201D"; bottom: -.45em; }
blockquote:lang(fr)::before { content: "\00AB"; top: -.22em; }
blockquote:lang(fr)::after { content: "\00BB"; bottom: -.15em; }
/* Auf schmalen Bildschirmen ist neben dem Text kein Platz: Zeichen innerhalb des Rands halten */
@media screen and (max-width: 39.9375em) {
  blockquote::before { left: -.04em; }
  blockquote::after { right: -.04em; }
}
@media screen and (min-width: 40em) { blockquote { margin: 1em; } }
@media screen and (min-width: 64em) { blockquote { margin: 1em 2em; padding: 2em; } }
blockquote p:last-child { margin: 0; }

sup { font-size: .7em; line-height: 0; }
sup a { border-bottom: 0; color: var(--blue-dark); }
p.footnote { font-size: .9em; }

/* ---------- Themenlisten ---------- */

.sub #sidebar-2 { padding-top: 3rem; }
h1.list-title {
  color: var(--blue);
  font-family: "Chivo", sans-serif;
  font-size: 1.375rem;
  font-weight: bold;
  margin-bottom: 2rem;
  padding: 0 .625rem;
  text-align: center;
}
@media screen and (min-width: 40em) { h1.list-title { font-size: 1.625rem; margin-bottom: 2.375rem; } }
@media screen and (min-width: 64em) { h1.list-title { font-size: 2rem; margin-bottom: 2.875rem; } }

/* ---------- Suche ---------- */

.search-form { display: flex; gap: .5rem; margin-bottom: 2rem; }
.search-form input[type="search"] {
  border: 1px solid var(--blue);
  flex: 1;
  min-width: 0;
  padding: .5rem .625rem;
}
.search-form button {
  background: var(--blue-dark);
  color: #fff;
  font-family: "Chivo", sans-serif;
  padding: .5rem 1.25rem;
}
.search-note { color: var(--grau); text-align: center; }
.search-results { list-style-type: none; padding: 0; }
.search-results li { border-top: 1px solid #cacaca; }
.search-results a { border: 0; display: block; padding: 1.25rem .625rem; }
.search-results a:hover, .search-results a:focus { background: #fff; color: inherit; }
.search-results h2 { font-family: "Alegreya", serif; font-size: 1.25em; margin: 0 0 .25em; text-align: left; }
.search-results .subheader { font-size: 1em !important; margin: 0 0 .5em !important; text-align: left !important; }
.search-results .excerpt { font-size: .9em; margin: 0 0 .5em; opacity: .8; }
.search-results .whenwhere { font-family: "Chivo", sans-serif; font-size: .8125rem; margin: 0; opacity: .8; }
mark { background: #fff3a8; color: inherit; padding: 0 .1em; }

/* ==========================================================================
   Barrierefreiheit
   ========================================================================== */

/* Nur fuer Screenreader: Text ist vorhanden, aber nicht sichtbar */
.nur-vorlesen {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Das Logo ist auf den Startseiten die Hauptueberschrift, soll aber aussehen wie bisher */
.logo-zeile { font-size: inherit; font-weight: inherit; line-height: inherit; margin: 0; }

.footer-zeile nav { display: inline; }
.zentriert { text-align: center; }

/* Sichtbarer Rahmen bei Bedienung mit der Tastatur (nicht beim Klick mit der Maus) */
a:focus-visible,
button:focus-visible,
input:focus-visible { outline: 3px solid var(--blue-dark); outline-offset: 2px; }
/* Auf blauem und dunklem Grund ein weisser Rahmen */
.off-canvas a:focus-visible,
.off-canvas button:focus-visible,
.off-canvas input:focus-visible,
.footer a:focus-visible,
.header.sticky .menu-trigger:focus-visible,
.header.sticky input:focus-visible { outline-color: #fff; }
/* Der Kopf schneidet Ueberstehendes ab: Rahmen dort nach innen legen */
.meta-navi a:focus-visible,
.meta-navi .menu-trigger:focus-visible,
.meta-navi input:focus-visible { outline-offset: -3px; }
.logo-tagline:focus-visible { outline-color: #fff; outline-offset: -6px; }
.latest-articles a:focus-visible,
.search-results a:focus-visible { outline-offset: 3px; }
.share-link:focus-visible { outline: 0; }
.share-link:focus-visible .share-icon { outline: 3px solid var(--blue-dark); outline-offset: 2px; }

/* Wer im System "Bewegung reduzieren" eingestellt hat, bekommt keine Animationen */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .latest-articles a:hover, .latest-articles a:focus { transform: none; }
}