* {
  margin: 0;
  padding: 0;
}

/* das ist die Schrift des Luna-Logos - Regular */
@font-face {
  font-family: "Economica-Regular";
  src: url("./fonts/economicaRegular.eot"); /* IE9 Compat Modes */
  src: url("./fonts/economicaRegular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("./fonts/economicaRegular.otf") format("opentype"), /* Open Type Font */
    url("./fonts/economicaRegular.svg") format("svg"), /* Legacy iOS */
    url("./fonts/economicaRegular.ttf") format("truetype"), /* Safari, Android, iOS */
    url("./fonts/economicaRegular.woff") format("woff"), /* Modern Browsers */
    url("./fonts/economicaRegular.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}

/* das ist die Schrift des Luna-Logos - Bold */
@font-face {
  font-family: "Economica-Bold";
  src: url("./fonts/economicaBold.eot"); /* IE9 Compat Modes */
  src: url("./fonts/economicaBold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("./fonts/economicaBold.otf") format("opentype"), /* Open Type Font */
    url("./fonts/economicaBold.svg") format("svg"), /* Legacy iOS */
    url("./fonts/economicaBold.ttf") format("truetype"), /* Safari, Android, iOS */
    url("./fonts/economicaBold.woff") format("woff"), /* Modern Browsers */
    url("./fonts/economicaBold.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}

html {
    background-color: #e5e8ef;
  height: 100%;
  /*font-size: 100%;*/
  font-size: 120%;
  font-family: "Economica-Regular", "Droid Sans", Arial, Helvetica, sans-serif;
    line-height: 1.1;
}

/**
 * Grundlegende Seiteneinstellungen
 */
body {
  min-height: 100%;
  margin: 0 auto;
  padding: 0;
  background-color: #fff;
  /*background-image: -moz-linear-gradient(0deg, #444 0%, #949494);
  background-image: linear-gradient(90deg, #444 0%, #949494);*/
  /*background-image: url("main-background.png");*/
  /*background-size: 100% 100%;*/
  color: #222;
  box-shadow: 0 0 10px 2px #555;
  max-width: 60em;
  overflow-y: scroll;
}

header {
  /* Farbe Tobias */
  /*background: #000;*/
  background: #fff;
  padding: 0 2em;
  overflow: hidden;
}

footer {
  overflow: hidden;
  /* Original Tobias */
  /*background: #a483d6;*/
  /* 1. Aenderung */
  /*background: #afaac5;*/
  background: #a8aec9;
  bottom: 0;
  max-width: 75em;
  width: 100%;
  position: fixed;
  bottom: 0;
  /*border-top: 1px solid #555;*/
  line-height: 1em;
  padding: 0.2em 2em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 0.8em;
  /*box-shadow: 0px 10px 10px -6px #555 inset;*/
}

@media (max-width: 725px) {
    footer {
       position: static;
    }
}

/*nav {
  display: block;
  position: relative;
  line-height: 1em;
  overflow: hidden;
  background-color: #a483d6;
  font-family: "Droid Serif",serif;
  max-width: 60em;
}*/

#main {
  background-color: #fff;
  /*background-image: -moz-linear-gradient(0deg, #444 0%, #949494);
  background-image: linear-gradient(90deg, #444 0%, #949494);*/
  /*background-image: url("main-background.png");*/
  /*background-size: 100% 100%;*/
  padding: 1em 2em 6em;
  /* Schriftfarbe helles Grau, Original Tobias */
  /*color: #ddd;*/
  /* Schriftfarbe dunkles Grau */
  color: #505050;
  min-height: 100%;
  overflow: hidden;
}

/** Logo */
#logo {
    float: left;
}

#logo img {
    width: 165px;
}

/** header */
header h1 {
  font-size: 340%;
  line-height: 0.875;
}

/** footer */
footer a,
footer a:visited {
  color: #444;
}

footer a:hover {
  /* Original Tobias */
  /*color: #3ec3f3;*/
  color: #017864;
  text-decoration: underline;
}

footer p {
    margin-top: 0;
    margin-bottom: 0;
}

/** nav */
nav {
    position: relative;
    display: block;
    width: 100%;
    max-width: 60em;
    /* Original Tobias*/
    /*background-color: #a483d6;*/
    /* 1. Aenderung */
    /*background-color: #afaac5;*/
    background-color: #a8aec9;
    /*font-family: "Droid Serif",serif;*/
    font-family: "Economica-Regular";
    line-height: 1em;
}
nav ul {
    display: block;
    display: none;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 0 1.3em;
    margin: 0;
    /* Original Tobias */
    /*background-color: #3ec3f3;*/
    /* 1. Aenderung */
    /*background-color: #877fa8;*/
    background-color: #7780aa;
}
nav ul li {
    float: left;
    padding: 0;
    list-style-type: none;
}
nav ul a,
nav ul a:visited {
    display: block;
    padding: .25em .7em;
    color: #222;
    text-decoration: none;
}
nav ul li.active a,
nav ul a:hover {
    color: white;
    text-decoration: none;
}
#main-nav {
    display: block;
    /* Original Tobias */
    /*background-color: #a483d6;*/
    /* 1. Aenderung */
    /*background-color: #afaac5;*/
    background-color: #a8aec9;
}
#main-nav a {
    padding: .8em .7em;
    /*font-family: "Droid Serif",serif;*/
    font-family: "Economica-Bold";
}
#main-nav li.active a,
#main-nav a:hover {
    color: #222;
    /* Original Tobias */
    /*background-color: #3ec3f3;*/
    /* 1. Aenderung */
    /*background-color: #877fa8;*/
    background-color: #7780aa;
}
#main-nav .logo {
    float: left;
    margin-right: -.5em;
    margin-left: .5em;
}
#main-nav .logo a {
    position: relative;
    padding: .43em .35em .27em;
}
#main-nav .logo a:hover {
    background-color: inherit;
}
#main-nav .logo img {
    height: 1.5em;
    margin: auto;
}
#main-nav[data-sub-nav="wir"] ~ ul#sub-nav-wir,
#main-nav[data-sub-nav="konzert"] ~ ul#sub-nav-konzert
{
    display: block;
}

/*

nav ul {
  float: left;
  display: inline;
  padding: 0 1.3em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  bottom: 0;
  width: 100%;
}

#main-nav {
    display: block;
    background-color: #a483d6;
}

nav li {
  float: left;
  list-style-type: none;
  position: relative;
  line-height: 1;
  margin: 0;
}

nav li.active {
  background-color: #3ec3f3;
}

#main-nav li.active {
    background-color: #3ec3f3;
}

nav li:hover {
  background-color: #3ec3f3;
}

nav a,
nav a:visited {
  text-decoration: none;
  color: #222;
  font-size: 1em;
  padding: 0.7em;
  display: block;
}

nav li.active a {
  color: #222;
}

nav li:hover a {
  color: #ddd;
  text-decoration: none;
}

nav li a:hover {
  color: #222;
}*/

/** main */
.twocols {
    -moz-column-count: 2;
    column-count: 2;
}

.leftcol {
    float: left;
    max-width: 48%;
}

.rightcol {
    float: right;
    max-width: 48%;
}

.titleimage {
    width: 60%;
    display: block;
    border: 1px solid black;
    margin: 1em auto;
}

article {
    position: relative;
}

article::after {
    content: " ";
    clear: both;
    display: block;
    height: 0;
}

article + article {
    border-top: 1px solid #ddd;
    width: 100%;
    display: block;
    margin-top: 2em;
    padding-top: 1em;
}

a {
  text-decoration: none;
  /* Original Tobias */
  /*color: #3ec3f3;*/
  color: #241666;
}

a:visited {
  /* Original Tobias */
  /*color: #3ec3f3;*/
  color: #241666;
}

a:hover {
  text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
  /*font-family: "Droid Serif",sans-serif;*/
  font-family: "Economica-Regular";
  margin-bottom: 0.7em;
}

h1 {
  margin: 0.6em 0 0.6em;
  font-size: 250%;
}

h1:first-child {
  margin-top: 0;
}

h2 {
  margin: 1.6em 0 0.7em;
  font-size: 200%;
}

h2:first-child {
    margin-top: 0.6em;
}

h3, .h3 {
  margin: 1em 0 0.6em;
  font-size: 150%;
}

h4 {
  margin: 0.7em 0 0.5em;
  font-size: 120%;
}

.date {
    font-size: small;
    color: #3ec3f3;
    /* Original Tobias */
    /*color: #a483d6;*/
    /* 1. Aenderung */
    /*color: #877fa8;*/
    color: #7780aa;
    padding-right: 0.2em;
}
/*.date:after {
    content: " - ";
}*/

p {
  margin-bottom: 0.7em;
  line-height: 1.2em;
}

p:last-child {
  margin-bottom: 0;
}

iframe {
  border: none;
  margin: 0.5em 0;
}

ul {
  list-style-type: none;
}

ul.list {
  list-style-type: disc;
  padding-left: 2em;
  padding-top: 0.4em;
  padding-bottom: 0.4em;
}

pre {
  font-family: Consolas,"Lucida Console","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,typewriter;
  font-size: 0.95em;
  margin: 1em 0;
  padding: 0.5em;
  border: 1px solid #333;
  background-color: #ccc;
  color: #333;
  overflow: auto;
}

code {
  font-family: Consolas,"Lucida Console","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,typewriter;
  font-size: 0.95em;
}

img.profile-left,
a.profile-left {
  border: 1px solid #222;
  margin: 0 1em 0 0;
  float: left;
}

img.profile-right,
a.profile-right {
  border: 1px solid #222;
  margin: 0 0 0 1em;
  float: right;
}

table td {
    padding: 0.1em 0.4em;
}

table td.datecol {
    text-align: right;
    width: 4em;
}

td.daycol {
    padding-right: 0.1em;
    text-align: right;
    width: 1.8em;
}

td.daycol.range {
    width: 2.7rem;
    left: -.8rem;
    position: absolute;
}

td.monthcol {
    padding-left: 0.1em;
    text-align: right;
    width: 1.7em;
}

td.monthcol.range {
    position: relative;
    left: -0.25em;
    width: 1.95em;
    padding-right: 0.15em;
}

/** Kontaktformular */
form {
  max-width: 33em;
  padding: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 2em 0 0;
}

form:last-child {
  margin-bottom: -1em;
}

input,
input:focus,
textarea,
textarea:focus {
  padding: 3px 0.3em;
  outline: 1px #ddd solid;
  border: none;
  font-family: "Droid Sans", Arial, Helvetica, sans-serif;
}

input[type="checkbox"] {
  top: 4px;
  outline: none;
  position: relative;
  border: 1px solid #ddd;
  border-radius: 0;
}

.form-row {
  margin: 0.5em 0;
  position: relative;
}

.form-row:after {
  content: ".";
  clear: both;
  display: block;
  font-size: 0;
  height: 0;
  visibility: hidden;
}

.form-row:before {
  content: "";
  display: table;
}

.form-row label {
  float: left;
  width: 25%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 1.5;
}

.form-row input,
.form-row textarea {
  float: left;
  width: 75%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.form-row input.short {
  width: 5em;
}

.form-row textarea {
  height: 10em;
}

.form-row.shift-right input {
  margin-left: 25%;
  margin-right: 0.5ex;
  width: auto;
}

.form-row.shift-right label {
  width: auto;
}

.form-row.buttons {
  border-top: 1px solid #bbb;
  margin-top: 1em;
  padding: 1em 0;
}

button, a.button {
  /* Original Tobias */
  /*background-color: #3ec3f3;*/
  /* 1. Aenderung */
  /*background-color: #afaac5;*/
  background-color: #a8aec9;
  color: #222;
  /* Original Tobias */
  /*border: 1px solid #289eb5;*/
  /* 1. Aenderung */
  /*border: 1px solid #877fa8;*/
  border: 1px solid #7780aa;
  padding: 0.5em;
  cursor: pointer;
  font-family: "Economica-Regular";
}

button:hover {
  background-color: #6ce2ff;
}

.buttons button {
  float: right;
  font-size: 100%;
}

.info {
  font-size: 83%;
  margin-bottom: 0.3em;
  margin-top: 0.6em !important;
}

/** Meldungen */
.box {
  margin: 0.5em 0;
  padding: 1em;
  border: 1px solid #313739;
  background-color: #ddd;
}

.error {
  color: #f22;
}

.box.error {
  background-color: #872020;
  color: #ddd;
  border-color: red;
}

.warning {
  color: #e0aa21;
}

.box.warning {
  background-color: #e0aa21;
  color: #313739;
  border-color: #b08007;
}

.success {
  color: #4cd70b;
}

.box.success {
  background-color: #3ec3f3;
  color: #222;
  border-color: #1d5204;
}

/** Fehlerhafte Formulare */
.error input,
.error textarea {
  color: #313739;
  outline: 2px solid red;
}

/** Audio */
div.audio {
    /*overflow: hidden;
    background-color: rgba(0,0,0,0.25);
    padding: 0.4em;*/
}

.audio.box {
    background-color: rgba(0,0,0,0.25);
    padding: 0.4em;
    margin: 0;
}

audio {
  display: inline-block;
  float: left;
  /*margin-right: 10px;
  margin-top: 5px;*/
  vertical-align: middle;
}

.nofloat audio {
    float: none;
}

div.audio h4 {
  margin-bottom: 0.5em;
}

.download-menu {
  float: left;
}

.download-menu ul {
  visibility: hidden;
  background-color: #ddd;
  border: 1px solid #bbb;
  border-top: 0px;
  position: absolute;
}

.download-menu a,
.download-menu a:visited {
  color: #222;
  padding: 0.5em;
  width: 100%;
  height: 100%;
  display: block;
}

.download-menu li:hover {
  background-color: #bbb;
}

/** Fotos */
div.fotos {
  overflow: hidden;
  margin: 0 -5px;
  margin-top: 1em;
}

.foto-wrapper h2 {
    margin-top: 1.2em;
}

.foto-wrapper:first-child h2 {
    margin-top: 0.7em;
}

.foto-wrapper > p:first-child {
    margin-top: 1.2em;
}

a.fotos, a.foto-standalone {
  border: 1px solid #222;
  display: table-cell;
  vertical-align: middle;
  overflow: hidden;
}

a.foto-standalone img {
    width: 100%;
}

a.fotos {
  width: 160px;
  height: 100px;
  float: left;
  margin: 5px;
  position: relative;
}

a.fotos img,
a.fotos span {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  text-align: center;
}

/** Allgemein */
.pull-right {
  float: right;
  margin-left: 1em;
}

.pull-left {
  float: left;
  margin-right: 1em;
}

.contain-float {
    overflow: hidden;
}

.video_embed img {
    border: 1px solid black;
}

.videoblock {
    margin: 3.2em 0;
}

.videoblock + .videoblock {
    margin: 3.2em 0;
}

.videoblock h2 {
    margin-top: -0.1em;
    margin-bottom: 0.5em;
}

nav .logo {
    float: right;
    margin-right: -0.5em;
    margin-left: 0.5em;
}

nav .logo a {
    padding: 0.43em 0.35em 0.27em;
    position: relative;
}

.logo:hover {
    background-color: inherit;
}

nav .logo img {
    height: 1.5em;
    margin: auto;
}

li {
    padding: 0.1em 0;
}

.sticky {
    position: fixed;
    top: 0;
}

.quote {
    width: 365px;
    position: relative;
    /*float: left;*/
    margin: 2.5em;
}

.quote img {
    width: 365px;
    height: 552px;
    outline: 1px solid black;
}

.quote div {
    position: absolute;
    bottom: 0;
    color: #ccc;
    background-color: rgba(0,0,0,0.6);
    padding: 0.5em;
    margin-bottom: 4px;
    height: 7.5em;
}

.quote .author {
    font-style: italic;
    text-align: right;
    display: block;
    top: 6.9em;
    right: 0.5em;
    position: absolute;
}


.welcome {
    overflow: hidden;
}

.welcome-image {
    width: 49%;
    margin: 0;
}

.welcome-image > img {
    width: 100%;
}

.welcome-image > iframe {
    margin: 0;
    border: 1px solid black;
    box-sizing: border-box;
    max-width: 100%;
}

.welcome-text {
    width: 49%;
    margin: 0;
}

.welcome-text > h4:first-child {
    margin-top: 0;
}

.welcome-text img {
    width: 66.6666%;
    margin: auto;
    display: block;
}

.welcome-text > a {
    display: block;
    margin-bottom: 0.7em;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

q {
    font-style: italic;
}

#old-posts-wrapper {
    text-align: center;
}

#old-posts {
    display: inline-block;
}

@media (max-width: 700px) {
    .welcome-image {
        width: 100%;
        float: none;
        display: block;
        margin-top: 1em;
    }

    .welcome-text {
        width: 100%;
        float: none;
    }

    .welcome-image iframe {
        margin: auto;
        display: block;
    }
}

/** Konzertprogramm */
.concert-title {
    text-align: center;
    margin-bottom: 1rem;
}

.concert-title .pre-title {
    margin-bottom: .5rem;
}

.concert-title h1 {
    font-size: 1.875rem;
    font-weight: normal;
    margin: 0;
}

.concert-title h2 {
    font-size: 2.25rem;
    margin: 0 0 1rem 0;
    color: var(--concert-color);
}

.concert-title h2 .subtitle {
    display: block;
}

.concert-title .subtitle {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.concert-title .leaders p {
    margin: 0;
}

.program {
    counter-reset: program;
}

.program h3::before {
    counter-increment: program;
    content: counter(program);
    border-left: 1px solid black;
    border-right: 1px solid black;
    display: inline-block;
    padding: 0 .3rem;
    margin-right: .5rem;
}

.program h3 .subtitle::before {
    content: " ‒ ";
}

.program h3 .subtitle {
    font-size: 1rem;
}

.program .intro {
    border-left: 3px solid var(--concert-color);
    padding-left: 1rem;
}

.program .intro .h3 {
    font-size: 130%;
    font-weight: bold;
    /*margin-top: .7rem;*/
}

.program .song-info {
    margin-bottom: .7rem;
}

.program dl {
    margin-bottom: .5rem;
}

.program dt {
    display: inline;
    font-style: italic;
    font-size: .9rem;
}

.program dt::after {
    content: ": ";
    padding-right: .25rem;
}

.program dd {
    display: inline;
}

.program dd::after {
    content: "\A";
    white-space: pre;
}

.program .verse {
    font-size: .9rem;
}

.borderless {
    border: none !important;
}

.translation {
    display: grid;
    grid-template-areas: "original translated";
    grid-template-columns: minmax(15rem, 35%) minmax(0, 1fr);
    gap: 1rem;
}

.translation .original {
    grid-area: original;
}

.translation .translated {
    grid-area: translated;
    font-style: italic;
}

@media (max-width: 725px) {
    .concert {
        display: flex;
        flex-direction: column;
    }

    .concert > * {
        order: 3;
    }

    .concert > .concert-title {
        order: 1;
    }

    .concert > a {
        order: 2;

        float: none;
        margin: auto;
        width: auto !important;
        height: auto !important;
    }

    .program h3 .subtitle {
        display: block;
        text-align: right;
    }

    .translation {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (max-width: 460px) {
    .translation {
        grid-template-areas: "original" "translated";
        grid-template-columns: minmax(0, 1fr);

    }

    .translation .translated {
        text-align: right;
    }
}

.qr-code {
    position: absolute;
    top: -5px;
    left: -25px;
}

.concert-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 1rem;
}

.concert-list-item {
    width: 45%;
    text-align: center;
    flex-shrink: 1;
}

.concert-list-item {
}

.concert-list-item a {
    display: block;
    padding: .5rem;
}

.concert-list-item a:hover {
    background: #ddd;
}

.concert-list-item .img-wrap {
    display: block;
    overflow: hidden;
    height: auto;
    position: relative;
    aspect-ratio: 720/1040;
}

.concert-list-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*transform: translate(-50%, -50%);*/
    /*margin-top: 50%;*/
    /*margin-left: 50%;*/
}

.concert-list-item .date-title {
    display: block;
    font-size: 1rem;
    margin-top: .5rem;
}

.concert-list-item .title {
    display: block;
    font-size: 1.5rem;
}

@media (max-width: 725px) {
    .concert-list-item {
        width: 100%;
    }
}

.collapsible {
    overflow: hidden;
}

.collapsible .collapsible-title {
    font-weight: bold;
}

.collapsible .collapsible-toggle {
    font-weight: normal;
    font-size: smaller;
    margin-left: .5rem;
    cursor: pointer;
    text-decoration: underline;
    padding: .25rem;
    transition: background-color .2s ease-in-out;
    position: relative;
}

.collapsible .collapsible-toggle::after {
    content: '';
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIHY3LjIuMCBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZS9mcmVlIENvcHlyaWdodCAyMDI2IEZvbnRpY29ucywgSW5jLi0tPjxwYXRoIGQ9Ik00NzEuMSAyOTcuNEM0ODMuNiAzMDkuOSA0ODMuNiAzMzAuMiA0NzEuMSAzNDIuN0wyNzkuMSA1MzQuN0MyNjYuNiA1NDcuMiAyNDYuMyA1NDcuMiAyMzMuOCA1MzQuN0MyMjEuMyA1MjIuMiAyMjEuMyA1MDEuOSAyMzMuOCA0ODkuNEw0MDMuMiAzMjBMMjMzLjkgMTUwLjZDMjIxLjQgMTM4LjEgMjIxLjQgMTE3LjggMjMzLjkgMTA1LjNDMjQ2LjQgOTIuOCAyNjYuNyA5Mi44IDI3OS4yIDEwNS4zTDQ3MS4yIDI5Ny4zeiIvPjwvc3ZnPgo=');
    width: 15px;
    height: 15px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: .25rem;
    vertical-align: center;
    transition: transform .2s ease-in-out;
}

.collapsible .collapsible-toggle input {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    overflow: hidden;
    border: 1px solid transparent;
    cursor: pointer;
}
.collapsible .collapsible-toggle input:focus-visible {
    border: 1px solid #aaa;
}


.collapsible .collapsible-content {
    /*display: none;*/
    text-align: left;
    margin: 0 2rem;
    background-color: #eee;
    padding: 0 .5rem;
    overflow: hidden;
    max-height: 0;
    transition: max-height .2s ease-in-out, padding .2s ease-in-out, margin .2s ease-in-out;
}

.collapsible .collapsible-toggle:has(input:checked) {
    background-color: #eee;
}

.collapsible .collapsible-toggle:has(input:checked)::after {
    transform: rotate(90deg);
}

.collapsible:has(.collapsible-toggle input:checked) .collapsible-content {
    /*display: block;*/
    max-height: 500px;
    padding: .5rem;
    margin: 0 2rem .5rem;
}

@media (max-width: 600px) {
    .collapsible:has(.collapsible-toggle input:checked) .collapsible-content {
        margin: 0 1vw .5rem;
    }
}