@charset "UTF-8";
/*RESETS*/
/* ########################## A bunch Resets ########################## */
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

nav > ul,
ul,
menu,
dir {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
  margin: 0;
  border: 0;
  height: 0;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a::visited {
  color: inherit;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
  font-family: 443;
}

figure {
  margin: 0;
  padding: 0;
  position: relative;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
  margin: 0;
  border: 0;
  height: 0;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
  color: var(--primary-base);
}

a::visited {
  color: inherit;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
  font-family: 443;
}

/*Fonts######## */
@font-face {
  font-family: "naticons";
  src: url("../fonts/naticons.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
.naticon {
  font-weight: normal;
  font-style: normal;
  font-family: "Naticons";
  margin-right: 0.7ch;
  opacity: 0.8;
  font-size: 1.1em;
}

.icon-cal-color::before {
  content: "\ea01";
}

.icon-cal::before {
  content: "\ea02";
}

.icon-clock-color::before {
  content: "\ea03";
}

.icon-clock::before {
  content: "\ea04";
}

.icon-pin-color::before {
  content: "\ea05";
}

.icon-pin::before {
  content: "\ea06";
}

@font-face {
  font-family: "TeX Gyre HerosCn";
  src: url("../fonts/subset-TeXGyreHerosCn-Bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TeX Gyre HerosCn";
  src: url("../fonts/subset-TeXGyreHerosCn-BoldItalic.woff2") format("woff2");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "TeX Gyre HerosCn";
  src: url("../fonts/subset-TeXGyreHerosCn-Italic.woff2") format("woff2");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "TeX Gyre HerosCn";
  src: url("../fonts/subset-TeXGyreHerosCn-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
} 
@font-face {
  font-family: "Charis";
  src: url("../fonts/Charis-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Charis";
  src: url("../fonts/Charis-Bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
.fs-base i {
  font-size: var(--fs-base) !important;
}

.fw-regular {
  font-weight: 500;
}

:root {
  /* ########################## Fluid spacing ########################## */
  --space-1: clamp(0.25rem, 0.2rem + 0.2vw, 0.375rem);
  --space-2: clamp(0.5rem, 0.4rem + 0.3vw, 0.75rem);
  --space-3: clamp(0.75rem, 0.6rem + 0.5vw, 1rem);
  --space-4: clamp(1rem, 0.8rem + 0.7vw, 1.5rem);
  --space-5: clamp(1.5rem, 1.1rem + 1vw, 2rem);
  --space-6: clamp(2rem, 1.4rem + 1.5vw, 3rem);
  --space-7: clamp(3rem, 2rem + 2.5vw, 5rem);
  --space-8: clamp(4rem, 2.5rem + 4vw, 8rem);
  --space-9: clamp(5rem, 4.5rem + 10vw, 11rem);
  --border-radius-s: clamp(10px, calc(10px + 1vw/5), 40px);
  --prosa-fluss: 1.5em;
  /* ########################## Colors ########################## */
  --color-alpha: 100%;
  --hue-blue: 247.68209;
  --hue-magenta: 325;
  --hue-light: 83.37;
  --hue-green: 178.98;
  --primary-darker: oklch(0.255 0.0764 var(--hue-blue) / var(--color-alpha));
  --primary-dark: oklch(0.3065 0.0764 var(--hue-blue) / var(--color-alpha));
  --primary-base: oklch(0.31 0.15 var(--hue-blue) / var(--color-alpha));
  --primary-bright: oklch(0.948 0.0129 var(--hue-blue));
  --primary-nonwhite: oklch(0.87 0.01 var(--hue-green));
  --primary-signal: oklch(0.4755 0.2612 var(--hue-magenta));
  --secondary-dark: oklch(
    0.3065 0.0764 var(--hue-magenta) / var(--color-alpha)
  );
  --secondary-base: oklch(
    0.389878 0.107124 var(--hue-magenta) / var(--color-alpha)
  );
  --secondary-saturated: oklch(0.46 0.23 var(--hue-magenta));
  --secondary-bright: oklch(0.948 0.0129 var(--hue-magenta));
  --primary-light: oklch(0.9672 0.013 var(--hue-light) / var(--color-alpha));
  --focus-visible-color: oklch(0.75 0.17 55);
  --svg-light: var(--primary-light);
  --svg-dark: var(--primary-base);
  --persistent-primary-base-opaque: oklch(0.77 0.09 192 / var(--color-alpha));
  --persistent-bright-text: var(--primary-light);
  --persistent-dark: var(--primary-darker);
  --persistent-secondary-base: var(--secondary-saturated);
  --persistent-secondary-bright: var(--primary-light);
  --card-bg-color: var(--primary-nonwhite);
  --card-base-color: var(--primary-darker);
  --button-base-bg-color: var(--primary-base);
  --button-base-text-color: var(--primary-nonwhite);
  --input-base-text-color: var(--primary-signal);
  --input-base-bg-color: var(--primary-light);
  --input-base-placeholder-text-color: var(--primary-base);
  --input-border-hover-color: red;
  --card-hover-text: var(--secondary-base);
  --card-hover-background: var(--secondary-bright);
  --input-background--hover-color: var(--secondary-saturated);
  --input-border-hover-color: var(--secondary-saturated);
  --input-text-hover-color: var(--secondary-bright);
  /* ########################## Fluid typography ########################## */
  --type-ratio: 1.25;
  --fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-xxs: calc(var(--fs-xs) / var(--type-ratio));
  --fs-xs: calc(var(--fs-sm) / var(--type-ratio));
  --fs-sm: calc(var(--fs-base) / var(--type-ratio));
  --fs-lg: calc(var(--fs-base) * var(--type-ratio));
  --fs-xl: calc(var(--fs-lg) * var(--type-ratio));
  --fs-2xl: calc(var(--fs-xl) * var(--type-ratio));
  --fs-3xl: calc(var(--fs-2xl) * var(--type-ratio));
  --fs-4xl: calc(var(--fs-3xl) * var(--type-ratio));
  /* Global Hard Variables */
  --global-base-font-family: "TeX Gyre HerosCn";
  --global-copy-font-family:
    ui-rounded, "Hiragino Maru Gothic ProN", Quicksand, Comfortaa, Manjari,
    "Arial Rounded MT", "Arial Rounded MT Bold", Calibri, source-sans-pro,
    sans-serif;
  --global-copy-font-family:
    Charis, Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
  font-weight: normal;
  --global-infotext-font-family:
    ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
    "DejaVu Sans Mono", monospace;
  --global-content-max-width: 1340px;
  --global-base-letter-spacing-gyre: 0.15ch;
  --svg-light: var(--primary-light);
  --svg-dark: var(--primary-dark);
}

/* ########################## Dark Theme Switches ########################## */
@media (prefers-color-scheme: dark) {
  :root {
    --hue-blue: 192;
    --hue-magenta: 325;
    --hue-light: 245;
    --primary-dark: oklch(0.77 0.033 var(--hue-blue) / var(--color-alpha));
    --primary-base: oklch(0.77 0.09 var(--hue-blue) / var(--color-alpha));
    --primary-bright: oklch(0.28 0.0429 var(--hue-blue));
    --secondary-dark: oklch(0.9 0.0764 var(--hue-magenta) / var(--color-alpha));
    --secondary-base: oklch(
      0.71 0.107124 var(--hue-magenta) / var(--color-alpha)
    );
    --secondary-saturated: oklch(0.76 0.12 var(--hue-magenta));
    --secondary-bright: oklch(0.25 0.0129 var(--hue-magenta));
    --primary-light: oklch(0.18 0.02 var(--hue-light) / var(--color-alpha));
    --primary-signal: oklch(0.9439 0.0321 var(--hue-blue));
    --persistent-bright-text: var(--primary-dark);
    --card-bg-color: var(--primary-dark);
    --card-base-color: var(--primary-bright);
    --button-base-bg-color: var(--primary-bright);
    --button-base-text-color: var(--primary-nonwhite);
    --input-base-text-color: var(--primary-signal);
    --input-base-bg-color: var(--primary-light);
    --input-base-placeholder-text-color: var(--primary-base);
    --input-border-hover-color: red;
    --card-hover-text: var(--secondary-bright);
    --card-hover-background: var(--primary-signal);
    --input-background--hover-color: var(--secondary-dark);
    --input-border-hover-color: var(--secondary-saturated);
    --input-text-hover-color: var(--secondary-bright);
    --persistent-secondary-base: var(--secondary-bright);
    --persistent-secondary-bright: var(--secondary-saturated);
  }
}
footer {
  --svg-light: var(--primary-dark);
  --svg-dark: var(--primary-light);
}

/* ########################## BASE ########################## */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  background-color: var(--primary-light);
  font-family: var(--global-base-font-family), system-ui, sans-serif;
  text-wrap: pretty;
  letter-spacing: var(--global-base-letter-spacing-gyre);
}

body {
  padding-block: 0 0;
  margin: 0;
  font-weight: normal;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--primary-dark);
}

body > * {
  padding-inline: var(--space-5);
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
  flex: 1;
  padding-bottom: var(--space-7);
  margin-top: var(--space-5);
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: var(--fs-2xl);
  font-weight: 800;
}

h2 {
  font-size: var(--fs-xl);
  font-weight: 800;
}

h3 {
  font-size: var(--fs-lg);
  font-weight: 800;
}

p,
.template-reintext .prosa li {
  font-family: var(--global-copy-font-family);
  font-size: calc(var(--fs-base) * 1.11);
  font-weight: 400;
  max-width: 65ch;
  hyphens: auto;
  overflow-wrap: break-word;
  line-height: 1.65;
  text-wrap: pretty;
  margin-bottom: 2ch;
  letter-spacing: initial;
  hyphens: auto;
  list-style-type: disc;
}

input {
  font-family: var(--global-infotext-font-family);
}

/* ########################## CUBE ########################## */
.flex-stretch {
  display: flex;
  justify-content: space-between;
}

.flex-wrap {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-4);
}

.flex-right {
  justify-content: right;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.prosa > * + *,
.stack > * + * {
  margin-block-start: calc(1em + var(--space-6));
}

.prosa p,
.prosa ul,
.prosa ol {
  margin-block-start: calc(var(--prosa-fluss) + var(--space-1) / 2);
}
.prosa h2 + p,
.prosa h3 + p,
.prosa h4 + p {
  margin-block-start: calc(var(--prosa-fluss) - var(--space-1));
}
.prosa article:first-of-type {
  margin-block-start: var(--prosa-fluss);
}

.prosa > *:first-child {
  margin-block-start: var(--prosa-fluss, 1em);
}

.wrapper > * {
  max-width: var(--global-content-max-width);
  margin-inline: auto;
}

.eng-130 {
  width: inherit;
  max-width: 130ch;
  margin-inline: auto;
  margin-top: var(--fs-base);
}

.eng-100 {
  max-width: 100ch;
}

.article-hero > * {
  margin-block-start: calc(var(--prosa-fluss) / (var(--type-ratio) * 1.5));
}
.article-hero h1:first-of-type {
  margin-block-start: 0;
}
.article-hero h2 {
  font-weight: 500;
}

/* Artikel-/Detail-Header: Titel + Untertitel (beitrag, folge, veranstaltung) */
h1.article-title {
  color: var(--secondary-saturated);
}

h2.article-subtitle {
  color: var(--secondary-base);
}

.article-meta {
  display: flex;
  align-content: flex-end;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: baseline;
  gap: 4ch;
  border-top: 1px dashed var(--primary-dark);
  border-bottom: 1px dashed var(--primary-dark);
  padding-block: var(--fs-lg);
}

.post-tags {
  border-top: 1px dashed var(--primary-dark);
  padding-block: var(--fs-lg);
}

a.post-tag {
  color: var(--secondary-saturated);
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 0.5ch;
}

section:first-child {
  margin-block: var(--space-2);
}

section:not(:first-of-type) {
  margin-block: var(--space-7);
}

.meta section {
  margin: 0;
}

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

.grid__3xfluid {
  align-items: stretch;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.grid__2xfluid {
  --grid-gap: var(--space-4);
  align-items: stretch;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--global-content-max-width) / 4 - var(--grid-gap)), 1fr));
}

.stablegrid {
  display: grid;
  grid-template-columns: 1fr 4fr;
}

.stack > * + * {
  margin-block-start: calc(1em + var(--space-6));
}

.stack-compact > * + * {
  margin-block-start: calc(1em + var(--space-1));
}

.flex {
  display: flex;
}

.wrap {
  flex-wrap: wrap;
}

.global-gap {
  gap: var(--space-6) var(--space-4);
}

.author-box {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  border-top: 1px dashed var(--card-base-color);
  padding-top: var(--space-2);
}
.author-box figure {
  max-width: var(--fs-2xl);
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 1000px;
}
.author-box span {
  margin: 0;
  margin-block: auto;
  font-family: var(--global-copy-font-family);
  letter-spacing: initial;
  font-size: var(--fs-sm);
}

.card-meta-box {
  display: flex;
  gap: var(--space-2);
  align-items: end;
  justify-content: space-between;
  border-top: 1px dashed var(--card-base-color);
  padding-top: var(--space-2);
}
.card-meta-box figure {
  max-width: var(--fs-2xl);
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 1000px;
}
.card-meta-box span {
  margin: 0;
  font-family: var(--global-base-font-family);
  /*letter-spacing: initial;*/
  font-size: var(--fs-sm);
}

a.logo {
  flex: 1 1 20%;
  min-width: 112px;
  margin-bottom: var(--space-3);
  display: block;
}

a.logo > img,
svg {
  width: clamp(160px, 5rem + 10vw, 224px);
  transform: translateX(-10px);
}

.navbars {
  flex: 4 1 510px;
  gap: var(--space-4);
}

/*
nav.menu.topic-menu::before {
  content: "THEMEN";
  display: inline-block;
  position: relative;
  top: -9px;
  background: var(--primary-light);
  padding: calc(var(--space-1) / 3) var(--space-2);
  padding-left: 4px;
  margin-bottom: -8px;
  font-size: var(--fs-xs);
  color: var(--secondary-base);
}

/* Tag-Menü (snippet tag-menu.php): gleiche Stilklassen, anderes Label 
nav.menu.tag-menu::before {
  content: "SCHLAGWÖRTER";
}

*/
.sprite {
  display: inline-block;
  width: 3ch;
  height: 3ch;
  overflow: hidden;
  background-color: var(--primary-base);
  -webkit-mask-image: url("../img/sheet.svg");
  mask-image: url("../img/sheet.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 20% 3ch;
  mask-size: 21ch 3ch;
  transform: scale(1.2);
}

.sprite img {
  display: block;
  height: 3ch;
  max-width: none;
}

.icon {
  display: inline-block;
  width: 3ch;
  height: 3ch;
  background-image: url("../img/sheet.svg");
  background-repeat: no-repeat;
  background-size: 351px 70.2px;
  background-position: 0 0;
}

/* ============================================================================
   KOMPONENTE: Typ-Pill (.typ)
   Einziges Styling für alle „Typ“-Badges. Zwei Größen:
     .typ--sm  → kleine Karte (Badge über dem Bild)
     .typ--lg  → Artikel-/Detail-Hero (inline im Flow)
   Ältere Klassen (card-type, va-type, article-type, veranstaltung-typ) sind
   unten als Aliase auf diese Komponente gemappt – Styling nur hier ändern.
   ========================================================================== */
.typ, .va-type--inline, .card .card-type,
.veranstaltung-card .va-type {
  display: inline-block;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-style: italic;
  font-weight: 600;
  background-color: var(--persistent-secondary-base);
  color: var(--persistent-secondary-bright);
  width: -moz-max-content;
  width: max-content;
  border-radius: 1.2ch;
}

/* Größe: klein (Karten-Badge) */
.typ--sm, .card .card-type,
.veranstaltung-card .va-type {
  padding: 1.5ch 1.2ch 1ch 1.2ch;
  font-size: var(--fs-xxs);
}

/* Größe: groß (Artikel-/Detail-Hero) */
.typ--lg, .va-type--inline {
  padding: 1.6ch 1.4ch 1.2ch 1.4ch;
  font-size: var(--fs-xs);
  border-radius: 1.4ch;
}

/* ---------- Aliase: bestehende Klassen → Komponente ---------- */
/* Kleine Karten-Badges (absolute, über dem Bild) */
.card .card-type,
.veranstaltung-card .va-type {
  position: absolute;
  z-index: 2;
  top: 5ch;
  margin-inline: var(--space-5);
}

/* Kleine Karten, kompakte Variante */
.card--small .card-type {
  top: 3ch;
  margin-inline: var(--space-3);
  padding: 1ch 0.9ch 0.6ch 0.9ch;
  letter-spacing: 1px;
}

/* Große Badges im Artikel-/Detail-Flow (inline).
   EIN Pill pro Gruppe: das Container-Element ist das Pill,
   die inneren Spans sind nur Text – so stehen z. B. „Vortrag, Diskussion“
   in EINER Pille, nicht in zweien. */
.va-type--inline {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3ch;
  margin-block-start: 0.5em;
  margin-block-end: var(--space-3);
}

/* Innere Spans: nur Text, kein eigenes Pill */
.va-type--inline > span {
  display: inline;
  background: none;
  color: inherit;
  padding: 0;
  border-radius: 0;
  width: auto;
  margin: 0;
  letter-spacing: inherit;
  text-transform: inherit;
}

.card {
  color: var(--card-base-color);
  background: var(--card-bg-color);
  box-shadow: 0 4px 0px var(--primary-darker);
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  height: 100%;
}
.card img:first-of-type {
  width: 100%;
}
.card .image-container {
  min-height: var(--space-6);
}
.card a {
  text-decoration: none;
  position: relative;
  color: var(--card-base-color);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card div.card-wrapbox {
  padding-inline: var(--space-5);
  padding-block: var(--space-4);
  justify-content: flex-end;
  display: flex;
  flex-direction: column;
  flex: 1;
  z-index: 10;
}
.card p {
  font-size: var(--fs-sm);
  font-weight: 400;
  hyphens: auto;
  text-wrap: balance;
  margin-top: 1ch;
  flex: 1;
}
.card .card-meta-time {
  font-size: var(--fs-base);
  font-weight: 100;
  border-bottom: 1px dashed var(--card-base-color);
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-bottom: 1ch;
  margin-bottom: 2ch;
}
.card .sprite {
  background-color: var(--card-base-color);
  width: 2ch;
  height: 2.3ch;
}
.card span[title=Datum i] {
  font-weight: 400;
}
.card span[title=Uhrzeit i] .sprite {
  -webkit-mask-position: 98% 0;
          mask-position: 98% 0;
}
.card span[title=Datum i] .sprite {
  -webkit-mask-position: 83% 0;
          mask-position: 83% 0;
}

/* BEITRÄGE: kleine Karten-Variante */
.card--small a {
  flex-direction: row;
  gap: 0;
}
.card--small .image-container {
  flex: 1;
  min-height: 8rem;
  max-height: 8rem;
}
.card--small div.card-wrapbox {
  padding-inline: var(--space-5);
  padding-block: var(--space-5);
  flex: 2;
  justify-content: space-between;
}
.card--small .image-container figure {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  height: 110%;
}
.card--small .image-container figure img {
  width: 160%;
  aspect-ratio: 1/1;
  transform: scale(1.7);
}
.card--small .card-wrapbox h3 {
  font-size: var(--fs-base);
}
.card--small .card-meta-box {
  padding-top: var(--space-1);
}
.card--small .card-meta-box span {
  font-size: var(--fs-xs);
}

/* NETZWERKPARTNER: Logo-Karte */
.partner-card .image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-block: var(--space-4);
}
.partner-card .image-container img {
  width: auto;
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* NETZWERKPARTNER: Einzelansicht */
.partner-single .partner-logo {
  max-width: 200px;
  margin-block: var(--space-4);
}
.partner-single .partner-logo img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

.fullwidth-card-panel {
  width: 100%;
  background-color: var(--card-bg-color);
  display: flex;
  justify-content: center;
  border-radius: 20px;
  padding-block: var(--space-4);
}

/* ########################## PODCAST PLAYER ##########################
   Eigener Baustein; alle Farben/Abstände via --pp-* zentral überschreibbar. */
.pp-player {
  /* --- Design-Tokens (hier zentral anpassen) --- */
  --pp-accent: var(--secondary-saturated);
  --pp-accent-bright: var(--primary-bright);
  --pp-surface: var(--primary-light);
  --pp-text: var(--secondary-base);
  --pp-radius: 0;
  --pp-shadow: 0 0px 0px var(--primary-darker);
  display: grid;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) 0;
  margin-block: var(--space-4);
  color: var(--pp-text);
  background: var(--pp-surface);
  box-shadow: var(--pp-shadow);
  border-radius: var(--pp-radius);
  border-top: 1px dashed var(--primary-dark);
  border-bottom: 1px dashed var(--primary-dark);
}
.pp-player audio {
  display: none;
}
.pp-player button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 77px;
  /* min-height: 17px; */
  padding: 0 1.75ch;
  font: inherit;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--pp-accent);
  background: var(--pp-accent-bright);
  border: 2px solid var(--pp-accent);
  /* border-radius: calc(var(--pp-radius) / 2); */
  cursor: pointer;
  border-radius: 13px;
  height: 36px;
  gap: 1ch;
}
.pp-player button:hover {
  background: var(--pp-surface);
}
.pp-player button:active {
  transform: translateY(1px);
}
.pp-player .pp-buttons {
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  align-items: center;
}
.pp-player .pp-main-buttons {
  display: flex;
  align-items: center;
  gap: 1em;
}
.pp-player .pp-play {
  width: 56px;
  height: 75px;
  border-radius: 800px;
}
.pp-player .pp-skip {
  padding-top: 1ch;
  padding-top: 1ch;
  min-width: 3em;
  min-height: 3em;
  border-radius: 1000px;
}
.pp-player .pp-skip > span {
  font-size: var(--fs-xl);
}
.pp-player .pp-icon {
  display: block;
  width: 20px;
  height: 20px;
  background: currentColor;
}
.pp-player .pp-icon-play {
  margin-left: 0.3ch;
  clip-path: polygon(15% 0, 100% 50%, 15% 100%);
}
.pp-player .pp-icon-pause {
  clip-path: polygon(0% 0%, 34.5% 0%, 34.5% 100%, 67.25% 100%, 67.25% 0%, 99.75% 0%, 99.75% 22.38%, 99.75% 50%, 100% 100%, 0% 100%);
}
.pp-player .pp-hidden {
  display: none;
}
.pp-player .pp-progress {
  flex: 1 1 180px;
  display: flex;
  align-items: stretch;
  gap: 3rem;
  flex-direction: column;
}
.pp-player .pp-time {
  font-size: var(--fs-base);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pp-player .pp-time-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
}
.pp-player .pp-seek {
  margin: 0;
  max-height: 34px;
  cursor: pointer;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  border-top: 1px solid var(--pp-accent);
  border-bottom: 1px solid var(--pp-accent);
  background: linear-gradient(to right, var(--pp-accent) 0, var(--pp-accent) var(--pp-fill, 0%), var(--pp-accent-bright) var(--pp-fill, 0%), var(--pp-accent-bright) 100%);
}
.pp-player .pp-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 60px;
  border-radius: 40px;
  background: var(--pp-accent);
  border: 2px solid var(--pp-accent-bright);
  box-shadow: 0 0 0 1px var(--pp-accent);
}
.pp-player .pp-seek::-moz-range-thumb {
  width: 5px;
  height: 60px;
  border-radius: 40px;
  background: var(--pp-accent);
  border: 2px solid var(--pp-accent-bright);
  box-shadow: 0 0 0 1px var(--pp-accent);
}
.pp-player .pp-seek::-moz-range-track {
  background: transparent;
}
.pp-player .pp-rate {
  min-width: 3.5ch;
}
.pp-player .pp-error {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--fs-sm);
}

ul.external-platform-links {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: flex-start;
  -moz-column-gap: var(--space-5);
       column-gap: var(--space-5);
  row-gap: var(--space-4);
}
ul.external-platform-links li {
  /*  */
}
ul.external-platform-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.9ch;
  text-decoration: none;
  color: var(--primary-base);
  font-size: var(--fs-base);
}
ul.external-platform-links span {
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-color: var(--secondary-saturated);
  text-decoration-thickness: 0.35ch;
  text-underline-offset: 1ch;
  font-weight: 800;
  font-style: unset;
}
ul.external-platform-links a:hover span,
ul.external-platform-links a:focus span {
  text-decoration-style: solid;
  text-decoration-thickness: 1.05ch;
}
ul.external-platform-links .naticon-icon {
  display: inline-block;
  font-style: normal;
  font-size: var(--fs-2xl);
  color: var(--secondary-saturated);
  font-weight: 200;
  text-shadow: none;
  font-smoothing: auto;
  -webkit-text-stroke: 0;
  -webkit-font-smoothing: antialiased;
}
ul.external-platform-links .naticon-icon::before {
  font-family: "naticons";
  /* content pro Plattform unten */
}
ul.external-platform-links {
  /* Codepoints: Fortsetzung des bestehenden naticons-Blocks (U+EA01–EA06 in _fonts.scss).
     Platzhalter bis der Font gebaut ist – ggf. hier anpassen.
     Hinweis: CSS-Hex-escapes fressen bis zu 6 Hexziffern, daher "\\e23" = U+0E23 (Thai!),
     nicht U+E23. Immer 4+ Hexziffern verwenden. */
}
ul.external-platform-links .naticon-icon[data-platform=spotify]::before {
  content: "\ea07";
}
ul.external-platform-links .naticon-icon[data-platform=apple-podcasts]::before {
  content: "\ea08";
}
ul.external-platform-links .naticon-icon[data-platform=podcast-index]::before {
  content: "\ea09";
}
ul.external-platform-links .naticon-icon[data-platform=antennapod]::before {
  content: "\ea0a";
}
ul.external-platform-links .naticon-icon[data-platform=rss-feed]::before {
  content: "\ea14";
}

/* META-NAVIGATION (snippets/metamenu.php)
   Plattform-Icons per naticons-Iconfont statt SVG-Sprite.
   Gleiche <i>-Pattern wie .external-platform-links; Codepoints lt. assets/fonts/glyph-list.txt */
.metamenu a .naticon-icon {
  display: inline-block;
  font-family: "naticons";
  font-style: normal;
  font-size: calc(var(--fs-base) * 1.2);
  line-height: 1;
  vertical-align: middle;
  font-weight: 200;
  text-shadow: none;
  font-smoothing: auto;
  -webkit-text-stroke: 0;
  -webkit-font-smoothing: antialiased;
}
.metamenu a .naticon-icon[data-platform=instagram]::before {
  content: "\ea0b";
}
.metamenu a .naticon-icon[data-platform=mastodon]::before {
  content: "\ea0f";
}
.metamenu a .naticon-icon[data-platform=facebook]::before {
  content: "\ea0c";
}
.metamenu a .naticon-icon[data-platform=apple-podcasts]::before {
  content: "\ea08";
}
.metamenu a .naticon-icon[data-platform=rss]::before {
  content: "\ea14";
}

a {
  background-color: transparent;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3rem;
}

a:hover {
  color: var(--primary-signal) !important;
  transform: translateY(-2px);
  text-decoration-thickness: 0.45ch;
  text-decoration-style: solid;
}

.opaque a {
  color: var(--primary-light);
  text-decoration-color: var(--secondary-bright);
}

.opaque a:hover {
  color: var(--primary-light) !important;
}

/*
a:hover,
a:focus {
  color: red;
  text-decoration-thickness: 0.7ch;
  text-decoration-style: solid;
}
*/
/* Kein Ring bei Maus-Klick, klarer Ring bei Tastatur-Fokus.
   Primär-Ring kommt vom fokussierten Element (Link/Button) via :focus-visible –
   das ist in Firefox, Chromium/Vivaldi UND Safari/WebKit zuverlässig. */
/* 1. Grundring auf dem fokussierten Element */
*:focus-visible {
  outline: 4px solid var(--focus-visible-color); /* >= 3:1 zur Umgebung (1.4.11) */
  outline-offset: 4px; /* Abstand, damit der Ring nicht im Element verschwindet */
  border-radius: 2px;
  z-index: 400;
}

/* 2. Karten: Der Ring steht auf dem <li> (außerhalb von overflow:hidden –
   ein Outline auf dem inneren Link würde sonst abgeschnitten).
   Der innere Link-Ring wird ausgelöscht, damit nur einer sichtbar ist. */
li.card:focus-within,
li.veranstaltung-card:focus-within {
  outline: 4px solid var(--focus-visible-color);
  outline-offset: 4px;
  border-radius: 5px;
}

li.card:focus-within > a,
li.veranstaltung-card:focus-within > a {
  outline: none;
}

/* 3. Karten-Hintergrund beim Fokus = wie beim Hover (dasselbe Sekundärfarben-Schema) */
.card:focus-within,
.veranstaltung-card:focus-within {
  background-color: var(--card-hover-background);
}
.card:focus-within a,
.veranstaltung-card:focus-within a {
  color: var(--card-hover-text) !important;
}

.card,
.veranstaltung-card,
button,
a {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.card:hover,
.veranstaltung-card:hover,
button:hover {
  transform: translateY(-2px);
  box-shadow: 0px 6px 0px;
  background-color: var(--card-hover-background);
}
.card:hover a,
.veranstaltung-card:hover a,
button:hover a {
  color: var(--card-hover-text) !important;
}

.veranstaltung-card:hover .podcast-recents-play {
  color: white !important;
}

.peripheral a {
  font-weight: bold;
}

/* NEWSLETTER */
/* CTA unter den Karten zum Archiv */
.briefing-archiv-cta {
  margin-block-start: var(--space-5);
}
.briefing-archiv-cta a {
  color: var(--primary-base);
  font-weight: bold;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 0.2em;
}

/* Archiv: Liste aus Titel-Link (externe Webview) + Erscheinungsdatum */
.briefing-archiv {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 55ch;
}
.briefing-archiv li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
  border-bottom: 1px dashed var(--primary-base);
}
.briefing-archiv a {
  color: var(--primary-base);
  font-weight: bold;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 0.2em;
  /* Externer Link sichtbar machen */
}
.briefing-archiv a::after {
  content: " ↗";
  font-size: var(--fs-sm);
  font-weight: 400;
}
.briefing-archiv time {
  white-space: nowrap;
  font-size: var(--fs-sm);
}

/* BEITRÄGE: enges Raster für die kleinen Karten */
.grid__small {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3) var(--space-2);
}

/* BEITRÄGE: Zwischenüberschrift für die kleinen Karten */
.h1-wrapper > h3 {
  background-color: var(--primary-base);
  color: var(--primary-bright);
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-size: 1.3em;
  font-style: italic;
  font-weight: normal;
  flex-shrink: 0;
}

/* BEITRÄGE-ARCHIV: Jahresauswahl */
.archiv-jahre {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block: var(--space-3);
}
.archiv-jahre a {
  color: var(--primary-base);
  background-color: var(--card-bg-color);
  box-shadow: 0 2px 0 var(--primary-darker);
  border-radius: 1.2ch;
  padding: 0.8ch 1.2ch;
  font-weight: 600;
  text-decoration: none;
}
.archiv-jahre a[aria-current=page] {
  background-color: var(--persistent-secondary-base);
  color: var(--persistent-secondary-bright);
}

/* BEITRÄGE-ARCHIV: Vor/Zurück-Navigation */
.archiv-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  margin-block: var(--space-5);
}
.archiv-nav a {
  color: var(--primary-base);
  font-weight: bold;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 0.2em;
}

/* CTA zum Archiv (z. B. unter den Beiträgen) */
.archiv-cta {
  margin-block-start: var(--space-5);
}
.archiv-cta a {
  color: var(--primary-base);
  font-weight: bold;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 0.2em;
}

/* FORMULARE: Newsletter-Anmeldung (Listmonk, snippets/newsletter-signup.php) */
.listmonk-form {
  max-width: calc(var(--global-content-max-width) / 3);
  background-color: var(--card-bg-color);
  color: var(--card-base-color);
  padding: var(--space-4) var(--space-6) var(--space-5);
  border-radius: 2ch;
  /* Links folgen der regulären Textfarbe des Formulars */
}
.listmonk-form a {
  color: inherit;
}
.listmonk-form h3 {
  /* Kopfzeile wie .h1-wrapper > h2 */
  display: inline-block;
  font-style: italic;
  font-weight: bold;
}
.listmonk-form .listmonk-title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2ch;
  align-content: center;
  margin-block-end: var(--space-4);
  text-align: center;
}
.listmonk-form p {
  margin-block-end: var(--space-3);
}
.listmonk-form input[type=email],
.listmonk-form input[type=text] {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-base);
  color: var(--input-base-text-color);
  background: var(--input-base-bg-color);
  border: 2px solid var(--primary-base);
  border-radius: 5px;
}
.listmonk-form input[type=email]::-moz-placeholder, .listmonk-form input[type=text]::-moz-placeholder {
  color: var(--input-base-placeholder-text-color);
  opacity: 0.6;
}
.listmonk-form input[type=email]::placeholder,
.listmonk-form input[type=text]::placeholder {
  color: var(--input-base-placeholder-text-color);
  opacity: 0.6;
}
.listmonk-form input[type=email]:hover,
.listmonk-form input[type=text]:hover {
  border-color: var(--input-border-hover-color);
}
.listmonk-form input[type=checkbox] {
  width: 1.6ch;
  height: 1.6ch;
  margin-inline-end: var(--space-1);
  vertical-align: -0.2ch;
  accent-color: var(--button-base-bg-color);
}
.listmonk-form input[type=checkbox] + label {
  font-size: var(--fs-base);
  /* font-family: var(--global-infotext-font-family); */
  font-weight: 600;
  color: var(--primary-darker);
  line-height: 1ch !important;
  font-weight: 500;
}
.listmonk-form input[type=submit] {
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-base);
  font-weight: bold;
  color: var(--button-base-text-color);
  background-color: var(--button-base-bg-color);
  border: 0px solid var(--primary-base);
  border-radius: 5px;
  cursor: pointer;
  width: 100%;
}
.listmonk-form input[type=submit]:active {
  transform: translateY(1px);
}
.listmonk-form input:focus-visible {
  outline: 4px solid var(--focus-visible-color);
  outline-offset: 4px;
}

input[type=submit]:hover,
input[type=submit]:focus-visible {
  background: var(--input-background--hover-color);
  border-color: var(--input-border-hover-color);
  color: var(--input-text-hover-color);
}

/* BLOCKS */
/* PODCAST-EPISODE: quadratisches Artwork (800×800) */
.template-folge .podcast-artwork {
  max-width: 200px;
}
.template-folge .podcast-artwork img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px;
}
.template-folge .article-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 2ch;
}
.template-folge .article-hero > * {
  margin-block-start: 0;
}
.template-folge .podcast-hero-left {
  min-inline-size: 8rem;
  flex: 1;
}
.template-folge .podcast-hero-right {
  flex: 3;
  min-inline-size: 74%;
  display: flex;
  flex-direction: column;
  gap: var(--fs-xs);
}
.template-folge .article-meta {
  padding-block: var(--fs-xs);
  display: none;
}
.template-folge span[title=Datum i] {
  font-weight: 500;
}

/*------*/
.veranstaltung-card .sprite {
  background-color: var(--card-base-color);
  width: 2ch;
  height: 2.3ch;
}

span[title=Datum i] {
  font-weight: 800;
}

span[title=Uhrzeit i] .sprite {
  -webkit-mask-position: 98% 0;
          mask-position: 98% 0;
}

span[title=Datum i] .sprite {
  -webkit-mask-position: 83% 0;
          mask-position: 83% 0;
}

.veranstaltung-card {
  color: var(--card-base-color);
  background: var(--card-bg-color);
  box-shadow: 0 4px 0px var(--primary-darker);
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}

.veranstaltung-card img:first-of-type {
  width: 100%;
}

.veranstaltung-card a {
  text-decoration: none;
  position: relative;
  color: var(--card-base-color);
}

.veranstaltung-card .va-wrapbox {
  padding-inline: var(--space-5);
  padding-block: var(--space-4);
}

.va-meta-time {
  font-size: var(--fs-base);
  font-weight: 100;
  border-bottom: 1px dashed var(--card-base-color);
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-bottom: 1ch;
  margin-bottom: 2ch;
}

.va-meta-time span[title=uhrzeit]::before {
  display: none;
}

.veranstaltung-card p {
  font-size: var(--fs-sm);
  font-weight: 400;
  hyphens: auto;
  text-wrap: balance;
  margin-top: 1ch;
}

/*--------*/
hr.hr1 {
  width: 100%;
  height: 0.25ch;
  background-color: var(--primary-base);
}

.h1-wrapper {
  display: flex;
  align-items: end;
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: var(--primary-light);
  border-top: 1ch solid var(--primary-light);
  margin-bottom: var(--space-4);
}

.h1-wrapper > h1 {
  background-color: var(--primary-base);
  color: var(--primary-bright);
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-style: italic;
  font-weight: normal;
  flex-shrink: 0;
}

.h1-wrapper > h2 {
  background-color: var(--primary-base);
  color: var(--primary-bright);
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-style: italic;
  font-weight: normal;
  flex-shrink: 0;
}

/* Wrapper der „Einleitung“ (KirbyText). Sub-Elements explizit stylen, z. B. .page-einleitung > h1, .page-einleitung > p. */
.page-einleitung {
  margin-bottom: var(--space-4);
}

.page-einleitung > :last-child {
  margin-bottom: 0;
}

/* COMPACT CARD */
.compact-card {
  display: grid;
  grid-template-columns: minmax(70px, 1.3fr) 4fr;
  grid-template-areas: "img title" "subtitle subtitle";
  margin-bottom: var(--space-1);
  box-shadow: none;
  border-bottom: 2px dotted;
  border-radius: 0;
}

ul .compact-card:last-child {
  border: none;
}

.compact-card figure {
  grid-area: img;
  padding: 1ch;
  padding-left: 0;
}

.compact-card a.title {
  grid-area: title;
  padding: var(--space-3);
  padding-right: 0;
}

.compact-card .title h3 {
  font-size: var(--fs-base);
}

.compact-card p.subtitle {
  font-size: var(--fs-xs);
}

.podcast-list {
  padding: var(--space-5) var(--space-4);
}

/* Podcast-Intro-Heading (home, v2-Snippet) */
.podcast-intro {
  flex: 1;
  min-inline-size: 260px;
}
.podcast-intro h3 {
  font-weight: 500;
  font-style: italic;
  font-size: var(--fs-xl);
}

.podcast-recents-stack {
  flex: 2;
  min-inline-size: 68%;
  gap: 1rem;
}

.podcast-recents-stack > * {
  min-inline-size: 260px;
  flex: 1;
}

a[title=abspielen i] {
  height: 49px;
  background-color: var(--primary-bright);
  color: var(--primary-dark);
  font-size: var(--fs-lg);
  text-align: center;
  border-radius: 10rem;
  aspect-ratio: 1/1;
  position: absolute;
  inset: 97% auto auto 85%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  align-content: center;
  justify-content: center;
  line-height: 53px;
  text-orientation: mixed;
}

/* VERANSATLTUNG PAGE */
.veranstaltung-poster > img {
  width: 100%;
}

.veranstaltung-page h1 {
  margin-top: var(--fs-base);
}

.veranstaltung-page h2 {
  margin-top: calc(var(--fs-xxs) / 2);
}

.veranstaltung-page * + * {
  margin-block-start: var(--prosa-fluss, 1em);
}

.veranstaltung-page .va-meta span {
  align-items: center;
  vertical-align: middle;
  /* line-break: after-white-space; */
  font-size: var(--fs-lg);
  margin-block: 0;
}

.veranstaltung-page .va-meta-time {
  display: flex;
  gap: 3ch;
  margin-bottom: 0;
  border: none;
}

.veranstaltung-page .va-wrapbox {
  border-top: 1px dashed var(--primary-dark);
  border-bottom: 1px dashed var(--primary-dark);
  padding-block: var(--fs-lg);
}

/*EMBEDDINGS**/
.iframeframe {
  overflow: hidden;
  border-radius: 20px;
}

.embedded {
  border: none;
}

.nccal {
  min-height: 75vh;
  height: calc(100% - 30px);
  margin-top: -46px;
  border: none;
}

figure {
  margin: 0;
  padding: 0;
  position: relative;
}

/* ########################## UTILITY ########################## */
@media (max-width: 743px) {
  .iframeframe {
    border-radius: 0px;
    margin-right: calc((100vw - 100%) / -2);
    margin-left: calc((100vw - 100%) / -2);
    border: 6px solid var(--primary-base);
  }
}
@media (max-width: 556px) {
  .hideonsmallscreen {
    display: none;
  }
  .navbars {
    padding-top: 0;
  }
}
.grid-inflatable {
  container: grid-inflatable/inline-size;
}

@container grid-inflatable (max-width: 500px) {
  .veranstaltung-card img {
    width: 100%;
    /*  max-height: 12ch;*/
    -o-object-fit: cover;
       object-fit: cover;
  }
}
.copycap > * {
  max-width: 55ch;
  hyphens: manual;
}

/* MAIN NAVIGATION */
.metamenu {
  display: flex;
  justify-content: end;
  align-content: flex-start;
  flex-wrap: wrap;
}

.metamenu ul {
  margin-block: 0;
  padding-bottom: var(--space-2);
  gap: var(--space-1) var(--space-4);
  justify-content: end;
  width: auto;
  border-bottom: 1px dashed var(--primary-base);
}

/*
.metamenu ul::after {
  content: "";
  border-bottom: 1px dashed var(--primary-base);
  display: block;
  width: 55%;
  max-width: 450px;
  position: absolute;
  top: clamp(5ch, calc(1.2rem + 2vw), 3rem);
  padding-top: calc(var(--space-1) - 0.8vw);
}
*/
.metamenu a {
  text-decoration-line: none;
  color: var(--primary-base);
  font-size: var(--fs-sm);
}

.menu {
  flex-direction: row;
  flex-wrap: wrap;
  align-self: end;
}

.menu > ul {
  justify-content: flex-start;
  display: flex;
  gap: var(--space-1) var(--space-1);
  list-style-type: none;
  flex-wrap: wrap;
  flex-direction: row;
  overflow: hidden;
  padding-block: 1ch;
}

.menu a {
  text-decoration-line: none;
  font-size: var(--fs-base);
  padding: var(--space-2) calc(var(--space-2) * 1.2) var(--space-1);
  color: var(--primary-base);
  white-space: nowrap;
  font-weight: bold;
  display: flex;
  align-items: center;
  border-bottom: calc(var(--space-1) / 2) solid transparent;
}

.menu a[aria-current=page] {
  background-color: var(--primary-base);
  color: var(--primary-bright);
  border-bottom: calc(var(--space-1) / 2) solid var(--primary-base);
}

.menu a[aria-current=page]:hover {
  background-color: var(--primary-signal) !important;
  color: var(--primary-bright) !important;
  border-bottom: calc(var(--space-1) / 2) solid var(--primary-signal) !important;
}

.menu-primary li::after {
  content: "";
  border-bottom: 2px solid var(--primary-base);
  display: block;
  width: 1000%;
}

.menu-primary:before {
  content: "";
  border-bottom: 0px solid var(--primary-base);
  display: block;
  width: 1000%;
}

.topic-menu {
  /*border-top: 2px solid var(--secondary-dark);*/
  margin-top: var(--space-3);
  border-bottom-color: var(--secondary-base);
}

.topic-menu a {
  color: var(--secondary-bright);
  background-color: var(--secondary-base);
  border-bottom: calc(var(--space-1) / 2) solid transparent;
}

.topic-menu a[aria-current=page] {
  background-color: var(--secondary-base);
  color: var(--secondary-bright);
  border-bottom-color: var(--secondary-base);
}

.topic-menu a:hover {
  background-color: var(--primary-signal) !important;
  color: var(--primary-bright) !important;
  border-bottom: calc(var(--space-1) / 2) solid var(--primary-signal) !important;
}

/* ########################## BASIC LAYOUT ########################## */
.header-wrapper {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

header {
  padding-block: var(--space-3) var(--space-1);
}

footer {
  padding-block: var(--space-5);
  background-color: var(--primary-dark);
  color: var(--primary-bright);
}

.footer-grid {
  margin-block-end: var(--space-4);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 5ch;
}

footer .adresse {
  margin-block-start: var(--space-4);
}

.meta {
  display: flex;
  flex-direction: row;
  padding-block: var(--space-4);
  border-top: 1px dashed;
}

.peripheral {
  flex: 1;
}

.peripheral ul {
  display: flex;
  gap: var(--space-2) var(--space-3);
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ########################## EXCEPTIONS ########################## */
.themenseite .h1-wrapper h1,
.themenseite .h1-wrapper h2,
.themenseite .hr1 {
  background-color: var(--secondary-base);
}

.grid-controls {
  display: none;
}

@media (max-width: 584px) {
  .h1-wrapper {
    margin-right: calc((100vw - 100%) / -2);
  }
  .grid__h-scroll > ul {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 80vw);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }
  .grid::-webkit-scrollbar {
    display: none;
  }
  .grid > * {
    scroll-snap-align: start;
  }
  .grid {
    margin-right: calc((100vw - 100%) / -2);
    overflow-x: auto;
    padding-right: var(--space-5);
    padding-bottom: var(--space-5);
  }
  .grid-wrapper {
    position: relative;
  }
  .grid-controls {
    position: absolute;
    top: -56px;
    right: 0;
    z-index: 20;
    display: flex;
    gap: 0.5rem;
  }
  .grid-controls button {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 0;
    /* border-radius: 50%; */
    background: transparent;
    cursor: pointer;
    color: var(--primary-base);
    /* border: 3px solid; */
    padding-top: 5px;
    font-weight: 800;
  }
  .grid-prev[hidden],
  .grid-next[hidden] {
    display: none;
  }
}
a.backtomain {
  color: var(--primary-base);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2ch;
  font-weight: bold;
}

/* TEMPLATE EXCEPTIONS */
.template-belegungsplan .topic-menu {
  display: none;
}/*# sourceMappingURL=style.css.map */