:root {
  --horizontal-space-0: 3px;
  --horizontal-space-1: 5px;
  --horizontal-space-2: 15px;
  --horizontal-space-3: 20px; 
  --horizontal-space-4: 30px;
  --horizontal-space-5: 40px;
  --horizontal-space-6: 50px;
  --horizontal-space-7: 60px;
  --horizontal-space-8: 70px;
  --horizontal-space-9: 100px;
  --vertical-space-0: 2px;
  --vertical-space-1: 5px;
  --vertical-space-2: 8px;
  --vertical-space-3: 12px;
  --vertical-space-4: 20px;
  --vertical-space-5: 30px;
  --vertical-space-6: 40px;
  --vertical-space-7: 50px;
  --vertical-space-8: 60px;
  --vertical-space-9: 70px;
  --vertical-space-10: 80px;
}

.mar {margin-top: var(--vertical-space-0); margin-left: var(--horizontal-space-0);}
.mar-1 {margin-top: var(--vertical-space-1); margin-left: var(--horizontal-space-1);}
.mar-2 {margin-top: var(--vertical-space-2); margin-left: var(--horizontal-space-2);}
.mar-3 {margin-top: var(--vertical-space-3); margin-left: var(--horizontal-space-3);}
.mar-4 {margin-top: var(--vertical-space-4); margin-left: var(--horizontal-space-4);}

.pad {padding-top: var(--vertical-space-0); padding-left: var(--horizontal-space-0);}
.pad-1 {padding-top: var(--vertical-space-1); padding-left: var(--horizontal-space-1);}
.pad-2 {padding-top: var(--vertical-space-2); padding-left: var(--horizontal-space-2);}
.pad-3 {padding-top: var(--vertical-space-3); padding-left: var(--horizontal-space-3);}
.pad-4 {padding-top: var(--vertical-space-4); padding-left: var(--horizontal-space-4);}

.pad-l {padding-left: var(--horizontal-space-0);}
.pad-l-1 {padding-left: var(--horizontal-space-1);}
.pad-l-2 {padding-left: var(--horizontal-space-2);}
.pad-l-3 {padding-left: var(--horizontal-space-3);}
.pad-l-4 {padding-left: var(--horizontal-space-4);}
.pad-l-5 {padding-left: var(--horizontal-space-5);}
.pad-l-6 {padding-left: var(--horizontal-space-6);}
.pad-l-7 {padding-left: var(--horizontal-space-7);}
.pad-l-8 {padding-left: var(--horizontal-space-8);}
.pad-l-9 {padding-left: var(--horizontal-space-9);}
.pad-l-10 {padding-left: var(--horizontal-space-10);}

.pad-r {padding-right: var(--horizontal-space-0);}
.pad-r-1 {padding-right: var(--horizontal-space-1);}
.pad-r-2 {padding-right: var(--horizontal-space-2);}
.pad-r-3 {padding-right: var(--horizontal-space-3);}
.pad-r-4 {padding-right: var(--horizontal-space-4);}
.pad-r-5 {padding-right: var(--horizontal-space-5);}
.pad-r-6 {padding-right: var(--horizontal-space-6);}
.pad-r-7 {padding-right: var(--horizontal-space-7);}
.pad-r-8 {padding-right: var(--horizontal-space-8);}
.pad-r-9 {padding-right: var(--horizontal-space-9);}
.pad-r-10 {padding-right: var(--horizontal-space-10);}

.pad-b {padding-bottom: var(--vertical-space-0);}
.pad-b-1 {padding-bottom: var(--vertical-space-1);}
.pad-b-2 {padding-bottom: var(--vertical-space-2);}
.pad-b-3 {padding-bottom: var(--vertical-space-3);}
.pad-b-4 {padding-bottom: var(--vertical-space-4);}
.pad-b-5 {padding-bottom: var(--vertical-space-5);}
.pad-b-6 {padding-bottom: var(--vertical-space-6);}
.pad-b-7 {padding-bottom: var(--vertical-space-7);}
.pad-b-8 {padding-bottom: var(--vertical-space-8);}
.pad-b-9 {padding-bottom: var(--vertical-space-9);}
.pad-b-10 {padding-bottom: var(--vertical-space-10);}

.pad-t {padding-top: var(--vertical-space-0);}
.pad-t-1 {padding-top: var(--vertical-space-1);}
.pad-t-2 {padding-top: var(--vertical-space-2);}
.pad-t-3 {padding-top: var(--vertical-space-3);}
.pad-t-4 {padding-top: var(--vertical-space-4);}
.pad-t-5 {padding-top: var(--vertical-space-5);}
.pad-t-6 {padding-top: var(--vertical-space-6);}
.pad-t-7 {padding-top: var(--vertical-space-7);}
.pad-t-8 {padding-top: var(--vertical-space-8);}
.pad-t-9 {padding-top: var(--vertical-space-9);}
.pad-t-10 {padding-top: var(--vertical-space-10);}

.mar-r {margin-right: var(--horizontal-space-0);}
.mar-r-1 {margin-right: var(--horizontal-space-1);}
.mar-r-2 {margin-right: var(--horizontal-space-2);}
.mar-r-3 {margin-right: var(--horizontal-space-3);}
.mar-r-4 {margin-right: var(--horizontal-space-4);}
.mar-r-5 {margin-right: var(--horizontal-space-5);}
.mar-r-6 {margin-right: var(--horizontal-space-6);}
.mar-r-7 {margin-right: var(--horizontal-space-7);}
.mar-r-8 {margin-right: var(--horizontal-space-8);}
.mar-r-9 {margin-right: var(--horizontal-space-9);}
.mar-r-10 {margin-right: var(--horizontal-space-10);}

.mar-l-1 {margin-left: var(--horizontal-space-0);}
.mar-l-2 {margin-left: var(--horizontal-space-1);}
.mar-l-3 {margin-left: var(--horizontal-space-2);}
.mar-l-4 {margin-left: var(--horizontal-space-3);}
.mar-l-5 {margin-left: var(--horizontal-space-4);}
.mar-l-6 {margin-left: var(--horizontal-space-5);}
.mar-l-7 {margin-left: var(--horizontal-space-6);}
.mar-l-8 {margin-left: var(--horizontal-space-7);}
.mar-l-9 {margin-left: var(--horizontal-space-8);}
.mar-l-10 {margin-left: var(--horizontal-space-9);}

.mar-b {margin-bottom: var(--vertical-space-0);}
.mar-b-1 {margin-bottom: var(--vertical-space-1);}
.mar-b-2 {margin-bottom: var(--vertical-space-2);}
.mar-b-3 {margin-bottom: var(--vertical-space-3);}
.mar-b-4 {margin-bottom: var(--vertical-space-4);}
.mar-b-5 {margin-bottom: var(--vertical-space-5);}
.mar-b-6 {margin-bottom: var(--vertical-space-6);}
.mar-b-7 {margin-bottom: var(--vertical-space-7);}
.mar-b-8 {margin-bottom: var(--vertical-space-8);}
.mar-b-9 {margin-bottom: var(--vertical-space-9);}
.mar-b-10 {margin-bottom: var(--vertical-space-10);}

.mar-t {margin-top: var(--vertical-space-0);}
.mar-t-1 {margin-top: var(--vertical-space-1);}
.mar-t-2 {margin-top: var(--vertical-space-2);}
.mar-t-3 {margin-top: var(--vertical-space-3);}
.mar-t-4 {margin-top: var(--vertical-space-4);}
.mar-t-5 {margin-top: var(--vertical-space-5);}
.mar-t-6 {margin-top: var(--vertical-space-6);}
.mar-t-7 {margin-top: var(--vertical-space-7);}
.mar-t-8 {margin-top: var(--vertical-space-8);}
.mar-t-9 {margin-top: var(--vertical-space-9);}
.mar-t-10 {margin-top: var(--vertical-space-10);}



:root {
  /* Typography — Figma Vorlagen */
  --font-size-caption: 14px;
  --font-size-body-s: 18px;
  --font-size-body-m: 28px;
  --font-size-h2: 70px;
  --font-size-h3: 56px;
  --font-size-h1: 9.03vw;
  --font-size-logo: 9.72vw;

  --font-size-0: var(--font-size-caption);
  --font-size-1: var(--font-size-body-s);
  --font-size-2: var(--font-size-body-m);
  --font-size-3: var(--font-size-h1);

  --line-height-h1: 8.33vw;
  --line-height-logo: 8.75vw;
  --line-height-h2: 70px;
  --line-height-h3: 62px;
  --line-height-body-m: 32px;
  --line-height-caption: 18px;
  --line-height-1: 1.14;

  --letter-spacing-h1: -0.03em;
  --letter-spacing-logo: -0.03em;

  --padding-top-1: 3px;
  --line-offset-1: 2px;

  --grid-gap-1: 25px;
  --border-width-1: 1.3px;
  /* Eine Kachel trägt innen Luft und außen den Hover-Rahmen. Wer die
     Bilder auf den Seitenrand ausrichten will, zieht die Kachelspur um
     genau diesen Betrag nach außen (siehe .tiles, .carousel-track). */
  --tile-inset: calc(var(--border-width-1) + var(--vertical-space-2));
  /* Abstand von Bildkante zu Bildkante, Figma: 450er Bilder auf 20 / 495 / 970. */
  --tile-gap: 25px;
  --border-width-2: 4px;
  --border-width-3: 3px;
  --color-0: rgb(253, 253, 253);
  --color-1: black;
  --color-3: rgb(95, 31, 185);
  --color-2: lightgrey;
  --color-4: #2A1A1A;
  --color-5: rgb(246, 246, 246);
  --color-6: #EE0000;
  --color-bg-warm: #fcfbf7;
  --color-bg-grey: #eae8e8;
  --header-height: var(--font-size-logo);
  --page-gutter: 20px;
  /* Abstand von der Oberkante für klebende Elemente unter dem Kopf. */
  --sticky-offset: 90px;
  --color-7: rgb(232, 232, 232);
  --color-8: rgb(196, 196, 196);
  --color-9: rgb(209, 208, 208);
  
  --scrollbar-width: 5px;
  --radius-1: 0.5vw;
  --radius-2: 8px;
  --radius-3: 3px;
  --grid-gap-1: 30px;
  --grid-gap-2: 0.5vw;
  --bar-height-1: 25px;

  --line-thickness-1: 0.2px;
  --line-thickness-2: 0.5px;
  --line-thickness-3: 0.7px;
  --line-thickness-4: 1px;
  --line-thickness-5: 1.3px;

  --shadow-border: var(--line-thickness-5) solid var(--color-6);
  --shadow-height: 18px;
  --shadow-height-lg: 40px;
  --shadow-drop: linear-gradient(to bottom, rgba(238, 0, 0, 0.22), rgba(238, 0, 0, 0.08) 36%, transparent);

  /* Roter Schein um Pills: weich nach außen, innen nur ein Hauch. */
  --hover-glow: 0 0 10px 2px rgba(238, 0, 0, 0.22), inset 0 0 6px rgba(238, 0, 0, 0.06);
  --hover-text-blur: 2px;
  --hover-text-opacity: 0.6;
  /* Überschriften laufen unscharf ein, siehe .reveal in style.css. */
  --reveal-blur: 10px;

  --border-radius-1: 8px;
  --border-radius-2: 4px;

  --width-0: 100%;
  --width-1: 410px;
  --width-2: 100%;
  --width-3: 440px;
  --width-4: 80px;
  --width-5: 60px;

  --height-1: 60px;
  --header-height-1: 27px;

  --gap-1: 10px;
  --transition-1: 0.3s; 

  --font-family-saans: 'Saans', 'Helvetica Neue', Helvetica, sans-serif;
  --font-family-serrif: 'Serrif', 'Times New Roman', Times, serif;
  --font-family-1: var(--font-family-saans);
  --font-family-2: var(--font-family-serrif);
}

@media only screen and (max-width: 800px) {
  :root {
    --width-1: 100%;
    --width-2: 100vw;
  }
}

.ff-1, .ff-1-f * {
  font-family: var(--font-family-1);
  font-size: var(--font-size-1);
  line-height: var(--line-height-1);
  font-weight: normal;
  white-space: 'pre-wrap',
}
.ff-2, .ff-2-f * {
  font-family: var(--font-family-1);
  font-size: var(--font-size-0);
  line-height: var(--line-height-caption);
  font-weight: normal;
}
.ff-3, .ff-3-f * {
  font-family: var(--font-family-2);
  font-size: var(--font-size-3)!important;
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
  font-weight: normal;
}
.ff-4, .ff-4-f * {
  font-family: var(--font-family-1);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: normal;
}
.ff-5, .ff-5-f * {
  font-family: var(--font-family-1);
  font-size: var(--font-size-2);
  line-height: var(--line-height-body-m);
  font-weight: normal;
}

.fs-0 {font-size: var(--font-size-0);}
.fs-0 * {font-size: var(--font-size-0)!important;}
.fs-1 {font-size: var(--font-size-1);}
.fs-2 {font-size: var(--font-size-2);}
.fs-2-abs * {font-size: var(--font-size-2);}
.fs-h1 {font-size: var(--font-size-h1);}
.fs-h2 {font-size: var(--font-size-h2);}
.fs-logo {font-size: var(--font-size-logo);}

.c1 {color: var(--color-1)}
.c2 {color: var(--color-2)}
.c3 {color: var(--color-3)}
.c4 {color: var(--color-4)}
.c5 {color: var(--color-5)}
.c6 {color: var(--color-6)}
.c7 {color: var(--color-7)}
.c8 {color: var(--color-8)}

.bc1 {background: var(--color-1)}
.bc2 {background: var(--color-2)}
.bc3 {background: var(--color-3)}
.bc4 {background: var(--color-4)}
.bc5 {background: var(--color-5)}
.bc6 {background: var(--color-6)}
.bc7 {background: var(--color-7)}


.width-0{width: var(--width-0)}
.width-1{width: var(--width-1)}
.width-2{width: var(--width-2)}
.width-3{width: var(--width-3)}
.width-4{width: var(--width-4)}
.width-5{width: var(--width-5)}

.border-1 {border: var(--border-width-1) solid var(--color-1); border-radius: var(--radius-3);}

.height-1 {height: var(--height-1)}

.gap-1 {grid-gap: var(--grid-gap-1);}
.gap-2 {grid-gap: var(--grid-gap-2);}

.noevents {pointer-events: none;}
.underline { text-decoration: underline;}
::-webkit-scrollbar {display: none;}

.editbox {
  background: var(--color-5);
  box-shadow: 0 0 5px 5px var(--color-5);
}

.cl:hover {color: rgb(49, 49, 49); cursor: pointer;}
.cur {font-style: italic}
.flex {display: flex}
.bl {display: block;}
.inl {display: inline-block;}
.al-c {text-align: center;}
.al-r {text-align: right;}
.al-l {text-align: left;}

.cur {font-style: italic;}
.diff {mix-blend-mode: difference;}

.grid-2 {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: var(--grid-gap-1);}
.grid-3 {display: grid; grid-template-columns: repeat(3, 1fr);}
.grid-4 {display: grid; grid-template-columns: repeat(4, 1fr);}
.grid-5 {display: grid; grid-template-columns: repeat(5, 1fr);}
.grid-6 {display: grid; grid-template-columns: repeat(8, 1fr);}

.komma .ch::after {content: ",";}
.komma .ch:last-child::after {content: "";}

.bold * { font-weight: bold;}

.nowrap {white-space: nowrap;}



.link {
  text-decoration: dotted underline;
  background: transparent;
  text-decoration-thickness: var(--line-thickness-5);
  text-underline-offset: var(--line-offset-1);
  font-size: var(--font-size-2);
}
.link:hover {
  color: var(--color-1);
}

.full {
  width: 100vw;
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}

/* Trennlinie ohne Schatten. */
.line-bottom {
  position: relative;
  border-bottom: var(--shadow-border);
}

/* Trennlinie mit Schatten nach unten (Standardhöhe). */
.shadow-bottom {
  position: relative;
  border-bottom: var(--shadow-border);
}

.shadow-bottom::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  top: 100%;
  height: var(--shadow-height);
  background: var(--shadow-drop);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 2;
}

/* Großer Schatten, z. B. unter den Teasern der Startseite. */
.shadow-bottom-lg::after {
  height: var(--shadow-height-lg);
}

/* Trennlinie mit Schatten oberhalb eines Abschnitts, z. B. über dem
   Archiv-Karussell am Fuß eines Beitrags. */
.shadow-top {
  position: relative;
  border-top: var(--shadow-border);
}

.shadow-top::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  height: var(--shadow-height);
  background: var(--shadow-drop);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 2;
}

.filter,
.tag,
.teaser-tag,
.footer-submit {
  position: relative;
}

.filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 18px;
  border: var(--border-width-1) solid var(--color-1);
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--color-1);
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
}

.filter::before,
.tag::before,
.footer-submit::before {
  content: "";
  position: absolute;
  inset: calc(var(--border-width-1) * -1);
  border-radius: 50px;
  box-shadow: var(--hover-glow);
  opacity: 0;
  pointer-events: none;
}

.filter:hover,
.filter-on {
  border-color: var(--color-6);
}

.filter:hover::before,
.filter-on::before,
.tag:hover::before,
.footer-submit:hover::before {
  opacity: 1;
}

.link-out {
  position: relative;
  display: inline-flex;
  align-items: center;
  column-gap: 11px;
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
}

.link-out img {
  width: 101px;
  height: 21px;
  flex: 0 0 auto;
}

.link-out::after {
  content: attr(data-label);
  position: absolute;
  left: 112px;
  color: var(--color-6);
  opacity: 0;
  filter: blur(var(--hover-text-blur));
  pointer-events: none;
}

.link-out:hover::after {
  opacity: var(--hover-text-opacity);
}

header nav a:hover,
header nav button:hover,
.nav-group-label:hover,
.footer-links a:hover {
  color: var(--color-6);
}

.komma .ch {
  display: inline-block;
}
.komma .ch::after {
  content: ",";
  margin-right: 4px;
}
.komma .ch:last-child::after {
  content: "";
}