body {
  padding-bottom: 0;
  letter-spacing: 1pt;
}
a.anchor { display: none; }


/* ======== HEADER ========= */

header { padding: .625em; }

header,
header > p {
  text-align: center;
  z-index: 2;
}
header > p > a,
header > p > a img {
  max-width: 400px;
}

header .menu {
  display: block;
  text-align: right;
  background-color: #F9F9F9;
}
header .menu > ul,
header .menu > ul li p {
  margin-bottom: unset;
}
header .menu > ul li {
  margin: 0;
}
header .menu > ul > li a {
  display: inline-block;
  font-style: normal;
  text-decoration: none;
  letter-spacing: 2pt;
  padding: 1.25em .75em;
  color: #000;
}
header .menu > ul > li a:hover {
  -color: #FAB100;
  -color: #D80;
  color: #B70;
}

header .menu.dropdown li > ul {
  min-width: 15em;
  font-size: .75em;
  text-align: left;
  padding: 0;
  box-shadow: none;
  z-index: 1;
}
header .menu.dropdown li > ul a {
  width: 100%;
  padding: .75em 1em;
  color: #37C;
  border-bottom: 1pt solid #EEE;
}
header .menu.dropdown li > ul li {
  display: block;
}
header .menu.dropdown li > ul a:hover {
  background-color: #EEE;
}

header .error {
    display: block;
    float: none;
    width: 100%;
    height: auto;
    padding: 1em 10em;
    background: #FCC;
    z-index: 0;
}


/* ======== FOOTER ========= */

footer {
  position: static;
  text-align: center;
  margin: 0 0 0 0;
  padding: 0 0 .125em 0;
  color: #FFF;
  background-color: #262626;
}
footer h2 {
  color: #FAB100;
  font-weight: normal;
  margin: .5em 0;
}
footer .smbuttons {
  width: 100%;
  padding: .125em 1em;
  background-color: #3C3F4A
}
footer .smbuttons h2 {
  font-size: 1.5em;
}
footer .smbuttons > section > p a {
  display: inline-block;
  margin: 0 .75em;
  color: transparent;
  width: 2.5em; height: 2.5em;
  background-image: url("/[wiki]/footer/smicons.png");
  background-size: 7.5em;
  vertical-align: bottom;
}
footer .smbuttons > section > p a[title=Instagram] { background-position:   0% 0; }
footer .smbuttons > section > p a[title=Facebook]  { background-position:  50% 0; }
footer .smbuttons > section > p a[title=Youtube]   { background-position: 100% 0; }
footer .smbuttons > section > p a[title=Instagram]:hover { background-position:   0% 100%; }
footer .smbuttons > section > p a[title=Facebook]:hover  { background-position:  50% 100%; }
footer .smbuttons > section > p a[title=Youtube]:hover   { background-position: 100% 100%; }

footer .spenden,
footer .impressum {
  margin-bottom: 4em;
  padding: 0 3em;
  vertical-align: middle;
}
footer div.spenden {
  text-align: left;
}
footer div.spenden table td {
  font-size: 1.125em;
  font-size: 10pt;
  padding: 0;
  vertical-align: top;
}
footer div.spenden table td:first-child {
  min-width: 30vw;
}
footer div.impressum img {
  width: 35%;
  min-width: 256px;
}
footer div.impressum a {
  font-style: normal;
  text-decoration: none;
  color: #FFF;
  margin: 0 1em;
}
footer div.impressum a:hover {
  color: #FAB100;
}


/* ======== MAIN ========= */

main { overflow: hidden; }

main > .pagemenu {
  position: absolute;
  top: 0em; width: 100%;
  text-align: right;
  z-index: 1;
}

main > .pagemenu + :not(article) {
  margin-top: 2.25em !important;
}

main article {
  font-size: 14pt;
  line-height: 1.5em;
  margin: 0;
  padding: 0 5%;
  padding-top: 4em;
  padding-bottom: 4em;
  box-shadow: none;
}
main article.include {
  margin: 0;
  padding: 0;
}

main article > figure,
main article section > figure {
  margin: 1em 0;
  text-align: center;
  width: 100%;
}

main article h1 {
  clear: both;
  font-size: 2em;
  font-weight: normal;
  line-height: 1.125em;
  -color: #FAB100;
  -color: #D80;
  color: #B70;
  margin-bottom: .75em;
}

main article h2 {
  clear: both;
  font-size: 1.5em;
  font-weight: normal;
  margin-top: 3em;
  margin-bottom: 2em;
  -color: #3C3F4A;
  -color: #D80;
  color: #B70;
}

main article h1 + section > h2 {
  margin-top: 0;
}

main article figure + section.h1,
main article figure + section.h2 {
  clear: none;
}

main article h3 {
  font-size: 1.25em;
  color: #444;
}

main article > h1:first-child {
  text-align: center;
}
main article > section.h1:first-child > h1,
main article > section.h2:first-child > h2,
main article > section.h3:first-child > h3 {
  margin-top: 0;
  padding-top: 2em;
}

main article a {
  -color: #FAB100;
  text-decoration: none;
  font-style: normal;
}

main article hr {
  color: #AAA;
  margin: 1em 0;
  border-width: 1.125pt;
}

main article ul,
main article ol {
  padding-left: 0;
}
main article ul li,
main article ol li {
  position: relative;
  left: 1.25em;
  margin-right: 1.25em;
}

main blockquote {
  background-color: inherit;
  text-align: center;
  font-style: italic;
}

main article .half {
  display: inline-block;
  vertical-align: top;
  width: 98%;
  margin-right: 2%;
}
main article .center {
  text-align: center;
}
main article img.round {
  border-radius: 50%;
}

main article > figure:first-child {
  display: none;
  margin-top: 396pt;
}
main article > figure:first-child img {
  position: fixed;
  top: 50vh; left: 0;
  transform: translate(0, -50%);
  min-width: 100%;
  min-height: 100vh;
  object-fit: cover;
  z-index: -2;
}
main article > figure:first-child + section.h1 > h1 {
  display: none;
  position: relative;
  top: -5em; height: 0;
  -transform: translate(0, -50%);
  font-size: 44pt;
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 .25em #111;
  max-width: 100%;
  margin: 1em 1em 1em 1em;
  color: #FFF;
}
main article > figure:first-child + section.h1 > h1:before {
  content: ' ';
  position: fixed;
  left: -100%; right: -100%;
  top: -5em; bottom: -5em;
  background-color: #222;
  opacity: .5;
  z-index: -1;
}

main article > figure:first-child + section.h1 > h1 > img {
  display: block;
  margin: 0 auto;
  max-height: 3em;
}
main article > figure:first-child + section.h1 > h1 > em {
  display: block;
  font-size: .5em;
  text-transform: none;
  font-style: normal;
  font-weight: bold;
}


body[id$="/[edit]"] main {
  padding-top: 3em;
}
.tab[name=edithelp] ~ .tab.editor textarea,
.tab[name=edithelp] ~ .tab.syntax,
.tab[name=edithelp] ~ .tab.attach,
.tab[name=edithelp] ~ .tab.transl {
  background-color: #FFF;
  height: 30em; height: 60vh;
  overflow-y: scroll;
}


/* Text shadow o front page */
/*
body[id="/"] main > article > p,
body[id^="/:"] main > article > p,
body[id="/"] main > article > section > p,
body[id^="/:"] main > article > section > p {
  text-shadow: 0 0 .25em #AAA;
}
*/


/* ============ LEICHTE SPRACHE ============= */

html[lang="de-leicht"] main > article {
  line-height: 2.5em;
}
html[lang="de-leicht"] main > article > p,
html[lang="de-leicht"] main > article > ul,
html[lang="de-leicht"] main > article > ol,
html[lang="de-leicht"] main > article > dl,
html[lang="de-leicht"] main > article > table,
html[lang="de-leicht"] main > article section > p,
html[lang="de-leicht"] main > article section > ul,
html[lang="de-leicht"] main > article section > ol,
html[lang="de-leicht"] main > article section > dl,
html[lang="de-leicht"] main > article section > table {
  white-space: pre-line;
  margin-bottom: 4em;
}
html[lang="de-leicht"] main > article > p + ul,
html[lang="de-leicht"] main > article > p + ol,
html[lang="de-leicht"] main > article > p + dl,
html[lang="de-leicht"] main > article > p + table,
html[lang="de-leicht"] main > article section > p + ul,
html[lang="de-leicht"] main > article section > p + ol,
html[lang="de-leicht"] main > article section > p + dl,
html[lang="de-leicht"] main > article section > p + table {
  margin-top: -3.5em;
}
html[lang="de-leicht"] main > article ul,
html[lang="de-leicht"] main > article ol,
html[lang="de-leicht"] main > article dl {
  line-height: .75em;
}
html[lang="de-leicht"] main > article li {
  line-height: 2.5em;
}

html[lang="de-leicht"] main > article p br {
  display: none;
}


/* ============ SPECIAL ITEMS =========== */

body[id="/"] .macro.include,
body[id="/"] .macro.include article,
body[id^="/:"] .macro.include,
body[id^="/:"] .macro.include article {
  display: inline;
}

.macro.gallery {
  background-color: inherit;
}


section.collapse:not(:target) > * {
  display: none;
}
section.collapse > h1,section.collapse:not(:target) > h1,
section.collapse > h2,section.collapse:not(:target) > h2,
section.collapse > h3,section.collapse:not(:target) > h3,
section.collapse > h4,section.collapse:not(:target) > h4,
section.collapse > h5,section.collapse:not(:target) > h5,
section.collapse > h6 section.collapse:not(:target) > h6 {
  display: block;
  padding-left: 2em;
}
section.collapse > h1 > a.anchor,
section.collapse > h2 > a.anchor,
section.collapse > h3 > a.anchor,
section.collapse > h4 > a.anchor,
section.collapse > h5 > a.anchor,
section.collapse > h6 > a.anchor {
  display: inline;
  position: absolute;
  left: 0; top: 0;
  -color: #FAB100;
  -color: #D80;
  color: #B70;
}

section.collapse > h1 > a.anchor:before,
section.collapse > h2 > a.anchor:before,
section.collapse > h3 > a.anchor:before,
section.collapse > h4 > a.anchor:before,
section.collapse > h5 > a.anchor:before,
section.collapse > h6 > a.anchor:before {
  content: "\25B6 ";
}
section.collapse:target > h1 > a.anchor:before,
section.collapse:target > h2 > a.anchor:before,
section.collapse:target > h3 > a.anchor:before,
section.collapse:target > h4 > a.anchor:before,
section.collapse:target > h5 > a.anchor:before,
section.collapse:target > h6 > a.anchor:before {
  content: "\25BC ";
}


main article p > img[src^="/logos/"],
main article p > a > img[src^="/logos/"] {
  height: 6em;
}

.vcard {
  display: inline-block;
  width: 100%;
  text-align: center;
  letter-spacing: normal;
  margin-bottom: 1em;
  padding: 0 .5em;
  vertical-align: top;
  -color: #7A7A7A;
  color: #555;
  word-wrap: break-word;
}
.vcard img {
  display: block;
  width: 40%;
  margin: 0 auto;
  border-radius: 50%;
}
.vcard h3 {
  font-size: 1em;
  -color: #FAB100;
  -color: #D80;
  color: #B70;
}

article .page {
  position: relative;
  margin: 2em 0;
  padding: 1em;
  background-color: #F5F5F5;
  text-align: center;
  overflow: hidden;
}
article .page:hover {
  background-color: #CECCCC;
}
article .page h2 {
  font-size: 1.5em;
  margin: .75em 0;
}
article .page h2 a { -color: #FAB100; -color: #D80; color: #B70; }
article .page p {
  font-size: 11pt;
  letter-spacing: normal;
}
article .page img { max-width: 50%; }
article .page > :first-child {
  position: static;
}
article .page > :first-child img {
  display: none;
  position: absolute;
  top: 50%; left: auto; right: 0;
  width: 50%;
  transform: translate(0,-50%);
}
article .page:nth-of-type(2n) > :first-child img {
  left: 0; right: auto;
}

@media(min-width: 800px) {
  header > p {
    float: left;
    height: 1em;
    margin: .25em -1em 0 0;
  }
  header > p > a > img {
    width: 9.5em;
  }
  body[id$="]"] header > p > a > img,
  body[id^="/[wiki]"] header > p > a > img {
    width: 4em;
  }

  footer .spenden,
  footer .impressum {
    display: inline-block;
    width: 48%;
    margin-top: 2em;
  }
  footer div.spenden table td {
    font-size: 12pt;
  }
  footer div.spenden table td:first-child {
    min-width: 15vw;
  }

  main article {
    padding-top: 0;
  }

  main article .half {
    width: 48%;
  }
  main article h1 + section.half + section.half > h2 {
    margin-top: 0;
  }

  main article > figure.left,
  main article section > figure.left {
    float: left;
    width: auto;
    max-width: 45%;
    margin: 0 1em 1em 0;
    clear: both;
  }
  main article > figure.right,
  main article section > figure.right {
    float: right;
    width: auto;
    max-width: 45%;
    margin: 0 0 1em 1em;
    clear: both;
  }

  main article > figure:first-child,
  main article > figure:first-child + section.h1 > h1 {
    display: block;
  }

  .vcard { width: 32%; }

  article .page {
    min-height: 26vw;
    margin-bottom: 6em;
    padding: 3em 55% 1em 5%;
  }
  article .page:nth-of-type(2n) {
    padding: 3em 5% 1em 55%;
  }
  article .page > :first-child img {
    display: block;
  }
}