@charset "UTF-8";
:root {
  --spacing-h-xs: 1rem;
  --spacing-h-s: 1.5rem;
  --spacing-h-m: 2rem;
  --spacing-h-l: 4rem;
  --spacing-h-xl: 6rem;
  --spacing-v-xs: 1rem;
  --spacing-v-s: 2rem;
  --spacing-v-m: 10vh;
  --spacing-v-l: 50vh;
  --spacing-v-xl: 100vh;
}

:root {
  --header-row-1: 3rem;
  --header-row-2: 0rem;
  --header-height: calc(var(--header-row-1) + var(--header-row-2));
  --column-gap: var(--spacing-h-xs);
  --content-main-gap: 2%;
  --content-main-col-width: 90%;
  --content-main-col: calc(
      (var(--content-main-col-width) - var(--content-main-gap) * 3) / 4 );
  --content-side: calc((100% - var(--content-main-col-width)) / 2);
  --grid-base:
      1fr
      [c1-s] var(--content-main-col) [c1-e]
      var(--content-main-gap)
      [c2-s] var(--content-main-col) [c2-e]
      var(--content-main-gap)
      [c3-s] var(--content-main-col) [c3-e]
      var(--content-main-gap)
      [c4-s] var(--content-main-col) [c4-e]
      1fr;
}

@media screen and (min-width: 1024px) and (orientation: landscape) {
  :root {
    --content-main-col-width: 90%;
  }
}
@media screen and (min-width: 1680px) and (orientation: landscape) {
  :root {
    --content-main-col-width: 80%;
  }
}
@media screen and (min-width: 1980px) and (orientation: landscape) {
  :root {
    --content-main-col-width: 70%;
  }
}
@font-face {
  font-family: "BodonieModa";
  font-weight: normal;
  src: url(_fonts/BodoniModa_18pt-Italic.ttf);
}
@font-face {
  font-family: "BodonieModa";
  font-weight: bold;
  src: url(_fonts/BodoniModa_18pt-BoldItalic.ttf);
}
@font-face {
  font-family: "Lato";
  font-weight: normal;
  src: url(_fonts/Lato-Regular.ttf);
}
@font-face {
  font-family: "Lato";
  font-weight: bold;
  src: url(_fonts/Lato-Bold.ttf);
}
:root {
  --fs-root: clamp(.75rem, calc(2vmax + .1rem), 1.2rem);
  --letter-spacing: clamp(0em, 0.02vw, 0.05em);
  --fs-00: calc((var(--fs-01)/10) * 7);
  --fs-01: 1rem;
  --fs-02: calc(var(--fs-01) * 1.2);
  --fs-03: calc(var(--fs-01) * 1.4);
  --fs-04: calc(var(--fs-01) * 1.7);
  --fs-05: calc(var(--fs-01) * 2.2);
  --fs-xl: calc(var(--fs-01) * 2.7);
}

html {
  font-size: var(--fs-root);
  letter-spacing: var(--letter-spacing);
  hyphenate-limit-chars: 10 3 3;
}

body {
  font-family: "Lato";
  font-weight: normal;
  color: var(--col-darkred);
  line-height: 1.4;
}

h1, h2, h3, h4, h5, h6, p {
  padding: 0;
  margin: 0;
}

p, li {
  -webkit-hyphens: auto;
          hyphens: auto;
}

h1 {
  font-size: var(--fs-05);
  margin-bottom: 1em;
}

h2, h3, h4, h5, h6 {
  margin-bottom: 0.5em;
  line-height: 1.2;
}

h2 {
  font-size: var(--fs-04);
}

h3 {
  font-size: var(--fs-03);
}

p, ul, li, h4, h5, h6, input, button {
  font-size: var(--fs-01);
  margin-bottom: 1ch;
}

@media screen and (min-width: 1680px) and (orientation: landscape) {
  :root {
    --fs-00: .9rem;
    --fs-01: 1rem;
    --fs-02: 1.25rem;
    --fs-03: 1.5rem;
    --fs-04: 2.2rem;
    --fs-05: 3rem;
    --fs-xl: 4rem;
  }
}
@media screen and (min-width: 1980px) and (orientation: landscape) {
  :root {
    --fs-00: 1rem;
    --fs-01: 1.1rem;
    --fs-02: 1.3rem;
    --fs-03: 1.7rem;
    --fs-04: 2rem;
    --fs-05: 2.7rem;
    --fs-xl: 3.2rem;
  }
}
a:-moz-any-link {
  color: unset;
  text-decoration: none;
  cursor: pointer;
}
a:any-link {
  color: unset;
  text-decoration: none;
  cursor: pointer;
}

.typo-big-marked {
  font-family: "Lato";
  font-weight: normal;
  position: relative;
  font-size: var(--fs-04);
}
.typo-big-marked:before {
  content: ">";
  position: absolute;
  left: -2rem;
}
.typo-big-marked strong {
  font-size: var(--fs-01);
}

.kolumne-bodoni {
  font-family: "BodoniModa";
  font-weight: normal;
  font-style: italic;
  line-height: 1;
  color: var(--col-orange);
  font-size: var(--fs-xl);
  color: var(--col-orange);
}

:root {
  --col-trans: 1;
  --col-orange-h: 19;
  --col-orange-s: 100%;
  --col-orange-l: 59%;
  --col-orange: hsl(var(--col-orange-h) var(--col-orange-s) var(--col-orange-l) / var(--col-trans));
  --col-yellow-h: 39;
  --col-yellow-s: 100%;
  --col-yellow-l: 73%;
  --col-yellow: hsl(var(--col-yellow-h) var(--col-yellow-s) var(--col-yellow-l) / var(--col-trans));
  --col-yellow-medium-h: 41;
  --col-yellow-medium-s: 100%;
  --col-yellow-medium-l: 89%;
  --col-yellow-medium: hsl(var(--col-yellow-medium-h) var(--col-yellow-medium-s) var(--col-yellow-medium-l) / var(--col-trans));
  --col-darkred-h: 0;
  --col-darkred-s: 100%;
  --col-darkred-l: 16%;
  --col-darkred: hsl(var(--col-darkred-h) var(--col-darkred-s) var(--col-darkred-l) / var(--col-trans));
}

:root {
  --base-duration: 500ms;
}

:root {
  /* Formulare: Inputs, Textareas, Selects, Checkboxen/Radios – oft der am meisten vernachlässigte Bereich, weil Browser-Defaults stark variieren
  Links: eigener Zustand oft nötig (Unterstreichung, Hover, visited)
  Fokus-Zustände (:focus-visible): wichtig für Barrierefreiheit, wird gerne vergessen
  Karten/Cards: falls dein Theme wiederkehrende Card-Komponenten hat
  Badges/Tags: kleine Label-Elemente
  Schatten/Elevation: falls du ein konsistentes Schatten-System für Buttons/Cards willst (auch als eigene Custom Properties denkbar, ähnlich wie Spacing)
  Trennlinien (hr, Divider-Klassen)
  Tooltips
   */
}
:root .c2a {
  cursor: pointer;
}
:root .c2a-more {
  color: white;
  color: var(--col-yellow-medium);
  padding: 0.5em;
  font-size: var(--fs-01);
  background: var(--col-orange);
  text-decoration: underline;
}
footer {
  position: relative;
  display: grid;
  grid-template-columns: var(--grid-base);
  align-items: start;
  padding-top: var(--spacing-v-s);
  /*     margin-top: calc(100vh - var(--header-height));
      margin-top: 30vh;

      height:calc(100dvh - var(--header-height)); */
  background: var(--col-orange);
  margin-bottom: 0;
}

.footer-content {
  margin-bottom: 0;
  padding-bottom: 0;
  color: white;
}
.footer-content .c2a.c2a-more {
  color: white;
}

.footer-content .icon-wrapper {
  display: flex;
  justify-content: center;
  gap: var(--spacing-h-s);
}

footer .imprint {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: var(--grid-base);
  background: black;
  color: white;
}
footer .imprint p {
  grid-column: c1-s/c2-e;
  margin-bottom: 0;
}

header {
  display: grid;
  grid-template-columns: var(--grid-base);
  position: sticky;
  position: fixed;
  top: 0;
  width: 100%;
  top: 0;
  width: 100%;
  height: var(--header-height);
  background: var(--col-darkred);
  background: hsla(14deg, 98%, 70%, 0.8);
  background: linear-gradient(180deg, hsl(14deg, 98%, 70%) 40%, hsla(14deg, 98%, 70%, 0.8));
  z-index: 100000;
}

.logo-header {
  grid-column: c1-s/c3-e;
  position: relative;
  height: calc(var(--header-height) * 0.8);
  width: 66%;
  justify-self: start;
  align-self: end;
}
.logo-header img {
  width: 100%;
  height: auto;
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  .logo-header {
    grid-column: c1-s/c1-e;
    width: 62%;
  }
}

.cs-slider {
  grid-column: 1/-1;
}

html, body {
  width: 100%;
  padding: 0px;
  margin: 0px;
}
html *, body * {
  box-sizing: border-box;
}

main {
  display: grid;
  grid-template-columns: var(--grid-base);
}

.container {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: var(--grid-base);
}

section {
  display: grid;
  grid-template-columns: var(--grid-base);
  grid-column: 1/-1;
  position: relative;
  padding: 1rem 0;
}

.nav-main {
  display: grid;
  grid-template-rows: 0dvh;
  position: fixed;
  top: var(--header-height);
  width: 100%;
  z-index: 900;
  background: var(--col-darkred);
  transition: grid-template-rows 500ms ease;
}
.nav-main.is-active {
  grid-template-rows: calc(50dvh - var(--header-height));
}
.nav-main ul.menu {
  flex-direction: column;
  text-align: right;
  padding-right: 2rem;
  gap: 1rem;
}
.nav-main p, .nav-main ul, .nav-main li {
  color: black;
  padding: 0 1em;
  margin-bottom: 0;
  transition: background-color var(--base-duration) ease;
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  .nav-main p, .nav-main ul, .nav-main li {
    font-size: calc(0.8 * var(--fs-01));
  }
}
@media screen and (min-width: 1480px) and (orientation: landscape) {
  .nav-main p, .nav-main ul, .nav-main li {
    font-size: var(--fs-01);
  }
}
.nav-main p:hover {
  border-radius: var(--border-radius);
  background-color: var(--tuerkis-hell);
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  .nav-main {
    grid-column: c2-s/c4-e;
    grid-row: 1/2;
    display: flex;
    gap: 2ch;
    justify-content: center;
    justify-self: end;
    position: absolute;
    top: unset;
    width: unset;
    background: none;
  }
  .nav-main ul.menu {
    flex-direction: row;
    text-align: unset;
    padding-right: 0;
    gap: 2rem;
  }
  .nav-main p {
    color: black;
  }
}

.nav-main.is-active {
  grid-template-rows: calc(50dvh - var(--header-height));
}
.nav-main.is-active ul.menu {
  flex-direction: column;
  text-align: right;
  padding-right: 2rem;
  gap: 1rem;
}

.nav-main div.wrapper {
  overflow: hidden;
  margin: 1em;
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  .nav-main div.wrapper {
    overflow: unset;
    display: flex;
    gap: 1rem;
  }
}
.nav-main div.wrapper p.kontakt {
  color: var(--col-yellow);
  text-align: right;
  margin-right: 1rem;
  margin-top: 3rem;
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  .nav-main div.wrapper p.kontakt {
    margin: 0;
  }
}

.nav-main .menu {
  display: flex;
  gap: 2rem;
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-main .menu > li {
  display: contents;
}

.nav-main .menu > li > a {
  grid-column: 1;
  color: white;
}

.nav-main .sub-menu {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  position: absolute;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity 250ms ease;
  background: var(--tuerkis);
}
.nav-main .sub-menu li {
  color: black;
  text-transform: none;
  font-size: var(--fs-02);
  line-height: 1.1;
  -webkit-hyphens: none;
          hyphens: none;
  margin-bottom: 0.5em;
}

.nav-main .menu > li.is-open > .sub-menu,
.nav-main:not(.has-user-selection) .menu > li.current-menu-ancestor > .sub-menu {
  visibility: visible;
  opacity: 1;
}

.nav-main .menu li.current-menu-item > a {
  font-weight: 700;
  padding-left: 0.5em;
}

.current-page-ancestor > a {
  background: var(--tuerkis);
  color: black;
  font-weight: 700;
}

.nav-main .sub-menu li.current-menu-item > a {
  font-weight: 500;
}
.nav-main .sub-menu li.current-menu-item > a::before {
  content: "»";
  margin-right: 0.4em;
}

#menue-icon {
  all: unset;
  position: absolute;
  grid-column: c3-s/c4-e;
  align-self: center;
  right: 2rem;
  font-size: var(--fs-00);
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  color: white;
  cursor: pointer;
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  #menue-icon {
    display: none;
  }
}

#menue-icon::before {
  content: "";
  display: block;
  position: relative;
  width: 2rem;
  height: 2rem;
  background: url(_bm/icons/CS-icons_hamburger_web.svg);
  background-size: cover;
}

nav.breadcrumb {
  display: grid;
  grid-template-columns: var(--grid-base);
  -moz-column-gap: unset;
       column-gap: unset;
  position: sticky;
  top: var(--header-height);
  height: 1rem;
  padding-left: 1rem;
  background: var(--col-yellow-medium);
  z-index: 999;
  font-size: var(--fs-00);
}
nav.breadcrumb * {
  grid-column: c1-s/c4-e;
}

.kolumne {
  grid-column: c1-s/c4-e;
}

section .content-spalte {
  grid-column: c1-s/c4-e;
  position: relative;
}

section .c2a {
  grid-column: c1-s/c4-e;
  justify-self: center;
}

.content-spalte .c2a-more {
  background: none;
  display: inline-block;
  color: var(--col-orange);
}

.start-exzerpt {
  padding: 2rem 0;
  margin-bottom: 2rem;
}
.start-exzerpt .content-spalte {
  position: relative;
  text-align: center;
  width: 80%;
  margin: 0 auto;
}
.start-exzerpt .content-spalte h3 {
  font-family: "BodoniModa";
  font-weight: normal;
  font-style: italic;
  line-height: 1;
  color: var(--col-orange);
  font-size: var(--fs-05);
  font-style: italic;
  color: var(--col-orange);
}
.start-exzerpt .content-spalte h3 strong {
  font-family: "Lato";
  font-weight: normal;
  font-weight: bold;
  font-style: normal;
  text-transform: uppercase;
  color: var(--col-darkred);
}
.start-exzerpt .content-spalte p {
  padding: 0 2rem;
}

.start-exzerpt .content-spalte p {
  max-width: 50ch;
  margin: 0 auto;
}
.start-exzerpt .content-spalte:before {
  content: "";
  position: absolute;
  width: 3.5rem;
  height: 3.5rem;
  background: url(_bm/zitat.svg) no-repeat;
  background-size: contain;
  left: -3rem;
  bottom: -2rem;
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  .start-exzerpt .content-spalte:before {
    width: 7rem;
    height: 7rem;
    left: -7rem;
    bottom: -3.5rem;
  }
}
.start-exzerpt .content-spalte:after {
  content: "";
  position: absolute;
  width: 3.5rem;
  height: 3.5rem;
  background: url(_bm/zitat.svg) no-repeat;
  background-size: contain;
  right: -3rem;
  top: 0;
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  .start-exzerpt .content-spalte:after {
    width: 7rem;
    height: 7rem;
    right: -7rem;
  }
}

.termine {
  background: var(--col-yellow-medium);
}
.termine .datum {
  display: grid;
  position: relative;
}
.termine .datum .date-big {
  align-self: center;
  font-family: "Lato";
  font-weight: bold;
  font-size: var(--fs-04);
  line-height: 0.7;
}
.termine .datum .date-big strong {
  font-size: var(--fs-01);
  font-weight: normal;
}
.termine .datum .date-big:before {
  content: ">";
  position: absolute;
  left: -2rem;
}
.termine .location {
  font-family: "BodoniModa";
  font-weight: normal;
  font-style: italic;
  line-height: 1;
  color: var(--col-orange);
  font-size: var(--fs-04);
  margin-bottom: 0;
}
.termine h3 {
  font-size: var(--fs-04);
}
.termine .c2a {
  grid-column: c1-s/c4-e;
  justify-self: center;
}

section.musik.musik-teaser {
  padding: 1rem 0;
}

.musik-teaser {
  background: url(_bm/Texthintergrund-tastatur_haende.jpg) no-repeat;
  background-size: cover;
}
.musik-teaser .kolumne {
  font-family: "BodoniModa";
  font-weight: normal;
  font-style: italic;
  line-height: 1;
  color: var(--col-orange);
  font-size: var(--fs-05);
  font-size: var(--fs-xl);
}
.musik-teaser .spalte-l {
  display: grid;
  align-items: end;
}
.musik-teaser .spalte-l .typo-big-marked {
  font-weight: bold;
  line-height: 1;
}
.musik-teaser .spalte-l .typo-big-marked strong {
  font-weight: normal;
}
.musik-teaser .c2a {
  grid-column: c1-s/c4-e;
  justify-self: center;
}

.nini-funke-teaser {
  align-items: start;
  min-height: 100vh;
  overflow: hidden;
  background: url(_bm/nini-funke-im-park.jpg) no-repeat;
  background-size: cover;
  background-position: top center;
}
.nini-funke-teaser figure {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}
.nini-funke-teaser figure img {
  width: 100%;
  height: auto;
}
.nini-funke-teaser .wrapper {
  grid-column: c1-s/c4-e;
}
.nini-funke-teaser .wrapper .typo-big-marked {
  font-weight: bold;
}

.nini-funke-teaser .highlight {
  position: relative;
  line-height: 1.6;
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  .nini-funke-teaser .highlight {
    width: 60%;
    left: 30%;
  }
}
.nini-funke-teaser .highlight strong {
  display: inline; /* wichtig: nicht block/inline-block */
  background: white;
  font-weight: normal;
  padding: 0.1em 0.4em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.presse-teaser .content-spalte h3 {
  font-size: var(--fs-02);
  line-height: 1.2;
}
.presse-teaser .content-spalte .c2a {
  background: none;
  color: var(--col-orange);
  padding: 0;
}

.page-intro .kolumne {
  font-family: "Lato";
  font-weight: bold;
  font-size: var(--fs-04);
}
.page-intro .spalte-r strong {
  font-family: "BodoniModa";
  font-weight: normal;
  font-style: italic;
  line-height: 1;
  color: var(--col-orange);
  font-size: var(--fs-03);
  position: relative;
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  .page-intro .spalte-r strong {
    left: -3em;
  }
}

section.presse-wrapper {
  grid-column: c1-s/c4-e;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
  gap: var(--spacing-h-m);
}

.intro-wrapper {
  grid-column: c1-s/c4-e;
}

section.fotos-wrapper {
  grid-column: c1-s/c4-e;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
  gap: var(--spacing-h-xs);
}
section.fotos-wrapper figure {
  margin: 0;
}

section.termine-wrapper {
  background: var(--col-yellow-medium);
  margin-bottom: 0;
  border-bottom: 3px solid white;
}

section.termine-chronik {
  grid-column: c1-s/c4-e;
}

section.musik {
  margin-bottom: 0;
  padding: 0;
}

section.musik .content-spalte {
  grid-column: 1/-1;
  padding: 0 var(--spacing-h-s);
  margin-bottom: 0;
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  section.musik .content-spalte {
    -moz-column-gap: var(--content-main-gap);
         column-gap: var(--content-main-gap);
    padding: 0 var(--content-side);
  }
}

section.musik > * {
  margin-inline: 0 !important;
}

.content-spalte.cd-info {
  --cover-ueberstand: 4rem;
  margin-top: calc(-1 * var(--cover-ueberstand));
}
.content-spalte.cd-info.bg-darkred {
  background: linear-gradient(to bottom, transparent var(--cover-ueberstand), var(--col-darkred) var(--cover-ueberstand));
}
.content-spalte.cd-info.bg-yellow {
  background: var(--col-yellow);
}
.content-spalte.cd-info h2 {
  font-family: "BodoniModa";
  font-weight: normal;
  font-style: italic;
  line-height: 1;
  color: var(--col-orange);
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  .content-spalte.cd-info .spalte-r {
    margin-top: calc(var(--cover-ueberstand) + 1rem);
  }
}

section.musik .content-spalte.cd-content {
  padding-bottom: 15vh;
  padding-top: 2rem;
}
section.musik .content-spalte.cd-content .kolumne {
  font-family: "Lato";
  font-weight: bold;
  font-size: var(--fs-04);
  margin-bottom: 0;
}

.content-spalte .spalte-l {
  grid-column: c1-s/c2-e;
}

.content-spalte .spalte-r {
  grid-column: c3-s/c4-e;
}
.content-spalte .spalte-r .col-orange {
  color: var(--col-orange);
}
.content-spalte .spalte-r .col-white {
  color: white;
}

.bg-pedal {
  background: url(_bm/Texthintergrund-pedale.jpg) no-repeat;
  background-size: cover;
}

.bg-haende {
  background: url(_bm/Texthintergrund-tastatur_haende.jpg) no-repeat;
  background-size: cover;
}

.cd-content ul {
  list-style: none;
  margin: 0 0 1em;
  padding: 0;
}
.cd-content li {
  position: relative;
  padding-left: 1.4em;
}
.cd-content a[href$=".mp3"] {
  color: var(--col-orange);
  text-decoration: none;
  transition: color var(--base-duration) ease;
}
.cd-content a[href$=".mp3"]::before {
  content: "▸";
  position: absolute;
  left: 0;
  width: 1.4em;
  text-align: left;
}
.cd-content a[href$=".mp3"]:hover, .cd-content a[href$=".mp3"]:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.cd-content a[href$=".mp3"].is-playing, .cd-content a[href$=".mp3"].is-paused {
  font-weight: 700;
}
.cd-content a[href$=".mp3"].is-playing::before {
  content: "❚❚";
  font-size: 0.6em;
  top: 0.55em;
  letter-spacing: -0.1em;
}/*# sourceMappingURL=base.css.map */