* {
  margin: 0;
  padding: 0;
}

:root {
  --puna: 255,50,50;
  --sini: 0,175,225;
  /* --vaalea: 242,240,238; */
  --vaalea: 243,238,237;
  --taus: 241,236,232;
  --harmaa: 0,34,42;
  --padding: 1.5rem;
  --color-black: rgba(var(--harmaa));
  --color-white: #fff;
  /* --color-grey: #777; */
  --color-light: rgba(var(--taus));
  --color-text: rgba(var(--harmaa));
  --color-text-grey: rgba(var(--harmaa), .5);
  --color-background: rgba(var(--taus));
  --color-code-light-grey:  #cacbd1;
  --color-code-comment:     #a9aaad;
  --color-code-white:       #c5c9c6;
  --color-code-red:         #d16464;
  --color-code-orange:      #de935f;
  --color-code-yellow:      #f0c674;
  --color-code-green:       #a7bd68;
  --color-code-aqua:        #8abeb7;
  --color-code-blue:        #7e9abf;
  --color-code-purple:      #b294bb;
  --font-family-sans: 'LCTrinidad', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-mono: 'RationalTWText', monospace;
  --font-family-serif: "LiterataTT-Text", serif;
  --p-basis: clamp(9pt, 1.2vw, 14pt);

}

html {
  font-family: var(--font-family-mono);
  font-variant-numeric: oldstyle-nums;
  color: var(--color-text);
  /* background: var(--color-background)!important; */
  /* background: yellow; */
  height: 100%;
  /* padding: 0!important; */
}
img {
  /* width: 100%; */
}
body {
  /* padding: var(--padding); */
  /* max-width: 70rem; */
  height: 100%;
  /* padding: 0!important; */
  /* margin: 0!important; */
  background: var(--color-background)!important;
}
li {
  list-style: none;
}
a {
  color: currentColor;
  text-decoration: none;
  border-bottom: 1pt dashed rgba(var(--harmaa), .7);
}
a:hover {
  color: rgba(var(--puna));
  text-decoration: none;
  border-bottom: 1pt solid rgba(var(--puna))
}
a.footnote-ref {
  color: rgba(var(--sini));
  border: none;
}
a.footnote-ref:hover {
  color: rgba(var(--puna));
  border-bottom: 1pt solid rgba(var(--puna), 1);
}
button {
  font: inherit;
  background: none;
  border: 0;
  color: currentColor;
  cursor: pointer;
}
strong, b {
  font-weight: 600;
}
small {
  font-size: inherit;
  color: var(--color-text-grey);
}
p {
  font-size: var(--p-basis);
  font-weight: 400;
  color: rgba(var(--harmaa));
  hyphens: auto;
  -webkit-hyphens: auto;
}
a {
  hyphens: manual;
  -webkit-hyphens: manual;
}
p + p {
  margin-bottom: 1em;
}
.bg-light {
  background-color: var(--color-light);
}
.color-grey {
  color: var(--color-text-grey);
}
/* ============ menü ============ */
header {
  /* position: absolute; */
}
.menu {
  z-index: 100;
  position: fixed;
  /* height: 98vh; */
  height: 100%;
  /* left: 1ch; */
  /* top: 1ch; */
  padding: 1ch 0 0 1ch;
  display: flex;
  flex-direction: column;
  align-items: left;
  font-family: var(--font-family-sans);
  font-feature-settings: "ss02" 1;
  letter-spacing: -.075em;
  justify-content: start;
  text-transform: lowercase;
  mix-blend-mode: multiply;
}
.menu a {
  width: fit-content;
  display: list-item;
  list-style: none;
  font-size: clamp(16pt, 5vw, 7vh);
  line-height: 1em;
  font-weight: 600;
  color: rgba(var(--puna));
  text-decoration: none;
  margin: 0 .5em .2em 0;
  height: fit-content!important;
  white-space: pre;
  border: none;
}
.menu a:hover {
  color: rgba(var(--sini))!important;
}
/* .menu .datenschutz, .menu .impressum {
  font-size: clamp(12pt, 3vw, 5vh)!important;
  line-height: 1.4em;
  padding-left: .1em;
  letter-spacing: -.03em;
  margin-bottom: 0!important;
} */
.menu .logo {
  white-space: normal;
}
.menu a[aria-current] {
  color: rgba(var(--harmaa));
}
.menu a[aria-current]:before {
  content: '¶ ';
  color: rgba(var(--puna));
  font-family: "LiterataTT-Text";
  font-style: italic;
}


/* ============ galerie ============ */
header.titel, .wegweiser {
  position: fixed;
  left: clamp(8rem, 30%, 30%);
  z-index: 100;
  color: rgba(var(--harmaa), .5)
}
.titel {
  margin-top: 1em;
  font-weight: 500;
  white-space: nowrap;
  width: 100%;
}
header.titel h1 {
  font-size: clamp(12pt, 2vw, 4vh);
  line-height: 1.2em!important;
}
.wegweiser {
  bottom: clamp(.5rem, 1vh, 1rem);
  font-size: var(--p-basis);
}
.h-galerie {
  height: 100%;
  display: flex;
  margin-left: clamp(10rem, 50vw, 40rem);
  /* margin-left: clamp(15rem, 50vw, 10rem); */
  flex-direction: row;
  align-items: center;
  scroll-snap-type: x mandatory;
  /* z-index: -10; */
}
.h-galerie .item {
  max-height: 70vh!important;
  padding: 10vh 0;
  scroll-snap-align: center;
  display: flex;
  align-items: center;
}
.h-galerie .item + .item {
  padding: 10vh 3%;
}
.h-galerie img {
  width: 50vh;
  max-width: 90vw;
  height: 80vh;
  object-fit: contain;
  /* height: 10rem; */
}
.h-galerie figure {
  height: 100%!important;
  display: flex;
  flex-direction: column;
  align-items: center!important;
  position: relative;
}
.b-galerie figure {
  filter: url(#mono);
  transition: all .5s;
}
.b-galerie figure:hover, .b-galerie figure:active {
  filter: none;
  mix-blend-mode: normal;
  transition: all .3s;
}
.b-galerie a {
  border: 0;
}
.filter {
  /* display: none; */
  position: absolute;
  height: 0;
}
.h-galerie figcaption, .galerie figcaption {
  justify-self: center;
  position: absolute;
  bottom: -2cqh;
  padding: .25em 1em;
  text-align: left;
  font-size: clamp(7pt, 12pt, 1vw);
  line-height: 1.4em;
  opacity: 0;
  p {
    font-weight: 600;
  }
  p:not(:first-of-type) {
    font-weight: 400;
    font-style: italic;
  }
}
.h-galerie figcaption p:not(:first-of-type), .galerie figcaption p:not(:first-of-type) {
  font-weight: 300;
  font-style: italic;
}

.h-galerie figure:hover figcaption, .h-galerie figure:active figcaption  {
  opacity: 1!important;
}
a:has(figure):hover {
  border: none;
}
/* a:has(figure.img) { */
.noline {
  border: none;
}
.album-galerie {
  padding-left: clamp(8rem, 8rem, 12vw);
  position: relative;
}
.album-galerie .item {
  z-index: 100;
}
.album-galerie header.h1 {
  z-index: 201;
  background: rgba(var(--taus), .8);
  backdrop-filter: blur(.25rem);
  position: absolute;
  right: 0;
  /* min-width: 30vw!important; */
  /* height: 50%; */
  height: fit-content;
  padding: 1rem 1em 1em 2.5em;
  margin-right: 0;
  display: flex;
  flex-direction: column;
  align-content: end;
}
.album-galerie .item:nth-of-type(1) {
  padding-right: 0;
}
.album-galerie .item:nth-of-type(2) {
  padding-left: 0;
}
.album-galerie p {
  margin: .25em 0;
}
.album-galerie p a {
  border-bottom: 1pt dashed rgba(var(--harmaa), .7);
}
.album-galerie p a:hover {
  color: rgba(var(--puna), 1);
  border-bottom: 1pt solid rgba(var(--puna), 1);
}
.galerie a:has(figure) {
  border: none;
}

.ipa {
  font-family: var(--font-family-serif);
  letter-spacing: .05em;
  font-weight: normal;
}
footer {
  visibility: hidden;
}
#extraheader {
  display: none;
}