/* ==========================================================================
   BNI Dumeklemmer Ratingen
   Designsystem. Konzept "Der freie Platz".
   Farben und Schrift abgeleitet aus dem Flyer Dumeklemmer_260827_V3.
   ========================================================================== */

/* Alle Schriften liegen lokal im Theme. Es wird zur Laufzeit nichts von
   Google oder einem anderen fremden Server geladen.

   Roboto ist der Variable Font von Google Fonts, einmal je Zeichensatz.
   Alle Gewichte stecken in derselben Datei, deshalb `font-weight: 100 900`.
   Elementor stellt seine Standardschrift auf Roboto, siehe weiter unten. */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto-var-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto-var-latin-ext.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  /* Marke */
  --red:       #D2001E;
  --red-deep:  #A50018;
  --ink:       #1B181B;
  --grey:      #6D666A;
  --line:      #D3D3D2;
  --paper:     #FFFFFF;
  /* Neutrales Grau statt des warmen Off-White. Gleiche Helligkeit:
     L* 95.84 gegenueber 95.99, die Abweichung liegt unter der
     Wahrnehmungsschwelle. */
  --paper-2:   #F3F3F3;

  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-display: clamp(2.5rem, 5.05vw, 5.5rem);
  --fs-h2:      clamp(2rem, 4.4vw, 4.1rem);
  --fs-h3:      clamp(1.15rem, 1.65vw, 1.55rem);
  --fs-lead:    clamp(1.1rem, 1.55vw, 1.45rem);
  --fs-body:    clamp(1rem, 1.02vw, 1.08rem);
  --fs-label:   0.6875rem;

  --gut: clamp(1.25rem, 4vw, 4.5rem);
  --shell: 1560px;
  --sec: clamp(5.5rem, 11vw, 10.5rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0.02, 0.28, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* clip statt hidden: hidden macht den Body zu einem eigenen
     Scrollbereich, dann finden die scrollgesteuerten Animationen weiter
     unten keinen Anker mehr. clip schneidet nur ab. */
  overflow-x: clip;
}
h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
::selection { background: var(--red); color: #fff; }

/* ---------- Layout ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gut); }
.section { padding-block: var(--sec); position: relative; scroll-margin-top: var(--hd-h, 85px); }
.section--tint { background: var(--paper-2); }
.section--ink { background: var(--ink); color: var(--paper); }
.section--ink .lead, .section--ink .rt-body { color: rgba(255,255,255,.72); }

/* Diagonale aus dem Flyer als Sektionskante */
.diag-top { clip-path: polygon(0 3.4vw, 100% 0, 100% 100%, 0 100%); margin-top: -3.4vw; padding-top: calc(var(--sec) + 3.4vw); }
.diag-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.4vw), 0 100%); padding-bottom: calc(var(--sec) + 3.4vw); }

/* ---------- Typografie ---------- */
.display {
  font-size: var(--fs-display);
  line-height: 0.99;
  letter-spacing: -0.035em;
  font-weight: 700;
  /* Kein balance: es verteilt die Woerter gleichmaessig und zerlegt die
     Schauzeile je nach Fensterbreite in zu viele kurze Zeilen. */
}
.h2 {
  font-size: var(--fs-h2);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
  text-wrap: balance;
}
.h3 {
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -0.017em;
  font-weight: 700;
}
.lead {
  font-size: var(--fs-lead);
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--grey);
  text-wrap: pretty;
}
.rt-body { color: var(--grey); text-wrap: pretty; }
.tnum { font-variant-numeric: tabular-nums; }

/* Label mit rotem Anstrich */
.label {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
}
.label--plain { color: var(--grey); }
.section--ink .label { color: #fff; }

/* Wachstumsstrich, abgeleitet vom Schrägstrich im BNI-Logo */
.slash {
  display: inline-block;
  width: 0.42em; height: 0.86em;
  background: var(--red);
  clip-path: polygon(38% 100%, 100% 0, 62% 0, 0 100%);
  vertical-align: baseline;
  margin-inline: 0.1em;
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--red);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.05rem 1.9rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  border-radius: 2px;
  overflow: hidden;
  isolation: isolate;
  transition: transform .5s var(--ease);
}
.btn::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--red-deep);
  transform: translateY(101%);
  transition: transform .5s var(--ease);
  z-index: -1;
}
.btn:hover::after { transform: translateY(0); }
.btn svg { width: 17px; height: 17px; transition: transform .45s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
/* Ganz leicht grau hinterlegt, damit die Flaeche auch ohne Zeiger als
   Schaltflaeche zu erkennen ist. Die Flaeche allein traegt, ohne Rand. */
.btn.btn--ghost { --btn-bg: var(--paper-2); --btn-fg: var(--ink); box-shadow: none; }
.btn--ghost::after { background: var(--ink); }
.btn--ghost:hover { --btn-fg: #fff; }
/* Auf getoenten Flaechen waere das Grau nicht zu sehen, dort Weiss. */
.section--tint .btn.btn--ghost { --btn-bg: var(--paper); }
.section--ink .btn.btn--ghost { --btn-bg: transparent; --btn-fg: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.section--ink .btn--ghost::after { background: #fff; }
.section--ink .btn--ghost:hover { --btn-fg: var(--ink); }

/* Textlink mit gezeichneter Unterlinie */
.tlink {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
  font-weight: 500;
}
.tlink::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .45s var(--ease);
}
.tlink:hover::after { transform: scaleX(1); transform-origin: left center; }
.tlink--on::after { transform: scaleX(1); }
.tlink--on:hover::after { transform: scaleX(0); transform-origin: right center; }

/* ---------- Kopfzeile ---------- */
.hd {
  position: fixed; inset: 0 0 auto 0;
  z-index: 90;
  padding-block: 1.15rem;
  transition: background-color .4s linear, box-shadow .4s linear;
}
.hd::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transition: opacity .4s linear;
}
.hd.is-stuck::before { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .hd::before {
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}
.hd__in {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gut);
}
.lock { display: inline-flex; align-items: center; gap: 0.8rem; }
.lock img { width: auto; max-width: none; }
.lock__mark { height: 26px; width: auto; }
.lock__rule { width: 1px; height: 24px; background: var(--line); flex: none; }
.lock__word { height: 21px; width: auto; }
.lock--big .lock__mark { height: 44px; }
.lock--big .lock__rule { height: 40px; }
.lock--big .lock__word { height: 35px; }
.lock--light img { filter: brightness(0) invert(1); }
.lock--light .lock__rule { background: rgba(255,255,255,.3); }
@media (max-width: 520px) {
  .lock__mark { height: 22px; } .lock__word { height: 18px; } .lock__rule { height: 20px; }
}
.hd__nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.6rem); }
.hd__nav a { font-size: 0.94rem; font-weight: 500; letter-spacing: -0.008em; }
.hd__cta { display: flex; align-items: center; gap: 1.25rem; }
.hd .btn { padding: 0.78rem 1.4rem; font-size: 0.88rem; }

.burger { display: none; width: 44px; height: 44px; margin-right: -10px; position: relative; z-index: 2; }
.burger span { display: block; width: 22px; height: 1.5px; background: var(--ink); margin: 5px auto; transition: transform .45s var(--ease), opacity .25s linear; }
.is-open .burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.is-open .burger span:nth-child(2) { opacity: 0; }
.is-open .burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mnav {
  position: fixed; inset: 0;
  z-index: 89;
  background: var(--paper);
  padding: 7.5rem var(--gut) 2.5rem;
  display: flex; flex-direction: column; justify-content: space-between;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .72s var(--ease);
  visibility: hidden;
}
.is-open .mnav { clip-path: inset(0 0 0 0); visibility: visible; }
.mnav__list a {
  display: block;
  font-size: clamp(1.9rem, 8vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.16;
  padding-block: 0.28rem;
  opacity: 0; transform: translateY(24px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.is-open .mnav__list a { opacity: 1; transform: none; }
.mnav__foot { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.13em; text-transform: uppercase; color: var(--grey); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding-block: 8rem 2.25rem; overflow: hidden; }
.hero__canvas { position: absolute; top: 0; right: -2%; width: 54%; height: 76%; z-index: 0; opacity: 0; transition: opacity 1.1s var(--ease); }
.hero__canvas.is-ready { opacity: 1; }
.hero__canvas canvas { width: 100%; height: 100%; }
.hero__in { position: relative; z-index: 1; width: 100%; }
.hero__eyebrow { margin-bottom: clamp(1.1rem, 2.1vw, 1.75rem); }
.hero .display { max-width: 13ch; }
.hero__lead { max-width: 40ch; margin-top: clamp(1.2rem, 2.1vw, 1.8rem); }
/* Zwei Zeilen tiefer als die Mitte, damit die Notiz dort beginnt, wo
   vorher die rote Zeile stand. 3.4em sind zwei Zeilen bei 1.7 Zeilenhoehe. */
.hero__note { position: absolute; right: var(--gut); top: calc(46% + 3.4em); z-index: 1; max-width: 15ch; font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); line-height: 1.7; text-align: right; }
.hero__note b { color: var(--red); font-weight: 500; display: block; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: clamp(1.5rem, 2.5vw, 2.2rem); }

.hero__meta {
  margin-top: clamp(2rem, 3.6vw, 3rem);
  border-top: 1px solid var(--line);
  padding-top: 1.4rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gut);
}
/* Vier Spalten nur, solange eine Spalte den laengsten Wert in einer Zeile
   traegt. Der volle Name des Hotels misst 250 px bei 16 px Schrift, eine
   Viertelspalte bietet unterhalb von rund 1280 px Fensterbreite weniger.
   Ab hier deshalb zwei Spalten, die sind doppelt so breit. Darunter greifen
   die vorhandenen Regeln bei 940 px (ebenfalls zwei) und 680 px (eine). */
@media (max-width: 1320px) {
  .hero__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem var(--gut); }
}
.hero__meta dt {
  font-family: var(--mono); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey);
  margin-bottom: 0.5rem;
}
.hero__meta dd { margin: 0; font-size: 1rem; font-weight: 500; letter-spacing: -0.012em; line-height: 1.4; }
.hero__meta dd span { display: block; font-weight: 400; color: var(--grey); font-size: 0.92rem; }

/* Scroll-Hinweis */
.scroller { position: absolute; right: var(--gut); bottom: 2.75rem; z-index: 1; display: flex; align-items: center; gap: 0.7rem; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); }
.scroller i { display: block; width: 1px; height: 42px; background: var(--line); position: relative; overflow: hidden; }
.scroller i::after { content: ''; position: absolute; inset: 0; background: var(--red); transform: translateY(-100%); animation: sdrop 2.1s var(--ease-io) infinite; }
@keyframes sdrop { 0% { transform: translateY(-100%); } 55%,100% { transform: translateY(100%); } }

/* ---------- Zahlenreihe ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gut); }
.stat { border-top: 2px solid var(--ink); padding-top: 1.25rem; }
.stat__n { font-size: clamp(2.6rem, 5.4vw, 5.2rem); font-weight: 700; letter-spacing: -0.045em; line-height: 0.92; }
.stat__n em { font-style: normal; color: var(--red); }
.stat__t { margin-top: 0.7rem; color: var(--grey); font-size: 0.98rem; line-height: 1.4; max-width: 22ch; }

/* ---------- Zweispaltiger Sektionskopf ---------- */
.shead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gut); align-items: end; margin-bottom: clamp(3rem, 6vw, 5.5rem); }
.shead__l { grid-column: 1 / span 7; }
.shead__r { grid-column: 9 / span 4; }
.shead .label { margin-bottom: 1.5rem; }

/* ---------- Gründe ---------- */
.reasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.reason { background: var(--paper); padding: clamp(2rem, 3.2vw, 3.1rem) clamp(1.5rem, 2.4vw, 2.4rem) clamp(2.6rem, 4vw, 3.6rem); position: relative; transition: background-color .5s var(--ease); }
.reason:hover { background: var(--paper-2); }
.reason__n { font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.14em; color: var(--red); }
.reason .h3 { margin: 1.9rem 0 0.85rem; }
.reason__bar { position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease); }
.reason:hover .reason__bar { transform: scaleX(1); }

/* ---------- Ablauf als senkrechte Zeitleiste ----------
   Bewusst ohne scrollgesteuerte Bewegung: das waagerechte Laufen der Karten
   brauchte ein Pinning, und das ruckelte auf dem Telefon spuerbar. */
/* Die Karten laufen waagerecht und werden nativ gescrollt. Das liegt beim
   Browser auf dem Compositor und ruckelt nicht. Kein Pinning, kein Scrub. */
.rhythm__vp {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-left: var(--gut);
  padding-bottom: 1.4rem;
  scrollbar-width: thin;
  scrollbar-color: var(--red) var(--line);
}
.rhythm__vp::-webkit-scrollbar { height: 3px; }
.rhythm__vp::-webkit-scrollbar-track { background: var(--line); }
.rhythm__vp::-webkit-scrollbar-thumb { background: var(--red); }

/* Die Kartenbreite steht als Variable, damit die scrollgesteuerte Animation
   weiter unten ihre Laufstrecke daraus berechnen kann. */
.rhythm__pin { display: contents; --stop-w: clamp(248px, 23vw, 318px); }
/* Kein width: max-content. Firefox rechnet die groesstmoegliche Breite eines
   Flex-Kastens aus dem ungebrochenen Text seiner Kinder, nicht aus deren
   fester Breite. Die Spur wurde dadurch 5200 statt 2900 Pixel breit und der
   Laufweg endete in einer langen Leere. Ohne die Angabe stehen die Karten
   einfach ueber den Rand hinaus, und genau das laesst sich scrollen. */
.rhythm__track { display: flex; }
.rhythm__track::after { content: ''; flex: 0 0 var(--gut); }

.stop {
  flex: 0 0 var(--stop-w, clamp(248px, 23vw, 318px));
  border-top: 1px solid var(--line);
  padding: clamp(1.2rem, 1.9vw, 1.6rem) clamp(1.4rem, 2.2vw, 2.2rem) clamp(1.6rem, 2.4vw, 2.2rem) 0;
}
.stop__time {
  font-family: var(--mono);
  font-size: clamp(1.35rem, 2.1vw, 1.85rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}
.stop__time::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--red);
  transform: rotate(45deg);
  margin-right: 0.6rem;
  vertical-align: middle;
}
.stop__title {
  margin-top: 0.9rem;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.017em;
  line-height: 1.26;
}
.stop__text { margin-top: 0.6rem; color: var(--grey); font-size: 0.96rem; line-height: 1.5; }

/* Frueher stand hier am Schreibtisch ein Raster aus neun Kacheln, das die
   scrollgesteuerte Fassung am Dateiende gleich wieder aufloeste. Beides ist
   weg. Der waagerechte Streifen ist jetzt in jedem Browser der Grundzustand,
   die Bewegung setzt das Skript darauf. Als Raster gelesen stand 7:20 unter
   6:45, der Morgen war dann nicht mehr als Ablauf zu erkennen. */

/* ---------- Streifen zum naechsten Besuchertag ----------
   Steht ueber dem Held, damit er als Erstes gelesen wird. Der ganze
   Streifen ist ein Link. Der Abstand oben haelt die feste Kopfzeile frei. */
.btag {
  margin-top: var(--hd-h, 85px);
  background: var(--red);
  color: #fff;
  position: relative;
  overflow: hidden;
}
/* Dunkler Grund faehrt beim Ueberfahren von unten hoch, wie bei den Knoepfen. */
.btag::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--red-deep);
  transform: translateY(101%);
  transition: transform .5s var(--ease);
}
.btag:hover::after { transform: translateY(0); }

.btag__in {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  padding-block: 0.95rem 1rem;
  color: inherit;
}
.btag__label {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  white-space: nowrap;
}
.btag__label svg { flex: none; }
.btag__datum {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.btag__meta {
  display: inline-flex; flex-wrap: wrap; gap: 0.35rem 1rem;
  font-size: 0.95rem;
  color: rgba(255,255,255,.82);
}
.btag__ort::before { content: '· '; }
.btag__hinweis {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border: 1px solid rgba(255,255,255,.45);
  white-space: nowrap;
}
.btag__knopf {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.55);
  padding-bottom: 2px;
}
.btag__knopf svg { transition: transform .45s var(--ease); }
.btag:hover .btag__knopf svg { transform: translateX(4px); }

/* Der Held steht jetzt unter dem Streifen und muss die feste Kopfzeile nicht
   mehr selbst freihalten. Deshalb deutlich weniger Polster, damit moeglichst
   viel von ihm auf den ersten Bildschirm passt. */
.btag-block + .e-con.hero,
.dume-elementor .btag-block + .e-con.hero {
  padding-block: 0.75rem 1.5rem;
  min-height: calc(100svh - var(--hd-h, 85px) - 4rem);
}

/* Ohne Streifen, etwa nach dem Termin, faellt der leere Block weg und der
   Held haelt die feste Kopfzeile wieder selbst frei, wie vor dem Streifen. */
.btag-block:not(:has(.btag)) { display: none; }
.btag-block:not(:has(.btag)) + .e-con.hero,
.dume-elementor .btag-block:not(:has(.btag)) + .e-con.hero {
  padding-block: 8rem 2.25rem;
  min-height: 100svh;
}

@media (max-width: 900px) {
  /* Untereinander, aber gedraengt: Beschriftung, Datum, dann Zeit und Ort in
     einem Fluss, zuletzt Hinweis und Knopf nebeneinander. */
  .btag__in { gap: 0.3rem 0.9rem; padding-block: 0.85rem 0.95rem; align-items: center; }
  .btag__label,
  .btag__datum,
  .btag__meta { width: 100%; }
  .btag__meta { font-size: 0.9rem; gap: 0 0.4rem; }
  .btag__hinweis { padding: 0.25rem 0.5rem; letter-spacing: 0.08em; }
  .btag__knopf { margin-left: auto; }
}

/* ---------- Karte zum Treffpunkt ----------
   Steht ueber die volle Breite und laedt erst auf Klick. */
.karte {
  position: relative;
  min-height: clamp(320px, 46vh, 540px);
  display: grid;
  place-items: center;
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.karte__inhalt { text-align: center; padding: clamp(2rem, 5vw, 3.5rem) var(--gut); max-width: 48ch; }
.karte__ort { margin-top: clamp(1.1rem, 2vw, 1.7rem); font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.024em; line-height: 1.2; }
.karte__adr { margin-top: 0.4rem; color: var(--grey); }
.karte__knopf { margin-top: clamp(1.4rem, 2.4vw, 2rem); }
/* Auf der getoenten Flaeche waere der graue Knopf nicht zu sehen. */
.karte .btn.btn--ghost { --btn-bg: var(--paper); }
.karte__hinweis { margin-top: 1.1rem; font-size: 0.85rem; color: var(--grey); }
.karte__hinweis a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.karte iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.karte.is-geladen .karte__inhalt { display: none; }
/* Folgt eine dunkle Flaeche, waere die helle Haarlinie darunter eine
   sichtbare Naht. Dann faellt sie weg. */
.karte-block:has(+ .section--ink) .karte { border-bottom: 0; }

/* Hinweis, dass hier seitwaerts gescrollt wird. Gleiche Sprache wie der
   Hinweis im Held, nur waagerecht. */
.hscroll {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
}
.hscroll i { display: block; width: 54px; height: 1px; background: var(--line); position: relative; overflow: hidden; flex: none; }
.hscroll i::after { content: ''; position: absolute; inset: 0; background: var(--red); transform: translateX(-100%); animation: sslide 2.3s var(--ease-io) infinite; }
.hscroll svg { width: 15px; height: 15px; flex: none; }
@keyframes sslide { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }

/* ---------- Schritte ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); }
.step { position: relative; padding-top: 2.4rem; border-top: 1px solid rgba(255,255,255,.2); }
.step__n { position: absolute; top: 1.5rem; right: 0; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.14em; color: rgba(255,255,255,.5); }
.step .h3 { margin-bottom: 0.9rem; }

/* ---------- Kernwerte ---------- */
.values { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gut); }
.values__aside { grid-column: 1 / span 4; }
.values__aside .sticky { position: sticky; top: clamp(6rem, 14vh, 9rem); }
.values__list { grid-column: 6 / span 7; }
.value { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1.5rem; padding-block: clamp(1.6rem, 2.4vw, 2.3rem); border-top: 1px solid var(--line); }
.value:last-child { border-bottom: 1px solid var(--line); }
.value__n { font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.13em; color: var(--red); padding-top: 0.45rem; }
.value__t { font-size: clamp(1.2rem, 1.9vw, 1.7rem); font-weight: 700; letter-spacing: -0.024em; line-height: 1.14; }
.value__d { margin-top: 0.6rem; color: var(--grey); max-width: 52ch; }

/* ---------- Laufband der Branchen ---------- */
.marq { overflow: hidden; border-block: 1px solid var(--line); padding-block: clamp(1.5rem, 2.4vw, 2.2rem); }
.marq__row { display: flex; gap: 0; width: max-content; }
/* Auf Touch-Geraeten laeuft das Band als reine CSS-Animation. Die liegt
   auf dem Compositor und belastet den Hauptthread beim Scrollen nicht. */
@keyframes marq-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marq__row.is-css { animation: marq-run 42s linear infinite; }
.marq__item { display: flex; align-items: center; gap: clamp(1.6rem, 3vw, 3rem); padding-right: clamp(1.6rem, 3vw, 3rem); font-size: clamp(1.3rem, 2.5vw, 2.35rem); font-weight: 700; letter-spacing: -0.03em; white-space: nowrap; }
.marq__item i { display: block; width: 7px; height: 7px; background: var(--red); flex: none; transform: rotate(45deg); }

/* ---------- Gesichterband ---------- */
/* Feste Spaltenzahl statt freiem Umbruch. Vorher brauchten 19 Fotos bei 68 px
   genau 1436 px, der Container bot 1432 px, und ein einzelnes Gesicht rutschte
   allein in die zweite Zeile. Mit fester Spaltenzahl und mittig gesetzter
   letzter Reihe bleibt das Band ruhig, gleich wie viele Mitglieder es sind. */
.faces {
  --spalten: 10;
  --luecke: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--luecke);
  justify-content: center;
  margin-block: clamp(2.5rem, 4vw, 3.5rem);
}
@media (max-width: 1180px) { .faces { --spalten: 8; } }
@media (max-width: 940px)  { .faces { --spalten: 6; } }
@media (max-width: 680px)  { .faces { --spalten: 4; --luecke: 10px; } }
/* Zwei Klassen im Selektor, weil Elementor `.elementor img` die Rundung
   sonst auf null setzt. */
/* Der Abzug von einem hundertstel Pixel faengt Rundungsfehler ab, sonst passt
   gelegentlich eine Spalte weniger in die Reihe als gerechnet. */
.faces img.face {
  width: calc((100% - (var(--spalten) - 1) * var(--luecke)) / var(--spalten) - 0.01px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%; object-fit: cover; filter: grayscale(1) contrast(1.03);
}
@media (hover: hover) {
  .faces img.face { transition: filter .55s var(--ease), transform .55s var(--ease); }
  .faces img.face:hover { filter: none; transform: translateY(-5px); }
}

/* ---------- Betreuer ---------- */
.hosts { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
/* Die Zahl der Betreuer kommt aus der Mitgliederverwaltung und kann wachsen.
   Groesse und Ueberlappung haengen deshalb an einer Variablen: bei N Betreuern
   misst die Reihe --host * (1 + 0.74 * (N - 1)). Bei sechs Betreuern sind das
   auf dem Schreibtisch 451 px und am Telefon 301 px, beides passt. */
.hosts__faces { display: flex; --host: clamp(64px, 7vw, 96px); }
/* Ab sieben Betreuern wird der Stapel kleiner, sonst ragt die Reihe am Telefon
   ueber den Container und wird abgeschnitten. `:has` zaehlt dafuer die Kinder.
   Gemessen am Telefon, Container 315 px: drei Betreuer 159 px, sechs 301 px,
   sieben in dieser Stufe 261 px, acht 297 px. */
.hosts__faces:has(> :nth-child(7)) { --host: clamp(48px, 6vw, 88px); }
/* Zwei Klassen im Selektor, weil Elementor `.elementor img` mit Rahmen
   und Rundung auf null setzt. Gleiche Spezifitaet, aber spaeter geladen,
   deshalb braucht es hier eine Stufe mehr. */
.hosts .hosts__faces img { width: var(--host); height: var(--host); border-radius: 50%; object-fit: cover; border: 2px solid var(--paper); margin-left: calc(var(--host) * -0.26); filter: grayscale(1); }
.hosts .hosts__faces img:first-child, .hosts .hosts__faces .hosts__sil:first-child { margin-left: 0; }
.section--tint .hosts .hosts__faces img { border-color: var(--paper-2); }

/* ---------- Mitgliederraster ---------- */
.mfilter { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding-block: 1.15rem; border-block: 1px solid var(--line); margin-bottom: clamp(2.5rem, 4vw, 4rem); position: sticky; top: var(--hd-h, 85px); background: var(--paper); z-index: 40; }
.mfilter__f { display: flex; align-items: center; gap: 0.8rem; flex: 1 1 320px; }
.mfilter__f svg { width: 17px; height: 17px; color: var(--grey); flex: none; }
.mfilter input { width: 100%; border: 0; background: none; font-size: 1.05rem; letter-spacing: -0.012em; padding: 0.25rem 0; }
.mfilter input::placeholder { color: var(--line); }
.mfilter__c { font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); }

.mgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gut) clamp(1rem, 2vw, 2rem); align-items: start; }
.mcard { display: flex; flex-direction: column; }
.mcard[hidden] { display: none; }
.mcard__ph { position: relative; aspect-ratio: 1; overflow: hidden; background: #fff; margin-bottom: 1.15rem;
  /* Ohne flex: none staucht langer Text in der Karte das Bild, dann
     haben die Fotos einer Reihe unterschiedliche Hoehen. */
  flex: none; }
.mcard__ph img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.03); }
@media (hover: hover) {
  .mcard__ph img { transition: filter .6s var(--ease), transform .8s var(--ease); }
  .mcard:hover .mcard__ph img { filter: grayscale(0); transform: scale(1.035); }
}
.mcard__sil { position: absolute; inset: 0; }
.mcard__sil svg { width: 100%; height: 100%; fill: var(--line); }
.hosts__sil { width: var(--host, 96px); height: var(--host, 96px); border-radius: 50%; border: 2px solid var(--paper); margin-left: calc(var(--host, 96px) * -0.26); background: #fff; display: grid; place-items: center; overflow: hidden; }
.section--tint .hosts__sil { border-color: var(--paper-2); }
.hosts__sil svg { width: 100%; height: 100%; fill: var(--line); }
.mcard__beruf { font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase; color: var(--red); line-height: 1.4; min-height: 2.8em; }
.mcard__name { margin-top: 0.6rem; font-size: 1.16rem; font-weight: 700; letter-spacing: -0.022em; line-height: 1.16; }
.mcard__firma { margin-top: 0.3rem; color: var(--grey); font-size: 0.94rem; line-height: 1.4; }
.mcard__c { margin-top: 0.9rem; display: flex; flex-direction: column; gap: 0.28rem; font-size: 0.9rem; }
.mcard__c a { color: var(--grey); transition: color .3s linear; overflow-wrap: anywhere; }
.mcard__c a:hover { color: var(--red); }
.mempty { padding: 4rem 0; color: var(--grey); }

/* ---------- Termine ---------- */
.talks { border-top: 1px solid var(--line); }
.talk { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--gut); align-items: baseline; padding-block: clamp(1.7rem, 2.8vw, 2.6rem); border-bottom: 1px solid var(--line); transition: padding-left .55s var(--ease); }
.talk:hover { padding-left: 1rem; }
.talk__d { font-family: var(--mono); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.03em; color: var(--red); }
.talk__who { font-size: clamp(1.25rem, 2.1vw, 1.85rem); font-weight: 700; letter-spacing: -0.026em; line-height: 1.14; }
.talk__what { margin-top: 0.5rem; color: var(--grey); max-width: 58ch; }
.talk--tbd .talk__who, .talk--tbd .talk__d { color: var(--line); }
/* Wenn im Plugin noch kein Vortrag hinterlegt ist. */
.talks--leer { padding-block: clamp(1.7rem, 2.8vw, 2.6rem); border-bottom: 1px solid var(--line); }
.talk__leer { color: var(--grey); max-width: 58ch; }

/* Spaltenzahl richtet sich nach der Anzahl der Termine. Bei festen drei
   Spalten bliebe sonst eine leere graue Zelle stehen. */
.dates { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.date { background: var(--paper); padding: clamp(1.8rem, 2.8vw, 2.6rem); display: flex; flex-direction: column; gap: 0.7rem; }
.date__k { font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); }
.date__d { font-size: clamp(1.15rem, 1.7vw, 1.5rem); font-weight: 700; letter-spacing: -0.022em; line-height: 1.16; }
.date__t { font-family: var(--mono); font-size: 0.88rem; color: var(--grey); }
.date__x { color: var(--grey); font-size: 0.96rem; line-height: 1.5; margin-top: auto; padding-top: 0.7rem; }

/* ---------- Kontakt und Anmeldung ---------- */
.cta { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gut); align-items: start; }
.cta__l { grid-column: 1 / span 6; }
.cta__r { grid-column: 8 / span 5; }

.rform { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 1.25rem; }
.rfield { position: relative; grid-column: span 1; }
.rfield--full { grid-column: 1 / -1; }
.rfield label { display: block; font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--grey); margin-bottom: 0.55rem; }
.rfield input, .rfield textarea {
  width: 100%; padding: 0.75rem 0; background: none;
  border: 0; border-bottom: 1px solid var(--line);
  font-size: 1.02rem; letter-spacing: -0.012em;
  transition: border-color .35s linear;
}
.section--ink .rfield input, .section--ink .rfield textarea { border-bottom-color: rgba(255,255,255,.24); color: #fff; }
.section--ink .rfield label { color: rgba(255,255,255,.6); }
.rfield input:focus, .rfield textarea:focus { outline: 0; border-bottom-color: var(--red); }
.rfield textarea { resize: vertical; min-height: 3.4rem; }
.rform__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-top: 0.6rem; }

/* Honigtopf gegen Spam: fuer Menschen unsichtbar, fuer Maschinen verlockend */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Einwilligung */
/* Muss die Label-Formatierung der Formularfelder ueberschreiben,
   sonst erscheint der Einwilligungstext in Versalien. */
.rfield .check {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem; align-items: start; cursor: pointer;
  font-family: var(--sans);
  font-size: 1rem; font-weight: 400;
  text-transform: none; letter-spacing: normal;
  color: inherit; margin-bottom: 0;
}
.check input { width: 17px; height: 17px; margin: 3px 0 0; accent-color: var(--red); flex: none; }
.check span { font-size: 0.88rem; line-height: 1.55; color: var(--grey); }
.check a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.section--ink .check span { color: rgba(255,255,255,.6); }
.section--ink .check a { color: #fff; }

/* Rueckmeldung nach dem Absenden */
.formnote { margin-bottom: 1.6rem; padding: 0.95rem 1.2rem; border-left: 2px solid var(--red); font-size: 0.95rem; line-height: 1.5; }
.formnote--gut { background: var(--paper-2); color: var(--ink); }
.formnote--fehler { background: #FCEAEC; color: var(--ink); }
.rform__note { font-size: 0.85rem; color: var(--grey); line-height: 1.5; max-width: 40ch; }
.section--ink .rform__note { color: rgba(255,255,255,.55); }

/* ---------- Kontaktformular aus Fluent Forms ----------
   Seit 10.09.2026 kommt das Formular aus Fluent Forms (Formular 3), damit
   Manny Felder und Versand selbst pflegt. Die Regeln holen dessen Markup auf
   die Gestaltung der bisherigen Theme-Felder: zwei Spalten, Beschriftung in
   Versalien, Linie unter dem Feld, roter Knopf. Greift nur im Elementor-
   Baustein mit der Klasse .dume-kontakt. */
.dume-kontakt .frm-fluent-form fieldset { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 1.25rem; }
.dume-kontakt .frm-fluent-form .ff-el-group { grid-column: 1 / -1; margin: 0; }
.dume-kontakt .frm-fluent-form .ff-el-group.ff-halb { grid-column: span 1; }
.dume-kontakt .frm-fluent-form .ff-el-input--label { margin-bottom: 0.55rem; }
.dume-kontakt .frm-fluent-form .ff-el-input--label label {
  font-family: var(--mono); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--grey);
  margin: 0; line-height: 1.4;
}
.dume-kontakt .frm-fluent-form .ff-el-form-control {
  width: 100%; height: auto; min-height: 0; padding: 0.75rem 0;
  background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none;
  font-family: inherit; font-size: 1.02rem; letter-spacing: -0.012em; line-height: 1.4; color: var(--ink);
  transition: border-color .35s linear;
}
.dume-kontakt .frm-fluent-form .ff-el-form-control:focus { outline: 0; border-bottom-color: var(--red); box-shadow: none; }
.dume-kontakt .frm-fluent-form textarea.ff-el-form-control { resize: vertical; min-height: 3.4rem; }
.dume-kontakt .frm-fluent-form .ff-el-is-error .ff-el-form-control { border-bottom-color: var(--red); }
.dume-kontakt .frm-fluent-form .ff-el-is-error .error,
.dume-kontakt .frm-fluent-form .ff-el-is-error .text-danger { font-size: 0.82rem; color: var(--red); margin-top: 0.4rem; }

/* Einwilligung: Kaestchen links, Text rechts, wie beim alten Formular */
.dume-kontakt .frm-fluent-form .ff-el-tc .ff_tc_label {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; align-items: start;
  cursor: pointer; margin: 0; padding: 0; font-weight: 400;
}
.dume-kontakt .frm-fluent-form .ff_tc_checkbox { display: block; line-height: 0; }
.dume-kontakt .frm-fluent-form .ff-el-form-check-input { width: 17px; height: 17px; margin: 3px 0 0; accent-color: var(--red); }
.dume-kontakt .frm-fluent-form .ff_t_c { font-size: 0.88rem; line-height: 1.55; color: var(--grey); }
.dume-kontakt .frm-fluent-form .ff_t_c a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Knopf: die Klasse .btn bringt Farbe und Hover mit, hier nur Fluent Forms abraeumen */
.dume-kontakt .frm-fluent-form .ff_submit_btn_wrapper { margin-top: 0.6rem; }
.dume-kontakt .fluentform .frm-fluent-form .ff-btn-submit {
  padding: 1.05rem 1.9rem; border: 0; border-radius: 2px; min-height: 0; box-shadow: none;
  background: var(--red); color: #fff;
  font-family: inherit; font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2;
  cursor: pointer;
}
.dume-kontakt .fluentform .frm-fluent-form .ff-btn-submit:hover,
.dume-kontakt .fluentform .frm-fluent-form .ff-btn-submit:focus { background: var(--red); color: #fff; }

/* Rueckmeldung nach dem Absenden, wie .formnote */
.dume-kontakt .ff-message-success {
  margin: 0; padding: 0.95rem 1.2rem; border: 0; border-left: 2px solid var(--red); border-radius: 0;
  background: var(--paper-2); color: var(--ink); font-size: 0.95rem; line-height: 1.5; box-shadow: none;
}
.dume-kontakt .ff-errors-in-stack { margin-top: 1rem; font-size: 0.9rem; color: var(--red); }
@media (max-width: 680px) { .dume-kontakt .frm-fluent-form fieldset { grid-template-columns: 1fr; } }

.info { border-top: 1px solid var(--line); }
.info__row { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--gut); padding-block: 1.5rem; border-bottom: 1px solid var(--line); }
.info__k { font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); }
.info__v { font-size: 1.05rem; letter-spacing: -0.012em; line-height: 1.5; }

/* ---------- Fließtext für Rechtsseiten ---------- */
.prose { max-width: 68ch; }
.prose h1 { font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -0.03em; font-weight: 700; margin-bottom: 2.5rem; }
.prose h2 { font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 700; letter-spacing: -0.024em; line-height: 1.2; margin: 3rem 0 1rem; }
.prose h3 { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.017em; margin: 2rem 0 0.6rem; }
.prose p { margin-bottom: 1.15rem; color: var(--grey); }
.prose a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.prose ul { margin: 0 0 1.15rem 1.1rem; list-style: disc; color: var(--grey); }
.prose li { margin-bottom: 0.4rem; }
.prose strong { color: var(--ink); font-weight: 700; }

/* ---------- Fußzeile ---------- */
.ft { background: var(--ink); color: var(--paper); padding-block: clamp(4rem, 7vw, 6.5rem) 2.5rem; }
.ft__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gut); padding-bottom: clamp(3rem, 5vw, 4.5rem); border-bottom: 1px solid rgba(255,255,255,.16); }
.ft__brand { grid-column: 1 / span 5; }
.ft__claim { margin-top: 1.6rem; font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 700; letter-spacing: -0.026em; line-height: 1.14; max-width: 24ch; }
.ft__col { grid-column: span 2; }
.ft__col:nth-of-type(2) { grid-column: 7 / span 2; }
.ft__h { font-family: var(--mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 1.2rem; }
.ft__col li { margin-bottom: 0.55rem; }
.ft__col a, .ft__col span { color: rgba(255,255,255,.82); font-size: 0.97rem; }
.ft__col a:hover { color: #fff; }
.ft__bot { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; padding-top: 2rem; font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.ft__bot a:hover { color: #fff; }
.ft__bot nav { display: flex; gap: 1.75rem; }

.totop {
  position: fixed;
  right: var(--gut); bottom: 1.75rem;
  z-index: 80;
  width: 50px; height: 50px;
  display: grid; place-items: center;
  background: var(--paper);
  color: var(--ink);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--line), 0 2px 14px rgba(0,0,0,.07);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease), background-color .3s linear, color .3s linear;
}
.totop.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { background: var(--red); color: #fff; box-shadow: inset 0 0 0 1px var(--red), 0 4px 18px rgba(210,0,30,.22); }
@media (max-width: 680px) { .totop { width: 44px; height: 44px; bottom: 1.1rem; } }

/* ---------- Enthüllung beim Scrollen ---------- */
.js .rv { opacity: 0; transform: translateY(26px); }
.rv-line { display: block; overflow: hidden; padding-top: 0.06em; padding-bottom: 0.18em; margin-bottom: -0.20em; }
.rv-line:last-child { margin-bottom: -0.06em; }
.rv-line > span { display: block; }

/* ---------- Adaptiv ---------- */
@media (max-width: 1180px) {
  .mgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shead__l { grid-column: 1 / span 8; }
  .shead__r { grid-column: 1 / span 8; }
  .values__aside, .values__list { grid-column: 1 / -1; }
  .values__aside .sticky { position: static; margin-bottom: 2.5rem; }
  .cta__l, .cta__r { grid-column: 1 / -1; }
  .cta__r { margin-top: 3rem; }
}
@media (max-width: 1180px) {
  .hero__canvas { right: -8%; width: 62%; height: 62%; opacity: 0; }
  .hero__canvas.is-ready { opacity: 0.55; }
  .hero__note { display: none; }
}
@media (max-width: 940px) {
  .hero__canvas { top: 4%; right: -14%; width: 108%; height: 54%; }
  .hero__canvas.is-ready { opacity: 0.2; }
  .hd__nav, .hd .btn { display: none; }
  .burger { display: block; }
  .hero__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem var(--gut); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem var(--gut); }
  .reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: 1fr; gap: 2.6rem; }
  .dates { grid-template-columns: 1fr; }
  .talk { grid-template-columns: 1fr; gap: 0.5rem; }
  .talk__d { order: -1; }
  .ft__brand { grid-column: 1 / -1; }
  .ft__col, .ft__col:nth-of-type(2) { grid-column: span 6; margin-top: 2.5rem; }
}
@media (max-width: 680px) {
  .mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reasons { grid-template-columns: 1fr; }
  .hero__meta { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .rform { grid-template-columns: 1fr; }
  .info__row { grid-template-columns: 1fr; gap: 0.4rem; padding-block: 1.2rem; }
  .value { grid-template-columns: 1fr; gap: 0.5rem; }
  .rhythm__pin { --stop-w: 76vw; }
  .stop { flex-basis: var(--stop-w, 76vw); }
  .scroller { display: none; }
  .ft__col, .ft__col:nth-of-type(2) { grid-column: 1 / -1; }
}
/* Mitgliederliste am Telefon einspaltig. Die laengste E-Mail-Adresse hat
   41 Zeichen, rund 295 px bei 0.9rem. In zwei Spalten bleiben je 160 px,
   die Adresse bricht dann mitten im Wort. Einspaltig stehen 335 px bereit.
   Zwischen 601 und 680 px bleiben zwei Spalten, sonst wuerde das Portrait
   auf kleinen Tablets 640 px gross. */
@media (max-width: 600px) {
  .mgrid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .rv { opacity: 1; transform: none; }
  .scroller i::after, .hscroll i::after { display: none; }
}

/* Druck */

/* ---------- Teilen-Leiste ----------
   Faehrt nach dem ersten Scrollen herein. Am Seitenende dockt sie an, damit
   sie den Footer nicht verdeckt. Symbole einfarbig in der Tinte der Seite,
   beim Ueberfahren rot. Markup und Verhalten stehen in site.js. */
#dume-teilen-anker { position: relative; display: block; width: 100%; clear: both; }

.teilen {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding-block: 0.55rem;
  padding-bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px));
  transform: translateY(101%);
  opacity: 0; visibility: hidden;
  transition: transform .45s var(--ease), opacity .3s linear, visibility .3s linear;
}
.teilen.ist-sichtbar { transform: none; opacity: 1; visibility: visible; }
/* Angedockt sitzt sie im Anker am Seitenende, also unter dem Footer. */
.teilen.ist-angedockt { position: absolute; bottom: 0; transform: none; }

.teilen__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.teilen__t {
  margin: 0; font-family: var(--mono); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); white-space: nowrap;
}
.teilen__k { display: flex; gap: 0.15rem; }

.teilen__b {
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: none;
  color: var(--ink); cursor: pointer;
  transition: color .3s linear, background-color .3s linear;
}
.teilen__b svg { width: 19px; height: 19px; display: block; fill: currentColor; }
.teilen__b:hover, .teilen__b:focus-visible { color: var(--red); background: var(--paper-2); }
.teilen__b:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* Rueckmeldung des Kopierknopfes, sonst passiert sichtbar nichts. */
.teilen__ok {
  margin: 0; font-family: var(--mono); font-size: var(--fs-label);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--red);
  opacity: 0; transition: opacity .25s linear; pointer-events: none;
  position: absolute; right: var(--gut); bottom: 100%; padding-bottom: 0.4rem;
}
.teilen.ist-kopiert .teilen__ok { opacity: 1; }

/* Der Knopf nach oben weicht der Leiste aus. */
body.hat-teilen-leiste .totop { bottom: calc(1.6rem + var(--teilen-h, 60px)); }

/* Nachrichten gibt es nur am Telefon. */
@media (hover: hover) and (pointer: fine) { .teilen__b--sms { display: none; } }
@media (max-width: 680px) {
  .teilen__t { display: none; }
  .teilen__in { justify-content: center; }
  .teilen__b { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) { .teilen { transition: none; } }
@media print { #dume-teilen-anker { display: none !important; } }

@media print {
  .hd, .mnav, .scroller, .hero__canvas, .marq { display: none !important; }
  body { color: #000; }
}

/* ---------- Kopfbereich der Unterseiten ---------- */
.phero { padding-top: clamp(9rem, 18vh, 13.5rem); padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.phero .label { margin-bottom: clamp(1.4rem, 2.6vw, 2.1rem); }
.phero .display { max-width: 17ch; }
.phero__lead { max-width: 52ch; margin-top: clamp(1.5rem, 2.4vw, 2.1rem); }
.phero__rule { margin-top: clamp(3rem, 5vw, 4.5rem); height: 1px; background: var(--line); }
/* Rechtstexte: die Beschriftung steht fuer sich, der Text schliesst
   direkt darunter an, statt einen ganzen Abschnittsabstand zu lassen. */
.phero--eng { padding-bottom: 0; }
.section--anschluss { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
/* In Elementor sind Ueberschrift und Fliesstext zwei Bausteine, der
   Abstand dazwischen kommt deshalb nicht mehr aus `.prose h1`. */
.dume-elementor .prose { margin-top: clamp(1.8rem, 3vw, 2.5rem); }

/* ==========================================================================
   Elementor-Seiten
   Elementor setzt die CSS-Klasse auf das aeussere Element, formatiert aber
   die Ueberschrift innen. Diese Regeln reichen unsere Werte nach innen
   durch und stellen die Sektionsabstaende wieder her.
   ========================================================================== */

/* Innere Elemente erben vom Traeger unserer Klassen.
   Elementor formatiert mit `.elementor-widget-heading .elementor-heading-title`
   und laedt sein CSS nach unserem. Bei gleicher Staerke gewinnt sonst
   Elementor, deshalb hier eine Stufe hoeher. */
/* Elementors Standardschriften.
   Der Baukasten setzt diese vier Variablen auf Roboto und laedt sie sonst
   bei Google nach. Zwei Klassen im Selektor, weil Elementor sie an der
   Kitklasse des Body setzt und wir eine Stufe darueber liegen muessen.
   Roboto bleibt die Schrift, sie kommt jetzt nur aus dem Theme. */
body[class*="elementor-kit-"] {
  --e-global-typography-primary-font-family: 'Roboto';
  --e-global-typography-secondary-font-family: 'Roboto';
  --e-global-typography-text-font-family: 'Roboto';
  --e-global-typography-accent-font-family: 'Roboto';
}

.dume-elementor .elementor-widget-heading .elementor-heading-title,
.dume-elementor .elementor-widget .elementor-heading-title {
  font-family: inherit; font-size: inherit; font-weight: inherit;
  line-height: inherit; letter-spacing: inherit; color: inherit;
  margin: 0;
}
.dume-elementor .elementor-widget-text-editor { color: inherit; }
/* Fliesstextbausteine folgen der Umgebung. Rechtstexte sind ausgenommen,
   die bringen mit `.prose` ihre eigene Typografie mit. */
.dume-elementor .elementor-widget-text-editor:not(.prose) .elementor-widget-container,
.dume-elementor .elementor-widget-text-editor:not(.prose) p { margin: 0; color: inherit; font: inherit; letter-spacing: inherit; }
.dume-elementor .elementor-widget-text-editor:not(.prose) p + p { margin-top: 0.9em; }

/* Sektionsabstaende, die Elementors Container sonst plattmachen */
.dume-elementor .e-con.section,
.dume-elementor .elementor-element.section { padding-block: var(--sec); }
.dume-elementor .e-con.phero,
.dume-elementor .elementor-element.phero {
  padding-top: clamp(9rem, 18vh, 13.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.dume-elementor .e-con.diag-top,
.dume-elementor .elementor-element.diag-top { padding-top: calc(var(--sec) + 3.4vw); }
.dume-elementor .e-con.shell,
.dume-elementor .elementor-element.shell {
  width: 100%; max-width: var(--shell);
  margin-inline: auto; padding-inline: var(--gut);
}

/* Farben: Elementor bringt eigene Grundwerte mit */
.dume-elementor .display,
.dume-elementor .h2,
.dume-elementor .h3 { color: var(--ink); }
.dume-elementor .label { color: var(--red); }
.dume-elementor .lead { color: var(--grey); }
.dume-elementor .section--ink .display,
.dume-elementor .section--ink .h2,
.dume-elementor .section--ink .h3 { color: var(--paper); }
.dume-elementor .section--ink .label { color: #fff; }
.dume-elementor .section--ink .lead { color: rgba(255,255,255,.72); }

/* Abstaende zwischen den Bausteinen einer Sektion */
.dume-elementor .label + .display,
.dume-elementor .label + .h2 { margin-top: clamp(1.1rem, 2vw, 1.7rem); }
.dume-elementor .label + .dume-kontakt { margin-top: clamp(1.1rem, 2vw, 1.7rem); }
.dume-elementor .display + .lead,
.dume-elementor .h2 + .lead { margin-top: clamp(1.2rem, 2.1vw, 1.8rem); }
.dume-elementor .lead + .elementor-widget-shortcode { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.dume-elementor .lead { max-width: 58ch; }
.dume-elementor .phero .lead { max-width: 52ch; }

/* Sprungmarken innerhalb der Elementor-Seiten */
.dume-elementor [id] { scroll-margin-top: calc(var(--hd-h, 85px) + 1rem); }

/* Heldbereich auf Elementor-Seiten. Elementors Container setzt eigene
   Werte fuer Hoehe, Innenabstand und Breite, die hier zurueckgeholt werden. */
.dume-elementor .e-con.hero,
.dume-elementor .elementor-element.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: 8rem 2.25rem;
  overflow: hidden;
}
.dume-elementor .hero .hero__in { width: 100%; }
.dume-elementor .hero .display { max-width: 13ch; }
.dume-elementor .hero .hero__lead { max-width: 40ch; margin-top: clamp(1.2rem, 2.1vw, 1.8rem); }
.dume-elementor .hero .hero__eyebrow { margin-bottom: clamp(1.1rem, 2.1vw, 1.75rem); }
.dume-elementor .hero .hero__actions { margin-top: clamp(1.5rem, 2.5vw, 2.2rem); }
.dume-elementor .hero .hero__actions p { display: flex; flex-wrap: wrap; gap: 0.85rem; margin: 0; }
.dume-elementor .hero .hero__actions a { text-decoration: none; }
.dume-elementor .hero .elementor-widget:has(.hero__meta) { width: 100%; }

/* Knoepfe, die als Text eingesetzt werden, bleiben Knoepfe */
.dume-elementor .elementor-widget-text-editor .btn { display: inline-flex; }
.dume-elementor .elementor-widget-text-editor p:has(.btn),
.dume-elementor .elementor-widget-text-editor p:has(.tlink) { margin-top: clamp(2rem, 3.5vw, 3rem); }

/* Das Widget der 3D-Szene ist bei Elementor position:relative und null hoch.
   Dadurch spannt sich die Leinwand dagegen auf statt gegen den Heldbereich.
   Static macht den Heldbereich wieder zum Bezugspunkt. */
.dume-elementor .hero .elementor-widget:has(.dume-held) { position: static; }
.dume-elementor .dume-held { position: static; }

/* Elementor begrenzt jedes Widget mit einer sehr starken Regel auf 100 %
   (.e-con.e-con > .e-con-inner > .elementor-widget). Fuer die Textmasse
   unseres Designs muss das ueberschrieben werden. */
.dume-elementor .hero .display { max-width: 13ch !important; }
.dume-elementor .hero .hero__lead { max-width: 40ch !important; }
.dume-elementor .phero .display { max-width: 17ch !important; }
.dume-elementor .phero .lead { max-width: 52ch !important; }
.dume-elementor .lead { max-width: 58ch !important; }
.dume-elementor .h2 { max-width: 24ch !important; }
.dume-elementor .prose { max-width: 68ch !important; }

/* Laufen die Karten von allein mit, gibt es nichts zu wischen und der Hinweis
   muss weg. Steht bewusst am Dateiende, damit er die Grunddefinition
   ueberschreibt. Laeuft nichts, bleibt der Streifen von Hand zu bewegen und
   der Hinweis damit auch am Schreibtisch richtig. */
.rhythm.is-lauf .hscroll { display: none; }

/* ==========================================================================
   Dienstagskarten: waagerechtes Mitlaufen beim Scrollen

   Frueher eine scrollgesteuerte CSS-Animation (animation-timeline: view()).
   Die lief nur in Chromium. Firefox 154 kennt keine einzige der noetigen
   Eigenschaften, am 31.08.2026 im Programm selbst nachgemessen, und WebKit
   rechnet die Strecke anders und blieb auf halbem Weg stehen. Der Abschnitt
   sah damit in jedem Browser anders aus.

   Jetzt fuehrt ScrollTrigger die Spur, siehe assets/js/site.js. Derselbe Weg
   in allen drei Browsern und damit dasselbe Bild. Das Mausrad wird nicht
   abgefangen, gelesen wird nur die Scrollposition, gesetzt nur ein transform.

   Die Klasse is-lauf setzt das Skript, auf jedem Geraet. Ohne JavaScript und
   bei prefers-reduced-motion fehlt sie, dann bleibt der wischbare Streifen
   von weiter oben stehen. Es geht also nichts verloren.
   ========================================================================== */
.rhythm.is-lauf .rhythm__pin { display: block; }

/* clip statt auto: der Bereich soll abschneiden, ohne selbst zu scrollen.
   Damit verschwindet auch der Scrollbalken, den der Streifen braucht.

   Keine volle Fensterbreite. Der Bereich ist genau so breit wie die
   Inhaltsspalte, weil die Trennlinie ueber den Karten aus deren Oberkanten
   entsteht. Lief das Feld bis an den Fensterrand, lief die Linie rechts aus
   der Seite heraus und stand links vor dem Text. Jetzt tauchen die Karten
   genau dort auf und ab, wo Ueberschrift und Text beginnen und enden. */
.rhythm.is-lauf .rhythm__vp {
  overflow: clip;
  height: 264px;
  display: flex;
  align-items: center;
  padding: 0;
}

/* Weiterhin kein width: max-content. Das Skript misst die Laufstrecke an der
   rechten Kante der letzten Karte, nicht an der Breite der Spur. */
.rhythm.is-lauf .rhythm__track { will-change: transform; }

/* Sicherheitsnetz, falls jemand die Einstellung nach dem Laden umlegt. Das
   Skript setzt is-lauf bei prefers-reduced-motion gar nicht erst. */
@media (prefers-reduced-motion: reduce) {
  .rhythm.is-lauf .rhythm__track { transition: none !important; }
}