@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: 10dvh;
  --header-row-2: 0rem;
  --header-height: calc(var(--header-row-1) + var(--header-row-2));
  --column-gap: var(--spacing-h-xs);
  --content-main-gap: 2vw;
  --content-main-col-width: 90%;
  --content-main-col: calc(
      (var(--content-main-col-width) - var(--content-main-gap) * 3) / 4 );
  --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;
}

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

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

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

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

.c2-c3 {
  grid-column: c2-s/c3-e;
}

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

.c2-c3 {
  grid-column: c3-s/c4-e;
}

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

.cFull {
  grid-column: 1/-1;
}
@media screen and (min-width: 1680px) and (orientation: landscape) {
  .cFull {
    grid-column: c1-s/c4-e;
  }
}

@media screen and (min-width: 1024px) and (orientation: landscape) {
  :root {
    --content-main-col-width: 90%;
    --header-row-1: 0rem;
    --header-row-2: 5rem;
  }
}
@media screen and (min-width: 1680px) and (orientation: landscape) {
  :root {
    --content-main-col-width: 70%;
  }
}
@media screen and (min-width: 1980px) and (orientation: landscape) {
  :root {
    --content-main-col-width: 50%;
  }
}
@font-face {
  font-family: "EncSans";
  font-weight: 300;
  src: url(_fonts/EncodeSans_SemiExpanded-Light.ttf);
}
@font-face {
  font-family: "EncSans";
  font-weight: bold;
  src: url(_fonts/EncodeSans_SemiExpanded-Bold.ttf);
}
@font-face {
  font-family: "PinyonScript";
  font-weight: normal;
  src: url(_fonts/PinyonScript-Regular.ttf);
}
@font-face {
  font-family: "Balthazar";
  font-weight: normal;
  src: url(_fonts/Balthazar-Regular.ttf);
}
/*
@font-face {
    font-family: "RobotoSlab";
    font-weight: 400;
    src: url(_fonts/RobotoSlab-Regular.ttf);
}

@font-face {
    font-family: "RobotoSlab";
    font-weight: 300;
    src: url(_fonts/RobotoSlab-Light.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) * 8);
  --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) * 7);
}

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

body {
  font-family: "EncSans", sans-serif;
  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;
}

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: 1rem;
}

a:-moz-any-link {
  color: unset;
  text-decoration: none;
  cursor: pointer;
}

a:any-link {
  color: unset;
  text-decoration: none;
  cursor: pointer;
}

:root {
  --col-trans: 1;
  --col-beige-h: 16;
  --col-beige-s: 17%;
  --col-beige-l: 77%;
  --col-beige: hsl(var(--col-beige-h) var(--col-beige-s) var(--col-beige-l) / var(--col-trans));
  --col-beige-hell-h: 34;
  --col-beige-hell-s: 22%;
  --col-beige-hell-l: 79%;
  --col-beige-hell: hsl(var(--col-beige-hell-h) var(--col-beige-hell-s) var(--col-beige-hell-l) / var(--col-trans));
  --col-gold-h: 43;
  --col-gold-s: 32%;
  --col-gold-l: 52%;
  --col-gold: hsl(var(--col-gold-h) var(--col-gold-s) var(--col-gold-l) / var(--col-trans));
}

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

.c2a {
  all: unset;
  display: inline-block;
  justify-self: start;
  outline: 1px solid black;
  padding: 0.5em;
  background: rgba(255, 255, 255, 0.5);
  color: black;
  font-size: var(--fs-02);
  cursor: pointer;
}

/* 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
 */
footer {
  background: var(--col-beige);
  position: relative;
  display: grid;
  grid-template-columns: var(--grid-base);
  align-items: end;
}
footer * {
  grid-column: c1-s/c4-e;
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  footer {
    min-height: calc(100dvh - var(--header-height));
  }
}
footer .kolumne {
  grid-column: c1-s/c2-e;
}
footer .footer-wrapper {
  grid-column: c1-s/c4-e;
  transition: opacity 1500ms ease;
  /*-breakpoint-*/
}
footer .footer-wrapper .c2a {
  margin: 1rem 0;
}
footer .footer-wrapper p, footer .footer-wrapper h2, footer .footer-wrapper h3 {
  color: white !important;
}
footer .footer-wrapper p, footer .footer-wrapper h2 {
  color: var(--grau-dunkel) !important;
}
footer .footer-wrapper h3 {
  line-height: 1;
  margin-bottom: 1rem;
  color: var(--blau) !important;
  font-size: var(--fs-04);
}
/*---footer--*/
@media screen and (min-width: 1024px) and (orientation: landscape) {
  footer .ghm-block {
    grid-column: c3-s/c4-e;
  }
}

.footer-footer {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: var(--grid-base);
  color: white;
  background: black;
  width: 100%;
  padding: 0.5rem 0 2rem 0;
}
.footer-footer p {
  grid-column: c1-s/c4-e;
  font-size: var(--fs-00);
  justify-self: end;
  margin: 0;
}

footer.is-active {
  opacity: 1;
  transition: opacity 1000ms ease;
}

footer.is-active .footer-wrapper {
  opacity: 1;
  transition: opacity 2500ms ease;
}

body:has(main.portal) footer, body:has(main.standard) footer {
  background: url(_bm/naturheilpraxis-am-zoo-wuppertal-martin-boje.webp) no-repeat;
  background-size: cover;
  background-position: top;
}

header {
  display: grid;
  grid-template-columns: var(--grid-base);
  position: sticky;
  top: 0;
  width: 100%;
  height: var(--header-height);
  /*     
      background-image:url(_bm/sound-vom-feinsten-greenhouse-music-label-tonstudio-akustik-pretschner-wuppertal-tonaufnahmen_ls.webp);
      background-repeat:no-repeat;
      background-size: 40%;
      background-position:bottom; */
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0);
  transition: background-color 500ms ease;
}

.logo-header {
  grid-column: c1-s/c3-e;
  position: absolute;
  bottom: 0.5rem;
  height: calc(var(--header-height) * 0.8);
  height: auto;
  width: 66%;
  justify-self: start;
  align-self: end;
  /*     &:after{
          content:'seit 1994';
          position:absolute;
          width:100%;
          //background:red;
          height:2rem;
          bottom: -2.5rem;
          @include typo-copy;
          font-weight:bold;
          font-size:var(--fs-02);
          text-align:center;
          line-height:1;

      } */
}
.logo-header picture {
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
}
.logo-header picture img {
  display: block;
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  .logo-header {
    grid-column: c1-s/c1-e;
    width: 100%;
  }
}

.header-is-scrolled {
  background-color: rgba(255, 255, 255, 0.9);
  transition: background-color 500ms ease;
}

section.hero {
  position: relative;
}
section.hero .greenhouse-img-desktop {
  display: none;
}
section.hero .greenhouse-img {
  grid-column: c1-s/c4-e;
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  section.hero .greenhouse-img-desktop {
    display: block;
    grid-column: c1-s/c4-e;
  }
  section.hero .greenhouse-img {
    display: none;
  }
}
section.hero h1 {
  grid-column: c1-s/c4-e;
  font-size: var(--fs-02);
  line-height: 1;
}
section.hero h1 strong {
  font-size: var(--fs-02);
}
section.hero img {
  height: auto;
  width: 100%;
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  section.hero img {
    max-width: 100%;
    height: auto;
  }
}

.hero-image {
  position: relative;
}

.hero-rene {
  display: none;
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  .hero-rene {
    display: block;
    position: absolute;
    top: 7rem;
    right: 5rem;
    width: 7rem;
    height: 7rem;
    z-index: 10;
    cursor: pointer;
    /* background:url(_bm/thumb-rene-pretschner-akustik-tonstudio-wuppertal-nrw.webp) no-repeat;
    background-size:cover; */
  }
  .hero-rene figure {
    position: relative;
    display: inline-block;
    overflow: hidden;
    border-radius: 50%;
    border: 10px solid #F4F1E2;
  }
  .hero-rene:before {
    content: "auch interessant: René Pretschner als Musiker";
    font-size: var(--fs-00);
    font-size: 0.5rem;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    position: absolute;
    top: -2.5rem;
    left: 0;
    background: #F4F1E2;
    padding: 2em;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
  }
  .hero-rene:after {
    content: ">";
    font-size: var(--fs-03);
    color: white;
    text-align: center;
    line-height: 1;
    position: absolute;
    bottom: 3rem;
    right: 0.75rem;
  }
}
@media screen and (min-width: 1680px) and (orientation: landscape) {
  .hero-rene {
    right: 20vw;
  }
}
@media screen and (min-width: 1980px) and (orientation: landscape) {
  .hero-rene {
    right: 30vw;
  }
}

.hero-image-greenhouse-studio:after {
  --label-height: 4rem;
  content: "";
  position: absolute;
  top: calc(0 * var(--label-height) / 2.1);
  left: 2vw;
  width: var(--label-height);
  height: var(--label-height);
  background: url(_bm/label-seit1994.svg) no-repeat;
  background-size: cover;
  border-radius: 50%;
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  .hero-image-greenhouse-studio:after {
    --label-height: 7rem;
    top: calc(-1 * var(--label-height) / 2.1);
    left: 5vw;
  }
}

html, body {
  width: 100%;
  padding: 0px;
  margin: 0px;
  background-color: var(--col-beige);
}
html *, body * {
  box-sizing: border-box;
}

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

main article {
  overflow-x: hidden;
}

main article section {
  display: grid;
  grid-template-columns: var(--grid-base);
  grid-column: 1/-1;
  margin-bottom: var(--spacing-v-s);
  padding: 2rem 0;
  position: relative;
  background-color: var(--col-beige);
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  main article section.full-width {
    grid-column: 1/-1;
  }
}

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

ul {
  margin-top: 0;
}

.nav-main {
  display: none;
  display: grid;
  grid-template-rows: 0dvh;
  position: fixed;
  top: var(--header-height);
  width: 100%;
  background: lightcoral;
  z-index: 900;
  transition: grid-template-rows 500ms ease;
}
.nav-main p, .nav-main ul, .nav-main li {
  font-family: "Balthazar", serif;
  font-size: var(--fs-02);
  text-transform: uppercase;
  color: black;
  padding: 0 1em;
  margin-bottom: 0;
  transition: background-color var(--base-duration) ease;
}
.nav-main li:hover {
  transition: background-color var(--base-duration) ease;
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  .nav-main {
    grid-column: c2-s/c4-e;
    grid-row: 1/2;
    justify-self: start;
    display: flex;
    display: none;
    gap: 2ch;
    justify-content: center;
    justify-self: end;
    align-self: center;
    position: absolute;
    top: unset;
    width: unset;
    background: none;
    height: unset;
  }
}

.nav-main div.wrapper {
  overflow: hidden;
  margin: 1em;
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  .nav-main div.wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nav-main div.wrapper .menu-item {
    -webkit-border-end: 2px solid black;
            border-inline-end: 2px solid black;
    line-height: 1;
  }
}

.nav-main .menu {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  .nav-main .menu {
    display: flex;
  }
}

#menue-icon {
  all: unset;
  display: none;
  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;
  cursor: pointer;
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  #menue-icon {
    display: none;
  }
}

#menue-icon::before {
  content: "";
  display: block;
  display: none;
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  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: white;
  z-index: 999;
  font-size: var(--fs-00);
}
nav.breadcrumb * {
  grid-column: 2/3;
}

section.canvas {
  min-height: 100vh;
}

/*
Hintergrund-Layer hinter dem Hauptinhalt.

Im Layer liegen alle Canvas-Eintraege (Beitraege der Kategorie 'canvas')
absolut uebereinander gestapelt. Sichtbar ist immer genau einer:

    #canvas[data-active="n"]  ->  .canvas__item[data-index="n"]

data-active setzt js/base.js aus der Scrollposition. CSS macht den Rest -
JS kennt weder Opacity noch Timing. Jedes Item hat genau zwei Kinder:
das Beitragsbild in figure.canvas__media und den restlichen Beitragsinhalt
in div.canvas-content - beide vom Template gesetzt, beide in derselben
Grid-Zeile, also uebereinander.

Ausgeloest wird der Wechsel von den Sections: eine Section mit der Klasse
canvas-001 schaltet nach dem Durchlaufen auf den ersten Eintrag des
Beziehungsfeldes, canvas-002 auf den zweiten usw. Die Nummer ist der Index
im Feld, nicht die Nummer der Section.
*/
:root {
  --canvas-top: var(--header-height);
  --canvas-gap: 120vh;
  --canvas-gap-min: var(--spacing-v-s);
  /*
    Der Bildwechsel findet hinter der Trigger-Section statt, solange die
    den Layer abdeckt (section.canvas, min-height 100vh). Ein Fade ist
    dort nicht nur unnoetig - er ist die einzige Moeglichkeit, dass man
    den Wechsel doch mitbekommt: das verdeckte Fenster ist nur so breit
    wie --canvas-top (gut 100px Scrollweg), und ein einzelner Mausrad-
    Tick ist genauso weit. Deshalb 0ms.

    Hoehere Werte nur, wenn der Wechsel bewusst sichtbar sein soll - dann
    gehoert aber auch die Umschaltschwelle in js/base.js nach hinten.
  */
  --canvas-fade: 0ms;
}

#canvas {
  /*
    Der Layer reicht bis an die Viewport-Unterkante, ist also so hoch wie
    der sichtbare Bereich. Das ist wesentlich: die Luecke im Content
    wandert beim Scrollen von unten nach oben durch den Viewport, und nur
    dort, wo der Layer liegt, ist ueberhaupt ein Bild zu sehen. Ein
    niedrigeres Band (vorher 70vh unter dem Header) laesst die Luecke im
    unteren Viewport auf den body-Hintergrund blicken - das Bild erschien
    erst, wenn die Luecke ins Band hochgewandert war.

    Das Bild steht damit still und die Luecke laeuft darueber, wie ein
    Fenster, das sich ueber ein Plakat schiebt.
  */
  position: fixed;
  inset: var(--canvas-top) 0 0 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/*
#canvas ist fixed und liegt damit ausserhalb des main-Grids. main und footer
muessen deshalb explizit darueber gelegt werden: ein positioniertes Element
mit z-index 0 wird in der Paint-Order *nach* allen unpositionierten Elementen
gemalt und liegt sonst obendrauf.

z-index: -1 waere die Alternative, scheidet hier aber aus: body traegt eine
background-color, und die wird spaeter gemalt als negative z-index-Layer -
der Canvas waere unsichtbar.

Die Regeln haengen an :has(#canvas), damit sie nur auf Templates greifen, die
den Layer tatsaechlich einbinden, und _html.scss unangetastet bleibt.
*/
body:has(#canvas) > main,
body:has(#canvas) > footer,
body:has(#canvas) > nav.breadcrumb {
  position: relative;
  z-index: 1;
}

.canvas__item {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: var(--grid-base);
  grid-template-rows: 1fr;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--canvas-fade) ease, visibility var(--canvas-fade);
}
.canvas__item > * {
  grid-row: 1;
}

/*
visibility hat in Transitions eine Sonderregel: beim Einblenden schaltet es
sofort auf visible, beim Ausblenden erst am Ende der Transition. Dadurch
fallen inaktive Items komplett aus Rendering und Tab-Reihenfolge, ohne dass
der Fade kaputtgeht. transition-behavior: allow-discrete braucht es dafuer
ausdruecklich nicht - das gilt fuer andere diskrete Properties.
*/
#canvas[data-active="1"] .canvas__item[data-index="1"] {
  opacity: 1;
  visibility: visible;
}

#canvas[data-active="2"] .canvas__item[data-index="2"] {
  opacity: 1;
  visibility: visible;
}

#canvas[data-active="3"] .canvas__item[data-index="3"] {
  opacity: 1;
  visibility: visible;
}

#canvas[data-active="4"] .canvas__item[data-index="4"] {
  opacity: 1;
  visibility: visible;
}

#canvas[data-active="5"] .canvas__item[data-index="5"] {
  opacity: 1;
  visibility: visible;
}

#canvas[data-active="6"] .canvas__item[data-index="6"] {
  opacity: 1;
  visibility: visible;
}

#canvas[data-active="7"] .canvas__item[data-index="7"] {
  opacity: 1;
  visibility: visible;
}

#canvas[data-active="8"] .canvas__item[data-index="8"] {
  opacity: 1;
  visibility: visible;
}

#canvas[data-active="9"] .canvas__item[data-index="9"] {
  opacity: 1;
  visibility: visible;
}

#canvas[data-active="10"] .canvas__item[data-index="10"] {
  opacity: 1;
  visibility: visible;
}

#canvas[data-active="11"] .canvas__item[data-index="11"] {
  opacity: 1;
  visibility: visible;
}

#canvas[data-active="12"] .canvas__item[data-index="12"] {
  opacity: 1;
  visibility: visible;
}

.canvas__media {
  grid-column: 1/-1;
  margin: 0;
  height: 100%;
  overflow: hidden;
}
.canvas__media img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.canvas-content {
  grid-column: c1-s/c4-e;
  position: relative;
  align-self: center;
  padding: 1rem;
}
.canvas-content p, .canvas-content h3, .canvas-content h4 {
  color: white;
  font-size: var(--fs-02);
  margin: 0;
}
.canvas-content p strong, .canvas-content h3 strong, .canvas-content h4 strong {
  font-size: var(--fs-05);
  text-transform: uppercase;
  font-family: "Balthazar", serif;
}

@media (prefers-reduced-motion: reduce) {
  .canvas__item {
    transition-duration: 1ms;
  }
}
/*
Layout-Hook: dieselbe Klasse, die den Wechsel ausloest, oeffnet auch die
Luecke darunter - ohne die liegt die naechste Section direkt an und der
Layer waere nie zu sehen. Der Attributselektor greift jede canvas-<nr>,
es braucht also keine zweite Klasse im Editor.

Der Wert hier ist die *volle* Luecke, also der Ausgangszustand. Sobald die
Unterkante der Section ins Blickfeld kommt, ueberschreibt js/base.js das
Margin inline und laesst es bis --canvas-gap-min zusammenlaufen. Ohne JS
(oder bei prefers-reduced-motion) bleibt die volle Luecke stehen.
*/
main article section[class*=canvas-] {
  margin-bottom: var(--canvas-gap);
}

/*
Messpunkt fuer js/base.js: das Skript setzt dieses Attribut fuer einen
Moment, liest den Zielwert in px ab und nimmt es sofort wieder weg. So
bleiben beide Lueckenwerte hier im CSS und muessen nicht im Skript
doppelt gepflegt werden.
*/
main article section[class*=canvas-][data-canvas-measure=min] {
  margin-bottom: var(--canvas-gap-min);
}

.image-kachel-wrapper figure.img-format-quer {
  aspect-ratio: 2/1.3;
}
.image-kachel-wrapper figure.img-format-quer img {
  width: 100% !important;
  height: 100% !important;
}

.kolumne-content {
  grid-column: 1/-1;
  position: relative;
  height: 4rem;
  width: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.kolumne-content p {
  font-family: "Balthazar", serif;
  font-size: var(--fs-03);
  color: black;
  line-height: 1;
  text-transform: uppercase;
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: 0.6rem;
  margin: 0 auto;
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  .kolumne-content {
    height: 8rem;
  }
  .kolumne-content p {
    font-size: var(--fs-04);
  }
}

.kolumne-content-sound {
  background-image: url(_bm/GHM-Typo-Kolumne-sound.webp);
}

.kolumne-content-welcome {
  background-image: url(_bm/GHM-Typo-Kolumne-welcome.webp);
}

.kolumne-content-all-in-one {
  background-image: url(_bm/GHM-Typo-Kolumne-all-in-one.webp);
}

.kolumne-content-greenhouse {
  background-image: url(_bm/GHM-Typo-Kolumne-greenhouse.webp);
}

.image-section {
  display: grid;
  align-items: start;
}
.image-section.image-black {
  padding: 0 10vw;
}
.image-section.image-black p:not(.c2a) {
  grid-column: 1/-1;
  color: white;
}
.image-section figure figcaption {
  position: absolute;
  left: 1rem;
  color: white;
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  .image-section {
    display: grid;
    grid-template-columns: var(--grid-base);
    -moz-column-gap: 0;
         column-gap: 0;
  }
  .image-section .kolumne, .image-section .text, .image-section .spalte-links {
    grid-column: c1-s/c2-e;
  }
  .image-section .spalte-rechts {
    grid-column: c3-s/c4-e;
  }
}

.image-kachel .kolumne {
  grid-row-start: 3;
}

.image-kachel .text {
  grid-row-start: 4;
}

.image-kachel .text-rechts {
  grid-column: c3-s/c4-e;
  grid-row-start: 3;
}

.image-kachel-wrapper {
  grid-column: 1/-1;
  display: grid;
  background: black;
  margin-bottom: 2rem;
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  .image-kachel-wrapper {
    grid-template-columns: 1fr 1fr;
    padding: 0 30vw;
  }
}
.image-kachel-wrapper figure {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  margin: 0;
}
.image-kachel-wrapper figure img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0.7;
  transition: opacity 300ms ease;
}
.image-kachel-wrapper figure img:hover {
  opacity: 1;
  transition: opacity 300ms ease;
}
.image-kachel-wrapper figcaption {
  position: absolute;
  top: 0.5rem;
  bottom: unset;
  right: unset;
  font-size: var(--fs-00);
  color: white;
}
.image-kachel-wrapper figcaption strong {
  position: relative;
  display: inline-block;
  font-size: var(--fs-02);
  font-weight: normal;
}
.image-kachel-wrapper figcaption strong::after {
  content: ">";
  position: absolute;
  top: 0;
  right: -1.25rem;
  font-size: var(--fs-04);
  line-height: 1;
}

.image-kachel-wrapper.width-padding {
  padding: 1rem;
  row-gap: 1rem;
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  .image-kachel-wrapper.width-padding {
    row-gap: 0;
    padding: 0 25vw;
  }
  .image-kachel-wrapper.width-padding figure {
    width: 100%;
    margin: 0;
  }
}

.content-wrapper {
  grid-column: c1-s/c4-e;
  display: grid;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  .content-wrapper {
    grid-template-columns: 1fr 1fr;
  }
}

.image-kachel .content-wrapper {
  grid-column: c1-s/c4-e;
}

.col-l {
  grid-column: 1/2;
}

.col-r {
  grid-column: 2/3;
}

.kolumne, .text, .text-links, .text-big {
  grid-column: 2/3;
}

.kolumne {
  top: 1rem;
  left: 1rem;
  font-size: var(--fs-02);
}

.text {
  align-self: center;
}
.text p.text-head {
  font-size: var(--fs-05);
  color: var(--col-gold);
  font-weight: bold;
  line-height: 1.2;
}
.text p.text-head strong {
  text-transform: uppercase;
}

.text-big {
  font-size: var(--fs-02);
}
.text-big strong {
  font-family: "Balthazar", serif;
  font-size: var(--fs-05);
  text-transform: uppercase;
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  .text-big {
    font-size: var(--fs-03);
  }
}

.c2a {
  justify-self: center;
  align-self: end;
  grid-column: c2-s/c3-e;
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  .c2a {
    grid-column: c3-s/c4-e;
    justify-self: start;
  }
}

main article section.aktuelles {
  background: url(_bm/logodreieck_xl.svg) no-repeat;
  background-size: auto 90%;
  background-position: center;
  background-color: white;
  position: relative;
}
main article section.aktuelles div {
  grid-column: 2/3;
}
main article section.aktuelles div {
  grid-column: c1-s/c2-e;
}
main article section.aktuelles .c2a {
  grid-column: 2/3;
  align-self: end;
  margin-bottom: 2rem;
}
main article section.aktuelles figure {
  grid-column: 3/-1;
  justify-self: end;
  position: absolute;
  right: -2rem;
  height: 60vw;
  width: 60vw;
  aspect-ratio: 1/1;
  margin: 1rem;
  border-radius: 50%;
  overflow: hidden;
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  main article section.aktuelles figure {
    position: relative;
    grid-row: 2/3;
    right: unset;
    left: 5rem;
    width: 50%;
    height: auto;
    /* max-height:40rem;
    width:auto; */
    align-self: start;
    justify-self: center;
  }
  main article section.aktuelles div {
    grid-row: 2/3;
  }
}

.aktuelles:before {
  content: "";
  position: absolute;
  top: 0;
  left: -50vw;
  height: 100%;
  width: 50vw;
  background: white;
}

.aktuelles:after {
  content: "";
  position: absolute;
  top: 0;
  right: -50vw;
  height: 100%;
  width: 50vw;
  background: white;
}

section.musiker {
  align-content: start;
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  section.musiker {
    background-image: url(_bm/musiker-studio-audioproduktion-videoproduktionen-atmosphaerisch-label-verlag-wuppertal.png);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 45% auto;
  }
}
section.musiker .kachel-wrapper {
  grid-column: 2/3;
  grid-row: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-self: start;
}
section.musiker .kachel-wrapper figure {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  display: block;
  overflow: hidden;
  margin: 0;
}
section.musiker .kachel-wrapper figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
section.musiker .kachel-wrapper figure figcaption {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: var(--fs-00);
  line-height: 1;
  padding: 0.5em;
  margin: 0;
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  section.musiker .kachel-wrapper {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
section.musiker .c2a {
  grid-column: c2-s/c4-e;
  align-self: end;
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  section.musiker .c2a {
    grid-column: c3-s/c4-e;
    align-self: end;
  }
}

section.atmo figure {
  grid-column: 1/-1;
  position: relative;
  width: 100%;
  overflow: hidden;
  display: block;
}
section.atmo figure img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
section.atmo .text-big {
  position: absolute;
  bottom: 2rem;
  color: white;
  z-index: 10;
}

section .hero-kolumne, footer .hero-kolumne {
  grid-column: 1/-1;
  position: relative;
  text-align: center;
  height: 8rem;
  display: inline-block;
  position: relative;
  overflow: hidden;
  margin-bottom: 0;
}
section .hero-kolumne figcaption, footer .hero-kolumne figcaption {
  font-family: "Balthazar", serif;
  font-size: var(--fs-04);
  color: black;
  line-height: 1;
  text-transform: uppercase;
  position: absolute;
  width: 100%;
  bottom: 1rem;
  margin: 0 auto;
}
section .hero-kolumne img, footer .hero-kolumne img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
section .hero-kolumne p.typo-bg, footer .hero-kolumne p.typo-bg {
  font-family: "PinyonScript", serif;
  width: 100%;
  font-size: var(--fs-xl);
  color: var(--col-beige-hell);
  margin-bottom: 0;
}
section .hero-kolumne p.typo, footer .hero-kolumne p.typo {
  font-family: "Balthazar", serif;
  font-size: var(--fs-04);
  line-height: 1;
  text-transform: uppercase;
  position: absolute;
  width: 100%;
  bottom: 3rem;
  margin: 0 auto;
}
@media screen and (min-width: 1024px) and (orientation: landscape) {
  section .hero-kolumne, footer .hero-kolumne {
    height: 8rem;
  }
}

section.impressum * {
  grid-column: c1-s/c4-e;
}/*# sourceMappingURL=base.css.map */