/*!
Theme Name: erk2023
Theme URI: https://www.erk-hamburg.de
Author: Florian Kloppe
Description: Evangelisch-reformierte Kirche - Relaunch 2023
Version: 1.0.0
Tags: custom-menu, featured-images

erk2023 is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

*/

/* Document
 * ========================================================================== */

/**
 * Add border box sizing in all browsers (opinionated).
 */

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

/**
 * 1. Add text decoration inheritance in all browsers (opinionated).
 * 2. Add vertical alignment inheritance in all browsers (opinionated).
 */

::before,
::after {
  text-decoration: inherit; /* 1 */
  vertical-align: inherit; /* 2 */
}

/**
 * 1. Use the default cursor in all browsers (opinionated).
 * 2. Change the line height in all browsers (opinionated).
 * 3. Use a 4-space tab width in all browsers (opinionated).
 * 4. Remove the grey highlight on links in iOS (opinionated).
 * 5. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 * 6. Breaks words to prevent overflow in all browsers (opinionated).
 */

html {
  cursor: default; /* 1 */
  line-height: 1.5; /* 2 */
  -moz-tab-size: 4; /* 3 */
  tab-size: 4; /* 3 */
  -webkit-tap-highlight-color: transparent /* 4 */;
  -ms-text-size-adjust: 100%; /* 5 */
  -webkit-text-size-adjust: 100%; /* 5 */
  word-break: break-word; /* 6 */
}

/* Sections
 * ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Edge, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
 * ========================================================================== */

/**
 * Remove the margin on nested lists in Chrome, Edge, IE, and Safari.
 */

dl dl,
dl ol,
dl ul,
ol dl,
ul dl {
  margin: 0;
}

/**
 * Remove the margin on nested lists in Edge 18- and IE.
 */

ol ol,
ol ul,
ul ol,
ul ul {
  margin: 0;
}

/**
 * 1. Add the correct sizing in Firefox.
 * 2. Show the overflow in Edge 18- and IE.
 */

hr {
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * Add the correct display in IE.
 */

main {
  display: block;
}

/**
 * Remove the list style on navigation lists in all browsers (opinionated).
 */

nav ol,
nav ul {
  list-style: none;
  padding: 0;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
 * ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * Add the correct text decoration in Edge 18-, IE, and Safari.
 */

abbr[title] {
  text-decoration: underline;
  text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/* Embedded content
 * ========================================================================== */

/*
 * Change the alignment on media elements in all browsers (opinionated).
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on iframes in all browsers (opinionated).
 */

iframe {
  border-style: none;
}

/**
 * Remove the border on images within links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Change the fill color to match the text color in all browsers (opinionated).
 */

svg:not([fill]) {
  fill: currentColor;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Tabular data
 * ========================================================================== */

/**
 * Collapse border spacing in all browsers (opinionated).
 */

table {
  border-collapse: collapse;
}

/* Forms
 * ========================================================================== */

/**
 * Remove the margin on controls in Safari.
 */

button,
input,
select {
  margin: 0;
}

/**
 * 1. Show the overflow in IE.
 * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE.
 */

button {
  overflow: visible; /* 1 */
  text-transform: none; /* 2 */
}

/**
 * Correct the inability to style buttons in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * 1. Change the inconsistent appearance in all browsers (opinionated).
 * 2. Correct the padding in Firefox.
 */

fieldset {
  border: 1px solid #a0a0a0; /* 1 */
  padding: 0.35em 0.75em 0.625em; /* 2 */
}

/**
 * Show the overflow in Edge 18- and IE.
 */

input {
  overflow: visible;
}

/**
 * 1. Correct the text wrapping in Edge 18- and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 */

legend {
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  white-space: normal; /* 1 */
}

/**
 * 1. Add the correct display in Edge 18- and IE.
 * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox.
 */

progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Remove the inheritance of text transform in Firefox.
 */

select {
  text-transform: none;
}

/**
 * 1. Remove the margin in Firefox and Safari.
 * 2. Remove the default vertical scrollbar in IE.
 * 3. Change the resize direction in all browsers (opinionated).
 */

textarea {
  margin: 0; /* 1 */
  overflow: auto; /* 2 */
  resize: vertical; /* 3 */
}

/**
 * Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
  padding: 0;
}

/**
 * 1. Correct the odd appearance in Chrome, Edge, and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Safari.
 */

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * Remove the inner padding in Chrome, Edge, and Safari on macOS.
 */

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style upload buttons in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * Remove the inner border and padding of focus outlines in Firefox.
 */

::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus outline styles unset by the previous rule in Firefox.
 */

:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Remove the additional :invalid styles in Firefox.
 */

:-moz-ui-invalid {
  box-shadow: none;
}

/* Interactive
 * ========================================================================== */

/*
 * Add the correct display in Edge 18- and IE.
 */

details {
  display: block;
}

/*
 * Add the correct styles in Edge 18-, IE, and Safari.
 */

dialog {
  background-color: white;
  border: solid;
  color: black;
  display: block;
  height: -moz-fit-content;
  height: -webkit-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
}

dialog:not([open]) {
  display: none;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Scripting
 * ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */

template {
  display: none;
}

/* User interaction
 * ========================================================================== */

/*
 * 1. Remove the tapping delay in IE 10.
 * 2. Remove the tapping delay on clickable elements
      in all browsers (opinionated).
 */

a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
  -ms-touch-action: manipulation; /* 1 */
  touch-action: manipulation; /* 2 */
}

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
  display: none;
}

/* Accessibility
 * ========================================================================== */

/**
 * Change the cursor on busy elements in all browsers (opinionated).
 */

[aria-busy="true"] {
  cursor: progress;
}

/*
 * Change the cursor on control elements in all browsers (opinionated).
 */

[aria-controls] {
  cursor: pointer;
}

/*
 * Change the cursor on disabled, not-editable, or otherwise
 * inoperable elements in all browsers (opinionated).
 */

[aria-disabled="true"],
[disabled] {
  cursor: not-allowed;
}

/*
 * Change the display on visually hidden accessible elements
 * in all browsers (opinionated).
 */

[aria-hidden="false"][hidden] {
  display: initial;
}

[aria-hidden="false"][hidden]:not(:focus) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}

/* CUSTOM
 * ========================================================================== */

:root {
  --width: 960px;
  --clearance: 30px;
  --topBackgroundHeight: 350px;
  --barHeight: 100px;
  --fullNavigationColumns: 4;
  --newsContentTopOverlap: 135px;
  --newsContentBetweenOverlap: 20px;
  --newsContent1TopOffset: 45px;
  --boxCalendarTopOverlap: 105px;
 
  --zIndexTopBackground: -1;
  --zIndexTopBar: 1000;
  --zIndexPageMask: 900;
  --zIndexTopOverlayNavigation: 1000;
}

/* --------------------------------------------- */
/* Structure */
/* --------------------------------------------- */

div#topBackground {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: var(--topBackgroundHeight);
  overflow: hidden;
  z-index: var(--zIndexTopBackground);
}
div#topBackground img {
  min-width: 100%;
  height: 100%;
  object-fit: cover;
  margin-right: 16px; /* no idea why... */
}

div.site {
  width: min-content;
  margin: 0 auto;
  padding: 0 var(--clearance);
}

header#topBar {
  display: flex;
  /*position: sticky;*/
  position: relative;
  top: 0px;
  width: var(--width);
  z-index: var(--zIndexTopBar);
  margin: var(--clearance) auto calc(var(--topBackgroundHeight) - var(--barHeight) - var(--clearance)) auto;
}
div#topLogo img {
  /*width: 160px;*/
  height: var(--barHeight);
}
div#topNavigation {
  flex-grow: 1;
  /*padding: 0 var(--clearance);*/
}

header#topBar label#topOverlayNavigationLabel {
  cursor: pointer;
  padding: 0 var(--clearance);
  padding-top: calc(var(--barHeight) / 2);
  position: relative;
  user-select: none;
}
header#topBar span#topOverlayNavigationIcon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}
header#topBar span#topOverlayNavigationIcon:before,
header#topBar span#topOverlayNavigationIcon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}
header#topBar span#topOverlayNavigationIcon:before {
  top: 5px;
}
header#topBar span#topOverlayNavigationIcon:after {
  top: -5px;
}
header#topBar input#topOverlayNavigationCheckbox:checked ~ label#topOverlayNavigationLabel span#topOverlayNavigationIcon {
  background: transparent;
}
header#topBar input#topOverlayNavigationCheckbox:checked ~ label#topOverlayNavigationLabel span#topOverlayNavigationIcon:before {
  transform: rotate(-45deg);
}
header#topBar input#topOverlayNavigationCheckbox:checked ~ label#topOverlayNavigationLabel span#topOverlayNavigationIcon:after {
  transform: rotate(45deg);
}
header#topBar input#topOverlayNavigationCheckbox:checked ~ label#topOverlayNavigationLabel:not(.steps) span#topOverlayNavigationIcon:before,
header#topBar input#topOverlayNavigationCheckbox:checked ~ label#topOverlayNavigationLabel:not(.steps) span#topOverlayNavigationIcon:after {
  top: 0;
}
header#topBar input#topOverlayNavigationCheckbox,
header#topBar label#topOverlayNavigationLabel {
  display: none;
}

header#topBar div#topOverlayNavigation {
  position: absolute;
  max-height: 0;
  overflow: hidden;
  top: var(--barHeight);
  
  transition: all 0.75s ease;
}
div#pageMask {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: var(--zIndexPageMask);
  pointer-events: none;
  background-color: rgba(0,0,0,0.4);
  opacity: 0.0;

  transition: all 0.75s ease;
}

/* --------------------------------------------- */

div#newsContent {
  width: var(--width);
  display: grid;
  grid: "content1 content2 gemeindeblatt" min-content
        "content1 content2 ." 1fr
        "content1 headline ." 60px
        / 36% 36% 28%;
  margin: calc(var(--newsContentTopOverlap) * -1) auto var(--clearance) auto;
}
div#newsContent > div#newsContent1 {
  grid-area: content1;
  margin: var(--newsContent1TopOffset) calc(var(--newsContentBetweenOverlap) * -1) 0 0;
  padding-right: var(--newsContentBetweenOverlap);
}
div#newsContent > div#newsContent2 {
  grid-area: content2;
  margin-right: calc(var(--newsContentBetweenOverlap) * -1);
  padding-right: var(--newsContentBetweenOverlap);
}
div#newsContent > div#gemeindeblatt {
  grid-area: gemeindeblatt;
  margin-top: calc(var(--newsContent1TopOffset) * 2);
}
div#newsContent > div#gemeindeblatt p {
  margin: 0;
  color: #fff;
}
div#newsContent > div#aktuelles {
  grid-area: headline;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: calc(var(--newsContentBetweenOverlap) * -1) calc(var(--newsContentBetweenOverlap) * 4 * -1) 0 calc(var(--newsContentBetweenOverlap) * 4);
  padding: 0 var(--clearance);
}
div#newsContent > div#aktuelles h3 {
  margin: 0;
}
div#newsContent div.boxInner {
  margin: var(--clearance);
}

div#pageContent {
  display: grid;
  grid: "content"
        / 1fr;
}
div#pageContent.sidebar {
  display: grid;
  grid: "content sidebar"
        / 1fr 250px;
}
main#mainContent {
  grid-area: content;
  width: 100%;
  margin: var(--clearance) auto;
}
aside#sidebar {
  grid-area: sidebar;
  padding: var(--clearance);
  background-color: #fff;
}
aside#sidebar div#sidebarNavigation > ul > li {
  display: none;
}
aside#sidebar div#sidebarNavigation > ul > li.current-menu-item, 
aside#sidebar div#sidebarNavigation > ul > li.current-menu-ancestor {
  display: inline;
}
aside#sidebar div.sidebarLink a {
  text-decoration: none;
}
aside#sidebar div.sidebarLink a div.sidebarLinkHeader {
  background-color: #a3c6d3;
  color: #fff;
  padding: 1em;
}
aside#sidebar div.sidebarLink a div.sidebarLinkLabel {
  font-size: 0.9em;
  margin: 1em 0;
}

div#galleryNavigation {
  width: var(--width);
  margin: var(--clearance) auto;
}
div#galleryNavigation > ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--clearance);
  margin: 0;
  padding: 0;
  list-style-type: none;
}
div#galleryNavigation > ul > li {
  position: relative;
  flex-grow: 1;
  overflow: hidden;
  width: 175px;
  height: 250px;
  text-decoration: none;
}
div#galleryNavigation > ul > li:nth-child(2) {
  width: 240px;
}
div#galleryNavigation > ul > li:nth-child(3) {
  width: 300px;
}
div#galleryNavigation > ul > li:nth-child(5) {
  width: 300px;
}
div#galleryNavigation > ul > li > img {
  width: 100%;
  height: 70%;
  object-fit: cover;
}
div#galleryNavigation > ul > li > div.galleryNavigationContent {
  width: 100%;
  position: absolute;
  top: 70%;
  height: 30%;

  /*display: flex;*/
  background-color: #fff;

  transition: all 0.75s ease;
}
div#galleryNavigation > ul > li > div.galleryNavigationContent > a.galleryNavigationLabel {
  display: block;
  padding: 15px;
}
div#galleryNavigation > ul > li > div.galleryNavigationContent > a.galleryNavigationLabel > div.line {
  width: 135px;
  height: 3px;
  margin-top: 0.8em;
}
div#galleryNavigation > ul > li > div.galleryNavigationContent > p {
  opacity: 0;

  margin: 0;
  padding: 15px;
  overflow: hidden;
  
  transition: all 1s ease;
}

/* --------------------------------------------- */

div.box {
  display: flex;
  width: var(--width);
  min-height: var(--barHeight);
  margin: var(--clearance) auto;
  padding: var(--clearance);
  gap: var(--clearance);
}
div.box > img {
  width: 270px;
  height: 180px;
  object-fit: cover;
}

body.page-id-3778 div#boxCalendar {
  margin-top: calc(var(--boxCalendarTopOverlap) * -1);
}

div#boxCalendar > div.boxInner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
}
div#boxCalendar > div.boxInner > h1 {
  margin-bottom: 0.2em;
}
div#boxCalendar > div.boxInner > p {
  font-size: 1em;
}
div#boxCalendar div.boxCalendarDays {
  display: flex;
  flex-grow: 1;
  gap: calc(var(--clearance) / 2);
}
div#boxCalendar div.boxCalendarDays a {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  /*flex-grow: 1;*/ /* removed for 100% width */
  padding: var(--clearance) calc(var(--clearance) / 2);
}
div#boxCalendar > img {
  width: 180px;
  height: 270px;
}

div#eventContent {
  width: var(--width);
  margin: var(--clearance) auto;
  background-color: #fff;
  padding: var(--clearance);
}
div#eventContent > ul {
  margin: 0;
  padding: 0;
}
div#eventContent > ul > li {
  margin: 1em 0;
  list-style-type: none;
}
div#eventContent > ul > li > div {
  display: inline-block;
}
div#eventContent > ul > li > div.eventContentDayOfMonth {
  margin-right: 0.4em;
  font-size: 2em;
}
div#eventContent > ul > li > div.eventContentDayOfWeek {
  font-size: 1.1em;
}
div#eventContent > ul > li > div.feast {
  color: #1e3c7d;
}
div#eventContent > ul > li > ul {
  margin: 0;
  padding: 0;
}
div#eventContent > ul > li > ul > li {
  display: flex;
  margin: 0 0 1em 0;
  list-style-type: none;
}
div#eventContent > ul > li > ul > li div.eventContentTimeOfDay {
  min-width: 25%;
  padding-top: 0.2em;
}
div#eventContent div.eventContentWarning {
  margin-bottom: 0.4em;
  padding: 0 0.2em;
  width: fit-content;
}
div#eventContent > ul > li > ul > li h3 {
  margin: 0;
}
div#eventContent > ul > li > ul > li p {
  margin: 0;
}
div#eventContent > div.box {
  margin-left: calc(var(--clearance) * -1);
}

div.annualEventContent {
  display: table;
  table-layout: fixed;
  width: 100%;
}
div.annualEventContent div.annualEventContentHeader, div.annualEventContent div.annualEventContentDay {
  display: table-row;
}
div.annualEventContent div.annualEventContentHeader {
  color: #1e3c7d;
  font-weight: bold;
}
div.annualEventContent div.annualEventContentDay {

}
div.annualEventContent div.annualEventContentHeader > div, div.annualEventContent div.annualEventContentDay > div {
  display: table-cell;
  overflow: hidden;
  padding: 0.3em 0.1em 0.3em 0.5em;
  font-size: 0.9em;
}
div.annualEventContent div.weekday {
  width: 2.2em;
}
div.annualEventContent div.date {
  width: 3.6em;
}
div.annualEventContent div.schulferien {
  width: 1em;
}
div.annualEventContent div.termineHH {
  width: 9em;
}
div.annualEventContent div.termine {
  width: 33%;
}
div.annualEventContent div.gottesdienste {
  width: 33%;
}
div.annualEventContent div.reisen {
  width: 33%;
}
div.annualEventContent div.annualEventContentHeader > div {
  border-bottom: solid 1px rgba(0, 0, 0, 1);
}
div.annualEventContent div.annualEventContentDay > div {
  border-bottom: solid 1px rgba(0, 0, 0, .05);
}
div.annualEventContent div.annualEventContentDay div.weekday,
div.annualEventContent div.annualEventContentDay div.date {
  background-color: #f9c837;
}
div.annualEventContent div.annualEventContentDay div.schulferienHH {
  background-color: #a2beda;
}
div.annualEventContent div.annualEventContentDay div.schulferienNI {
  background-color: #ed9859;
}
div.annualEventContent div.annualEventContentDay div.schulferienSH {
  background-color: #354d8a;
}
div.annualEventContent div.annualEventContentHeader div.termineHH, 
div.annualEventContent div.annualEventContentDay div.termineHH {
  background-color: #cbd1c6;
}
div.annualEventContent div.annualEventContentDay div.termine {
  background-color: #fff;
}
div.annualEventContent div.annualEventContentHeader div.gottesdienste,
div.annualEventContent div.annualEventContentDay div.gottesdienste {
  background-color: #bdd3d4;
}
div.annualEventContent div.annualEventContentDay div.reisen {
  background-color: #fff;
}
div.annualEventContent div.sunday div.weekday,
div.annualEventContent div.sunday div.date {
  background-color: #fff;
  font-weight: bold;
}
div.annualEventContent div.saturday > div,
div.annualEventContent div.sunday > div {
  border-bottom: solid 1px rgba(0, 0, 0, 1);
}
div.annualEventContent span.ort {
  color: #ea8944;
  font-weight: bold;
}

div#bottomWidget {
  margin: var(--clearance) auto 0 auto;
}

footer#bottomBar {
  display: flex;
  justify-content: center;
  padding: 20px 0 40px 0;
}
footer#bottomBar div#footerLogo img {
  height: 120px;
}
footer#bottomBar div#footerAddress {
  margin: 40px var(--clearance) 0 var(--clearance);
}
footer#bottomBar div#footerInstagram img {
  height: 30px;
  margin: 40px 20px;
}

/* --------------------------------------------- */
/* Elements */
/* --------------------------------------------- */

div.navigation ul {
  margin: 0;
  padding: 0;
}
div.navigation li {
  margin: 0;
}
div.navigation li li li {
  padding-left: var(--clearance);
}
div.horizontalNavigation > ul {
  display: flex;
  justify-content: center;
}
div.horizontalNavigation > ul > li > a {
  display: flex;
  align-items: center;
  height: var(--barHeight);
  padding: 0 1.2em;
}

div.fullNavigation {
  width: var(--width);
}
div.fullNavigation ul {
  margin: 0;
  padding: 0;
}
div.fullNavigation > ul {
  display: flex;
  flex-flow: row wrap;
  gap: var(--clearance);
  padding: var(--clearance);
}
div.fullNavigation > ul > li {
  width: calc((var(--width) - ((var(--fullNavigationColumns) + 1) * var(--clearance))) / var(--fullNavigationColumns));
}

.more {
  display: block;
  width: max-content;
  margin: 0 0 0 auto;
  border: solid 1px #fff;
  padding: 0.4em 0.8em;
  font-size: 0.8em;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
}

#backToFrontPage {
  display: flex;
  width: var(--width);
  margin: var(--clearance) auto;
}
#backToFrontPage a {
  font-size: 0.8em;
  color: #000;
  text-decoration: none;
}
#backToFrontPage img {
  height: 19px;
  margin-right: 0.6em;
}

/* --------------------------------------------- */
/* Colors */
/* --------------------------------------------- */

body {
	background-color:#eee;
}

h1 {
  color: #193671;
}
a {
  color: #000;
}
hr.wp-block-separator {
  border-top: solid 1.5px #fff;
}

div#topBackground {
  background-color: #ddd;
}
header#topBar {
  background-color: #fff;
}
header#topBar div#topOverlayNavigation {
  background-color: #fff;
}

.darkBlue, div#newsContent > div#newsContent1, body.page-id-3930 div#pageContent > main#mainContent > div.box:nth-of-type(1) {
  background-color: #6da0bd;
}
.blue, div#newsContent > div#newsContent2, body.page-id-3930 div#pageContent > main#mainContent > div.box:nth-of-type(3) {
  background-color: #93b9be;
}
div#newsContent > div#gemeindeblatt {
  background-color: #859a89;
}
.yellow, div#newsContent > div#aktuelles, body.page-id-3930 div#pageContent > main#mainContent > div.box:nth-of-type(2) {
  background-color: #f9c837;
}

aside#sidebar * {
  color: #000;
}
aside#sidebar div#sidebarNavigation > ul > li.current-menu-item > a, 
aside#sidebar div#sidebarNavigation > ul > li.current-menu-ancestor > a {
  display: block;
  border-bottom: solid 2px #eee;
}

div#galleryNavigation a.galleryNavigationItem {
  background-color: #fff;
}
div#galleryNavigation a.galleryNavigationItem > div > div.line {
  background-color: #999;
}

div#boxCalendar div.boxCalendarDays > a {
  background-color: #fff;
}
div#boxCalendar div.boxCalendarDays > a.today {
  background-color: #f9c837;
}
div#eventContent > h2 {
  color: #1e3c7d;
}
div#eventContent div.eventContentWarning {
  background-color: #f9c837;
}

div#bottomWidget {
  background-color: #fff;
}
div#bottomWidget * {
  color: #000;
}
div#bottomNavigation {
  background-color: #193671;
}
div#bottomNavigation > ul > li > a {
  color: #fff;
}
footer#bottomBar {
  background-color: #fff;
}

/* --------------------------------------------- */
/* Fonts */
/* --------------------------------------------- */

/*@font-face {
  font-family: 'Optima-Regular';
  src: url("Optima-Regular.woff") format("woff"); }*/
@font-face {
  font-family: 'Optima-Bold';
  src: url("woff/Optima-Bold.woff") format("woff"); }
@font-face {
  font-family: 'FiraSans-Regular';
  src: url("woff/FiraSans-Regular.woff") format("woff"); }
@font-face {
  font-family: 'FiraSans-Medium';
  src: url("woff/FiraSans-Medium.woff") format("woff"); }
@font-face {
  font-family: 'FiraSans-Bold';
  src: url("woff/FiraSans-Bold.woff") format("woff"); }

div, span, p, li {
  font-family: 'FiraSans-Regular', sans-serif;
}
b, strong {
  font-family: 'FiraSans-Bold';
  font-weight: normal;
}

h1 {
  font-size: 3em;
  font-weight: normal;
  line-height: 1.2em;
  margin: 0.2em 0;
}
h2 {
  margin: 0.2em 0;
  font-size: 1.5em;
  font-family: 'FiraSans-Medium', sans-serif;
  font-weight: normal;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
aside h2 {
  font-size: 1em;
}
h3 {
  margin-top: 0;
  margin-bottom: 0.6em;
  font-family: 'Optima-Bold', serif;
  font-weight: normal;
}
h4 {
  margin-top: 0;
  margin-bottom: 0.6em;
  font-family: 'FiraSans-Bold', serif;
  font-weight: normal;
}
p {
  line-height: 1.9;
}
div.entry-meta {
  color: #888;
  text-transform: uppercase;
}

div#topNavigation {
  font-size: 0.9em;
}
div#pageContent.sidebar main#mainContent > * {
  padding-right: var(--clearance);
}
main#mainContent h2 {
  border-bottom: solid 1.5px #fff;
  padding-bottom: 1em;
  margin-bottom: 1.2em;
}
main#mainContent p + h2, main#mainContent div.wp-block-media-text + h2 {
  margin-top: 2em;
}
div#newsContent > h2 > a {
  text-decoration: none;
}
div#newsContent > div#gemeindeblatt > h3 {
  line-height: 1;
  margin: 0;
  font-size: 1.1em;
  font-family: 'FiraSans-Medium', sans-serif;
  letter-spacing: 1.2;
  color: #fff;
  text-transform: uppercase;
}

div.navigation {
  font-size: 0.8em;
  line-height: 2.4;
}
div.navigation * {
  text-decoration: none;
}
div.navigation li {
  list-style-type: none;
}
div.navigation > ul > li > a {
  font-family: 'FiraSans-Medium', sans-serif;
}
aside#sidebar div#sidebarNavigation li.current-menu-item > a {
  font-family: 'FiraSans-Medium', sans-serif;
}

div.boxInner h1 {
  margin-top: 0;
  margin-bottom: 0.6em;
  color: #1e3c7d;
  line-height: 1;
}
div.boxInner h3, div#aktuelles {
  color: #1e3c7d;
}
div.boxInner p, div.boxInner ul, div.boxInner ol {
  font-size: 0.8em;
}
div.boxInner .subtitle {
  color: #fff;
}

div#galleryNavigation > ul > li > div.galleryNavigationContent > a.galleryNavigationLabel {
  color: #1e3c7d;
  font-family: 'FiraSans-Regular', sans-serif;
  font-size: 1.4em;
  letter-spacing: 0.02em;
  line-height: 1;
}
div#galleryNavigation > ul > li > div.galleryNavigationContent > p {
  font-size: 1.2em;
}

div#boxCalendar div.boxCalendarDays a {
  color: #000;
  text-align: center;
  text-decoration: none;
}
div#boxCalendar div.boxCalendarDays > a.feast {
  font-weight: bold;
}
div#boxCalendar div.boxCalendarDayOfMonth {
  font-size: 2.4em;
  text-align: center;
}
div#boxCalendar div.boxCalendarDayOfWeek {
  color: #888;
  text-transform: uppercase;
}

div#eventContent > ul > li > ul > li div.eventContentTimeOfDay {
  padding-top: 0.2em;
  font-size: 1.1em;
}
div#eventContent > ul > li > ul > li div.eventContentSummary {
  font-size: 1.2em;
}
div#eventContent div.eventContentWarning {
  font-size: 0.9em;
}
div#eventContent > ul > li > ul > li h3 {
  font-family: 'FiraSans-Medium', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

div#bottomNavigation > ul > li > a {
  font-family: 'FiraSans-Regular', sans-serif;
}
footer#bottomBar div#footerAddress {
  font-size: 0.8em;
}

/* Media Queries
 * ========================================================================== */
@media only screen and (min-width: 35em) { 
  header#topBar:hover div#topOverlayNavigation {
    /*height: auto;*/
    max-height: 600px; /* dummy for transition to work */
    z-index: var(--zIndexTopOverlayNavigation);
  }
  header#topBar:hover + div#pageMask {
    opacity: 1.0;
  }
  div#galleryNavigation > ul > li:hover > div.galleryNavigationContent {
    top: 30%;
    height: 70%;
  }
  div#galleryNavigation > ul > li:hover > div.galleryNavigationContent > p {
    opacity: 1;
  }
}
@media only screen and (max-width: 35em) {
  :root {
    --width: auto;
    --clearance: 15px;
    --topBackgroundHeight: 250px;
    --barHeight: 80px;
    --fullNavigationColumns: 1;
    --newsContentTopOverlap: 60px;
    --boxCalendarTopOverlap: 70px;
  }
  h1 {
    font-size: 2em;
  }
  .wp-block-image .alignright, .wp-block-image .alignleft {
    float: none;
    margin-left: 0;
    margin-right: 0;
  }
  .wp-block-image img {
    width: 35em;
  }
  div#topBackground {
    display: flex;
    width: 100%;
  }
  div#page {
    width: auto;
  }
  header#topBar {
    display: flex;
    justify-content: space-between;
    margin-bottom: calc(var(--topBackgroundHeight) - var(--barHeight));
  }
  div#topNavigation {
    display: none;
  }
  div.fullNavigation {
    width: 100%;
  }
  div.fullNavigation > ul {
    display: block;
  }
  div.fullNavigation > ul > li > ul {
    margin-left: var(--clearance);
  }
  header#topBar label#topOverlayNavigationLabel {
    display: block;
  }
  header#topBar input#topOverlayNavigationCheckbox:checked ~ div#topOverlayNavigation {
    /*height: auto;*/
    max-height: 1200px; /* dummy for transition to work */
    z-index: var(--zIndexTopOverlayNavigation);
  }
  div#pageContent.sidebar main#mainContent > * {
    padding-right: 0;
  }
  aside#sidebar div.sidebarLink {
    display: none;
  }
  div#newsContent {
    display: block;
  }
  div#newsContent > div#newsContent1, div#newsContent > div#newsContent2,div#newsContent > div#gemeindeblatt, div#newsContent > div#aktuelles {
    margin: 0;
    margin-bottom: var(--clearance);
    padding: var(--clearance);
  }
  div#newsContent div.boxInner {
    margin: 0;
  }
  div#pageContent, div#pageContent.sidebar {
    display: block;
  }
  div.box {
    display: block;
  }
  div.box > img {
    margin-bottom: var(--clearance);
  }
  div#galleryNavigation > ul > li {
    height: 150px;
  }
  div#boxCalendar h1 {
    margin-bottom: 0;
  }
  div#boxCalendar div.boxCalendarDays a {
    padding: var(--clearance) calc(var(--clearance) / 6);
  }
  div#boxCalendar div.boxCalendarDays a div.boxCalendarDayOfMonth {
    font-size: 1.2em;
  }
  div#boxCalendar > img {
    display: none;
  }
  div#eventContent > div.box {
    margin-right: calc(var(--clearance) * -1);
  }
  div#bottomWidget {
    display: none;
  }
  div#bottomNavigation > ul {
    flex-wrap: wrap;
  }
  div#bottomNavigation > ul > li > a {
    height: calc(var(--barHeight) / 2);
  }
  footer#bottomBar {
    display: block;
  }
  div#eventContent > ul > li > ul > li div.eventContentSummary {
    font-size: 1em;
  }
}