/* Variablen */
:root {
    --very-light-blue: #ededf0;
    --light-blue: #6fabf4;
    --dark-blue: #000f99;
    --blue: #0060df;
    --white: #fff;
    --light-grey: #c0c0c0;
    --grey: #aaa;
    --dark-grey: #555;
    --darker-grey: #333;
    --allmost-black: #15141a;
    --black: #000;

    --link-color: var(--blue);
    --button-background-color: #333;
    --button-background-color-hover: #444;

    --header-color: var(--white);
    --header-h1-text-shadow: .1px .1px .1px var(--dark-blue), .1px -.1px .1px var(--dark-blue), -.1px -.1px .1px var(--dark-blue), -.1px .1px .1px var(--dark-blue);
    --header-h1-text-shadow-dark: 0 1px 2px rgba(255, 255, 255, 0.85);
    
    --header-padding-top: 42.5%;  /* (510 / 1200) * 100% to maintain aspect ratio */

    --nav-icon-border-color: var(--white);
    --nav-icon-background-color-desktop: var(--white);
    --nav-icon-border-color-desktop: var(--dark-blue);
    --nav-icon-color-desktop: var(--dark-blue);
    --nav-background-color: var(--dark-blue);
    --nav-background-color-desktop: rgba(0, 7, 77, 0.5);
    --nav-background-desktop: linear-gradient(30deg, var(--white) 160px, var(--white) 0, transparent 90%);
    --nav-border-color: var(--white);
    --nav-color: var(--white);
    --nav-link-color-hoover: var(--light-grey);
    --nav-link-color-active-desktop: var(--dark-blue);
    --nav-link-color-hoover-desktop: var(--dark-blue);
   
    --nav-padding: 5px 0;
    --nav-height: 75px;
    --nav-item-margin-right: 20px;
    --nav-submenu-margin: 0;
    --nav-submenu-padding: 5px 0;

    --footer-text-color: var(--white);
    --footer-link-color-hover: var(--white);

    --footer-padding: 10px;

    --main-padding: 40px;
    --main-max-width: 960px;
    --main-margin: 0 auto;

    --section-margin-left: 15px;
    --section-line-spacing: 1em;
    --section-padding: 20px;
    --section-margin: 10px;

    --wannaknowmore-border: var(--dark-grey);
    --wannaknowmore-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    /*  Mobilansicht */
    --mobile-menu-max-width: 80%;
    --transition-duration: 0.3s;

    --menu-icon-left: 20px;
    --menu-icon-top: 20px;

    --nav-icon-heigth: 30px;
    --nav-icon-width: 30px;
    --nav-icon-border-radius: 5px;
}

/* Grundlegende Styles, für alle Bildschirmgrößen */
body {
    font-family: Arial, sans-serif;
    line-height: 1.25;
    margin: 0;
    padding: 0;
    background-color: var(--background-color);
    color: var(--text-color);
}

a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    color: var(--link-color-hover);
    text-decoration: underline dotted;
}

header {
    background-color: var(--header-background-color);
    width: 100%;
    color: var(--header-color);
    padding-top: var(--header-padding-top);
    text-align: center;
    position: relative;
    overflow: hidden;
}

header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.15) 50%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

header .header-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0;
    transition: opacity 1.5s ease;
    pointer-events: none;
}

header .header-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

header .header-bg.is-active {
    opacity: 1;
}

header .header-video {
    opacity: 1;
    transition: none;
    object-fit: cover;
}

header .header-bg picture,
header .header-bg video {
    width: 100%;
    height: 100%;
    display: block;
}

header h1 {
    position: absolute;
    top: auto;
    bottom: calc(var(--nav-height) + 10px);
    left: 0;
    right: 0;
    /*margin: 0 5% 5%;*/
    padding: .1em .2em;
    color: var(--header-color);
    text-shadow: var(--header-h1-text-shadow);
    text-align: left;
    width: fit-content;
    font-size: 3em;
    border-radius: .4em;
    z-index: 2;
}

.photo-credit {
    background-color: var(--nav-background-color-desktop);
    font-size: 10px;
    padding: 5px;
    border-radius: 7px;
}

header .photo-credit {
    position: absolute;
    bottom: calc(var(--nav-height) + 10px);
    right: 10px;
    z-index: 2;
}

.photo-credit.is-hidden {
    display: none;
}

.button-control {
    background: var(--white);
    color: var(--dark-blue);
    border: 1px solid var(--grey);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.button-control:focus-visible,
.button-control:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
}

.header-audio-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
}

.header-audio-toggle.is-hidden {
    display: none;
}

.header-audio-toggle img[data-audio-icon] {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* Navigation */
#menu-toggle,
#menu-icon {
    display: none;
}

#menu-icon,
.nav-icons a,
.nav-icons button {
    justify-content: center;
    align-items: center;

    width: var(--nav-icon-heigth);
    height: var(--nav-icon-width);

    font-size: 20px;
    color: var(--nav-icon-color);

    border-radius: var(--nav-icon-border-radius);

    cursor: pointer;
}

.nav-icons a,
.nav-icons button {
    background-color: var(--nav-icon-background-color);
    border: solid 1px var(--nav-icon-border-color);
}

.socialmedia {
    text-align: center;
}
.socialmedia a {
    display: inline-flex;
    align-items: center;
}

.socialmedia img  {
    height: var(--nav-icon-heigth);
    width: var(--nav-icon-width);
}

nav {
    background-color: var(--nav-background-color);
    padding: var(--nav-padding);
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
}

nav h2 {
    display: inline;
    font-size: 100%;
    margin: 0;
}

nav a {
    color: var(--nav-color);
    text-decoration: none;
}

nav a:hover {
    color: var(--nav-link-color-hoover);
}

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

nav ul>li {
    display: inline-block;
    position: relative;
    white-space: nowrap;
    text-align: center;
}

nav ul>li.active>a {
    color: var(--nav-link-color-active);
    text-decoration: underline dotted;
}

nav ul li:last-child {
    margin-right: 0;
}

nav ul ul li:last-child {
    border-bottom-width: 0;
}

nav ul ul li a {
    padding: 10px;
    white-space: nowrap;
}

nav ul li:hover>ul {
    display: flex;
    flex-direction: column;
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
    /* Verzögerung für das Erscheinen entfernt */
}

nav ul li>ul {
    transition-delay: 0.2s;
}

/* Main */
h2 {
    text-align: center;
    font-size: 24px;
}

/* Overlay */
#zoomOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease;
  --zoom-translate-x: 0px;
  --zoom-translate-y: 0px;
  --zoom-scale-x: 0.9;
  --zoom-scale-y: 0.9;
}

#zoomOverlay.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#zoomOverlay img {
  max-width: 100%;
  max-height: 100%;
  object-fit: conver;
}

#promoPic {
  display: block;
  width: 100%;
  height: auto;
}
#promoPic img {
  display: block;
  width: 100%;
  height: auto;
}

#zoomOverlay picture,
#zoomOverlay img {
  max-width: 100%;
  max-height: 80vh;   
  height: auto;
  width: auto;
  object-fit: contain;
}

#zoomOverlay picture {
  position: relative;  
  max-width: 100%;
  max-height: 80vh;
}

.zoom-overlay__media {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transform-origin: center center;
  transform: translate(var(--zoom-translate-x), var(--zoom-translate-y))
    scaleX(var(--zoom-scale-x)) scaleY(var(--zoom-scale-y));
  transition: transform 0.4s ease;
}

#zoomOverlay.is-zoomed .zoom-overlay__media {
  transform: translate(0, 0) scale(1);
}

#closeZoom {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  z-index: 2;
}

@media (max-width: 560px) {
  #closeZoom {
    top: 0;
    right: 0;
  }
}

.events-scroll__status,
.events-scroll__error {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  text-align: center;
  font-size: 0.95rem;
}

.events-scroll__status[hidden],
.events-scroll__error[hidden] {
  display: none;
}

.events-scroll__error {
  background: #ffebee;
  color: #c62828;
}

.events-scroll__sentinel {
  width: 100%;
  height: 1px;
}

/* Sektionen */
section {
    margin: var(--section-margin) auto;
    background-color: var(--section-background-color);
    padding: var(--section-padding);
    width: calc(100% - 2 * var(--section-padding));
}

section h3 {
    margin-bottom: 20px;
    font-size: 24px;
}

section h4 {
    font-size: 20px;
    margin: 10px 0 10px var(--section-margin-left);
}

section p,
section dd,
section ul {
    margin: .4em 0;
}

section p {
    margin-left: var(--section-margin-left);
}

section dl {
    margin: var(--section-line-spacing) 0 var(--section-line-spacing) var(--section-margin-left);
    padding: 0 var(--section-margin-left);
}

section dd {
    margin-left: var(--section-margin-left);
}

.history ul {
    list-style-type: none;
}

section ul {
    list-style-type: disc;
    margin: var(--section-line-spacing) 0 var(--section-line-spacing) calc(var(--section-margin-left) + 20px);
}

section ul .date {
    font-weight: bold;
}

section ul .note {
    font-style: italic;
}

.history dt {
    font-weight: bold;
}

.beginning_notes li {
    text-indent: 1em hanging;
}

.pionier {
    font-weight: bold;
}

section p em {
    font-size: 18px;
    font-weight: bold;
}

section blockquote {
    font-family: monospace;
    margin-left: var(--section-margin-left);
    padding-left: var(--section-margin-left);
    border-left: solid 1px var(--section-quote-border-color);
}

section blockquote em {
    letter-spacing: 0.3em;
    font-weight: normal;
}

section blockquote::before,
q::before {
    content: "»";
}

section blockquote::after,
q::after {
    content: "«";
}

.cite {
    text-align: right;
}

section .photo-credit {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: var(--background-color);
    font-size: 10px;
    color: var(--text-color);
    padding: 5px;
    border-radius: 7px;
}

/* Flexbox */
.flex {
    display: flex;
    flex-wrap: nowrap;
    gap: 2rem;
    align-items: flex-start;
}

.flex .left {
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: column;
    max-width: min(100%, 26rem);
}

.flex .right {
    flex: 1 1 20rem;
    min-width: 12rem;
    position: relative;
}

.flex img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

@media (max-width: 640px) {
    .flex {
        flex-direction: column;
        flex-wrap: wrap;
    }

    .flex .left,
    .flex .right {
        width: 100%;
        min-width: 0;
    }
}

#edcqr { 
    padding: 1em;
    background: var(--white);
    width: min(18rem, 100%);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

#edcqr img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}



/* Footer */
footer {
    background-color: var(--footer-background-color);
    color: var(--footer-text-color);
    padding: var(--footer-padding);
    text-align: center;
}

footer span {
    white-space: nowrap;
}

footer a {
    color: var(--footer-link-color);
}

footer a:hover {
    color: var(--footer-link-color-hover);
}

.copyright {
    font-size: .5em;
}

/* Weitere Stile */
#km-appointment-list {
    background-color: var(--background-color);
    color: var(--text-color);
}

#map {
    height: 400px;
}

.wannaknowmore {
    margin: 1em 0;
    text-align: right;
    line-height: 200%;
}

.wannaknowmore a {
    color: var(--wannaknowmore-link-color);
    background-color: var(--wannaknowmore-background);
    border: var(--wannaknowmore-border);
    box-shadow: var(--wannaknowmore-shadow);
    margin-left: .5em;
    padding: .5em 2em;
    border-radius: 1em;

}
#donations dt {
    font-weight: bold;
}
.nwrp {
    white-space: nowrap;
}
.km-iframe {
    display: block;
    box-sizing: border-box;
    width: 100%;
    border: none;
}

#km-list-frame-short {
    height: 401px;
    overflow: hidden;
}

[data-tooltip] {
    position: relative;
    text-decoration: overline underline dotted;
    transition: text-decoration 0.4s ease-in;
}

[data-tooltip]:hover {
    color: var(--link-color);
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    left: 0;
    white-space: nowrap;
    background-color: var(--section-background-color);
    border: 1px solid var(--background-color);
    padding: 0.5em;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    display: var(--show-css-tooltip, inline-block);
}

[data-tooltip]:hover::after {
    opacity: 1;
}

/* Screenreader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Mobile break */
.mobile-br {
    display: none;
}


/* Stile für Mobilgeräte */
@media (max-width: 767px) {
    header {
        background-image: url(../media/backgrounds/small/instrumente.jpg);
    }

    header.contact {
        background-image: url(../media/backgrounds/small/reudern_sommer.jpg);
    }

    header.about {
        background-image: url(../media/backgrounds/small/jubilaeum.jpg);
    }

    header.events {
        background-image: url(../media/backgrounds/small/konzert.jpg);
    }

    header.history {
        background-image: url(../media/backgrounds/small/geschichte.jpg);
    }

    header h1 {
        position: absolute;
        top: 66%;
        left: 50%;
        transform: translate(-50%, -66%);
        font-size: 24px;
        text-align: center;
        margin: 0;
        width: 80%;
    }



    header .photo-credit {
        bottom: 10px;
        border-radius: 5px;
    }

    body.menu-active {
        overflow: hidden;
    }

    #menu-toggle {
        display: none;
        position: fixed;
        left: 10px;
        top: 10px;
        z-index: 1001;
    }

    /* Menü-Icons */
    #menu-icon,
    .nav-icons a,
    .nav-icons button {
        display: inline-flex;
    }

    #menu-icon {
        position: fixed;
        left: var(--menu-icon-left);
        top: var(--menu-icon-top);
        z-index: 2000;
        background-color: var(--nav-background-color);
        color: var(--nav-color);
        border: solid 1px var(--nav-color);
        transition: background-color 0.3s ease, color 0.3s ease;
        overflow: hidden;
    }

    .nav-icons {
        margin: 0 0 20px 45px;
        padding-top: 10px;
        text-align: right;
        line-height: 1em;
    }

    #menu-icon span {
        position: absolute;
        transition: opacity 0.3s ease;
    }

    #menu-icon span:first-child {
        opacity: 1;
    }

    #menu-icon span:last-child {
        opacity: 0;
    }

    #menu-toggle:checked+#menu-icon span:first-child {
        opacity: 0;
    }

    #menu-toggle:checked+#menu-icon span:last-child {
        opacity: 1;
    }

    #menu-toggle:checked+#menu-icon {
        background-color: var(--nav-border-color);
        color: var(--nav-background-color);
    }

    #menu-toggle:checked+#menu-icon+#main-nav {
        transform: translateX(0);
    }

    nav {
        display: block;
        position: fixed;
        left: 0;
        top: 0;
        width: auto;
        max-width: var(--mobile-menu-max-width);
        min-width: 100px;
        height: auto;
        max-height: 100%;
        background-color: var(--nav-background-color);
        overflow-y: visible;
        padding: 10px 15px 15px 15px;
        transition: transform var(--transition-duration) ease;
        transform: translateX(-100%);
        white-space: nowrap;
        line-height: 2em;
    }

    nav ul {
        margin-top: 10px;
    }

    #logo {
        margin: 0 -15px;
        padding: 11px 15px 0 0;
        background: #fff;
    }

    #logo img {
        width: 145px;
    }

    nav {
        z-index: 1000;
    }

    nav.active {
        transform: translateX(0);
    }

    nav h2,
    nav a,
    nav li,
    nav ul>li,
    nav ul li ul,
    nav ul li ul:hover,
    nav ul li ul li,
    nav ul li ul li:hover {
        display: block;
        text-align: left;
        visibility: visible;
        opacity: 1;
        position: relative;
    }

    nav ul ul {
        margin: 0;
        padding: 0 .5em;
        z-index: 1001;
    }

    nav ul ul li,
    nav ul ul li a {
        font-size: 0.9em;
        padding: 0;
        border: none;
        background-color: transparent;
    }

    nav ul>li>a {
        width: 100%;
        box-sizing: border-box;
    }

    section {
        margin: var(--section-margin) 0;
        width: 100%;
    }

    .mobile-br {
        display: block;
    }
}

/* Stile für Tablet- und Desktopansicht */
* {
    box-sizing: border-box;
}


@media only screen and (min-width: 768px) {

    /* todo generalisieren */
    nav ul li,
    nav ul a {
        color: var(--black);
        border-color: var(--black);
    }
    nav a:hover {
        color: var(--nav-link-color-hoover-desktop);
    }

    body {
        font-size: 16px;
    }

    header {
        background: url('../media/backgrounds/large/instrumente.jpg') no-repeat center center;
        background-size: cover;
        position: sticky;
         /* Berechnung der Position basierend auf dem Seitenverhältnis und der Verschiebung */
        top: calc(-1 * (100vw * 1632 / 3840 - var(--nav-height)));
        z-index: 999;
    }

    header.contact {
        background-image: url(../media/backgrounds/med/reudern_sommer.jpg);
    }

    header.about {
        background-image: url(../media/backgrounds/med/jubilaeum.jpg);
    }

    header.events {
        background-image: url(../media/backgrounds/med/konzert.jpg);
    }

    header.history {
        background-image: url(../media/backgrounds/med/geschichte.jpg);
    }

    nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0;
        margin-top: calc(-1*var(--nav-height));
        padding: 0 10px 0 0;
        height: var(--nav-height);
        top: 0;
        font-size: 16px;
        background: var(--nav-background-desktop);
    }

    nav ul>li.active>a {
        color: var(--nav-link-color-active-desktop);
    }


    #logo {
        position: relative;
        display: flex;
        order: 1;
        align-items: center;
        padding: 10px 20px 10px 0;
        height: var(--nav-height);
        background: linear-gradient(10deg, white 160px, transparent);
    }

    #logo a {
        height: 100%;
    }

    #logo img {
        height: 100%;
        vertical-align: middle;
        width: auto;
        background: white;
        max-width: 100%;
    }

    .nav-icons {
        order: 3;
        display: inline-flex;
        align-items: center;
        margin-left: 0;
        padding-left: 40px;
        height: 100%;
    }

    .nav-icons a,
    .nav-icons button {
        color: var(--nav-icon-color-desktop);
        background-color: var(--nav-icon-background-color-desktop);
        border: solid 1px var(--nav-icon-border-color-desktop);
    }


    nav ul {
        flex: 1;
        display: flex;
        order: 2;
        list-style: none;
        margin: 0;
        padding: 0;
        flex-grow: 1;
        justify-content: flex-start;
        height: 100%;
        align-items: center;
    }

    nav ul>li {
        display: inline-block;
        position: relative;
        padding: 10px 7px;
        border-right: solid 4px;
    }

    nav ul ul {
        position: absolute;
        width: 100%;
        height: auto;
        top:80px;
       /*  left: 100%;
       top: calc(var(--nav-height)/-2); 
        display: none;
        flex-direction: column; */
        padding: 10px 0;
        margin: 0;
    }

    /*
    border: solid thin var(--dark-blue);
    border-radius: 45px;
    background: var(--section-background-color);*/

    nav ul li:hover ul {
        flex-direction: row;
    }
    nav ul ul li {
        padding: .2em 0;
        width: 100%;
        border: solid 0px ;
        border-bottom-width: 4px;
        display:none;
    }

    nav ul> li:last-child {
        border: none;
    }

    nav ul.about li li,  nav ul.history li li,  nav ul.today li li  {
        display: block;
        border: solid thin var(--dark-blue);
        border-radius: 10px;
        background: var(--section-background-color);
    }

    nav ul.about li li a {
      color:   var(--text-color);
    }

    nav ul li:hover>ul {
       /* display: flex; */
    }

    nav ul li:last-child {
        margin-right: 0;
    }

    main {
        padding: var(--main-padding);
    }

    section {
        margin-bottom: 40px;
        border-radius: 10px;
        box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.2);
        width: calc(100% - 2 * var(--section-padding));
    }

    .beginning_notes li {
        text-indent: 6em hanging;
    }

    .history dl {
        display: flex;
        flex-flow: row wrap;
    }

    .history dt {
        flex-basis: 30%;
    }

    .history dd {
        flex-basis: 70%;
        flex-grow: 1;
        margin: 0;
    }
}

@media only screen and (min-width: 864px) {

    nav {
        font-size: 18px;
        padding: 0 10px 0 0;
    }

    nav ul>li {
        padding: 10px 20px;
    }
}

/*** desktop ***/
@media only screen and (min-width: 1024px) {
    :root {
        --nav-height: 90px;
    }

    header {
        background-image: url(../media/backgrounds/large/instrumente.jpg);
    }

    header.contact {
        background-image: url(../media/backgrounds/large/reudern_sommer.jpg);
    }

    header.about {
        background-image: url(../media/backgrounds/large/jubilaeum.jpg);
    }

    header.events {
        background-image: url(../media/backgrounds/large/konzert.jpg);
    }

    header.history {
        background-image: url(../media/backgrounds/large/geschichte.jpg);
    }

    header._404 {
        background-image: url(../media/backgrounds/large/404.jpg);
    }

    nav {
        font-size: 26px;
    }

    main {
        max-width: var(--main-max-width);
        margin: var(--main-margin);
    }

    section {
        padding: 60px;
        width: calc(100% - 2 * 60px);
    }
}

.leaflet-bottom,
.leaflet-left {
    z-index: 998;
}
#events .events-scroll__status,
#events .events-scroll__error,
[data-events-root] .events-scroll__status,
[data-events-root] .events-scroll__error {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  text-align: center;
  font-size: 0.95rem;
}

.events-error {
  margin: 2rem 0;
  padding: 1.5rem;
  border: 1px solid var(--light-grey);
  border-radius: 6px;
  background-color: var(--very-light-blue);
}

.events-error p {
  margin: 0;
  font-weight: bold;
  color: var(--dark-grey);
}

#events .month .events-scroll__status,
.km-appointment-list .month .events-scroll__status {
  background: transparent;
  border: none;
  padding: 0.25rem 0;
  margin: 0.5rem 0 0;
  text-align: left;
  font-weight: bold;
}

.events-noscript {
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--dark-grey);
  padding: 1rem;
  border-left: 4px solid var(--light-grey);
}

.events-noscript a {
  text-decoration: underline;
  font-weight: bold;
}

[data-events-root] .events-scroll__status[hidden],
[data-events-root] .events-scroll__error[hidden] {
  display: none;
}

[data-events-root] .events-scroll__error {
  background: #ffebee;
  color: #c62828;
}

.month .events-scroll__status {
  background: transparent;
  border: none;
  padding: 0.5rem 0;
  text-align: left;
  font-weight: bold;
}

.events-scroll__sentinel {
  width: 100%;
  height: 1px;
  margin-top: 1rem;
}
header.header-theme-dark {
    --header-color: var(--dark-blue);
    --header-h1-text-shadow: var(--header-h1-text-shadow-dark);
}