/* Navigation, Mega-Menue und Interaktionen der Sihlau-Website.
   Ausgelagert aus dem Webflow-Embed, damit die Regeln vor dem ersten
   Rendern greifen (kein Aufblitzen des Mega-Menues). */
/* ---------------- DESKTOP MEGA-MENU (>= 992px) ---------------- */
  @media screen and (min-width: 992px) {
  .mega-menu        { display: flex  !important; }
    .mega-menu {
      height: 0;
      overflow: hidden;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-6px);
      pointer-events: none;
      transition: height .28s cubic-bezier(.22,.61,.36,1),
                  opacity .2s ease,
                  transform .28s cubic-bezier(.22,.61,.36,1);
      will-change: height;
    }
    .mega-menu.is-open {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
    }
    .mega-menu-link-wrapper {
      opacity: 0;
      visibility: hidden;
      transform: translateY(4px);
      transition: opacity .22s ease .04s, transform .22s ease .04s;
    }
    .mega-menu-link-wrapper.is-active {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .nav-link-box { cursor: pointer; }
  }
  /* ---------------- MOBILE MENU (<= 991px) ---------------- */
  @media screen and (max-width: 991px) {
.mobile-mega-menu { display: block !important; }
    .lottie-animation-3 {
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .mobile-mega-menu {
      overflow-x: hidden;
      overflow-y: auto;
      max-height: 0;
      opacity: 0;
      pointer-events: none;
      transition: max-height .34s cubic-bezier(.22,.61,.36,1),
                  opacity .26s ease;
    }
    .mobile-mega-menu.is-open {
      opacity: 1;
      pointer-events: auto;
    }
    .mobile-menu-link-wrapper {
      overflow: hidden;
      max-height: 0;
      margin-top: 0;
      opacity: .001;
      transition: max-height .3s cubic-bezier(.22,.61,.36,1),
                  opacity .24s ease;
    }
    .mobile-menu-link-wrapper.is-open { opacity: 1; }
    .nav-caret {
      transition: transform .3s cubic-bezier(.22,.61,.36,1);
      transform-origin: 50% 50%;
      flex: 0 0 auto;
    }
    .mobile-menu-dropdown-wrapper { cursor: pointer; }
    .mobile-menu-dropdown-wrapper.is-open .nav-caret { transform: rotate(180deg); }
    /* subtle press feedback, keeps it feeling responsive but quiet */
    .mobile-menu-sub-link, .menu-link-p { transition: color .2s ease, opacity .2s ease; }
  }

/* ---------------- FAQ-AKKORDEON ----------------
   Ohne JS bleiben alle Antworten offen. Erst .faq-ready (von site.js gesetzt)
   klappt sie ein - so ist der Inhalt auch ohne JS vollstaendig lesbar. */
.faq-title-wrapper { cursor: pointer; align-items: center; gap: 16px; }
.faq-title-wrapper .i-m { transition: transform .28s cubic-bezier(.22,.61,.36,1); flex: 0 0 auto; }

.faq-wrapper.faq-ready .faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .3s cubic-bezier(.22,.61,.36,1), opacity .22s ease;
}
.faq-wrapper.faq-ready .faq-answer > * { overflow: hidden; min-height: 0; }
.faq-wrapper.faq-ready .faq-questions.is-open .faq-answer { grid-template-rows: 1fr; opacity: 1; }
.faq-wrapper.faq-ready .faq-questions.is-open .faq-title-wrapper .i-m { transform: rotate(180deg); }

/* Browser ohne Interpolation von grid-template-rows: hart auf/zu statt Animation. */
@supports not (grid-template-rows: 0fr) {
  .faq-wrapper.faq-ready .faq-answer { display: none; opacity: 1; }
  .faq-wrapper.faq-ready .faq-questions.is-open .faq-answer { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-wrapper.faq-ready .faq-answer,
  .faq-title-wrapper .i-m { transition: none; }
}

/* ---------------- SKIP-LINK ---------------- */
.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 1000;
  padding: 12px 20px;
  border-radius: var(--s);
  background-color: var(--primary);
  color: var(--white);
  font-size: 1rem;
  text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus { top: 16px; }

/* ---------------- FOKUS SICHTBAR ----------------
   Webflow blendet den Standard-Fokusring stellenweise aus. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------- TABELLEN ----------------
   .table-2col war im Webflow-CSS angelegt, aber ohne die Rahmen-Optik von
   .table-3col und nirgends benutzt. Hier bekommt sie dasselbe Raster. */
.table-2col {
  margin-top: var(--m);
  margin-bottom: var(--2xl);
  gap: 1.5px;
  border-radius: var(--m);
  background-color: var(--beige-3);
  overflow: hidden;
}
.table-tile.nowrap { white-space: nowrap; }
.table-note { opacity: .6; }

/* Auf mittleren Displays reicht es, die aeusseren Spalten schrumpfen zu lassen. */
@media screen and (max-width: 767px) {
  .table-3col { grid-template-columns: auto minmax(0, 1fr) auto; }
  .table-3col .table-tile { padding: var(--m); font-size: .95rem; }
  .table-tile.nowrap { white-space: normal; hyphens: auto; }
}

/* Unter 560px bringen drei Spalten nichts mehr - die laengste Textspalte
   bekaeme paradoxerweise am wenigsten Platz. Darum stapeln: die Kopfzeile
   entfaellt, jede Zeile wird ein Block. */
@media screen and (max-width: 559px) {
  .table-3col {
    grid-template-columns: 1fr;
    /* Die Rasterfuge zog eine Haarlinie zwischen JEDE Kachel, also auch
       zwischen die drei Angaben derselben Klasse. Damit sah eine Zeile aus
       wie drei, und zwischen zwei Klassen sah es genauso aus. */
    gap: 0;
  }
  .table-3col > .table-tile:nth-child(-n+3) { display: none; }
  .table-3col > .table-tile:nth-child(3n+1) { padding: var(--l) var(--l) var(--3xs); }
  .table-3col > .table-tile:nth-child(3n+2) { padding: 0 var(--l) var(--3xs); }
  .table-3col > .table-tile:nth-child(3n+3) { padding: 0 var(--l) var(--l); opacity: .6; }

  /* Linie vor jedem neuen Block. Die ersten vier Kacheln bleiben aussen vor:
     drei sind die versteckte Kopfzeile, die vierte ist der erste Block und
     braucht oben keine Trennung. */
  .table-3col > .table-tile:nth-child(3n+1):not(:nth-child(-n+4)) {
    border-top: 1.5px solid var(--beige-3);
  }
}
/* Gestapelt wird eine Zeile zu zwei Bloecken - und das Raster zieht seine
   Haarlinie zwischen beide. Damit zerfaellt jeder Eintrag optisch in zwei
   Zeilen: erst ein Datum ohne Anlass, dann ein Anlass ohne Datum. Genau
   umgekehrt, als es sein soll.

   Darum unter 480px: keine Fugen mehr aus dem Raster, sondern eine Linie
   VOR jedem neuen Eintrag. Das Datum wird zur kleinen Vorzeile ueber dem
   Anlass, so wie man einen Termin auch aufschreiben wuerde. */
@media screen and (max-width: 479px) {
  .table-2col {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .table-tile.nowrap { white-space: normal; }

  /* Die Kopfzeile stapelt sonst zu zwei sinnlosen Zeilen: erst «Datum»,
     dann «Anlass», beide ohne das, was sie ueberschreiben. */
  .table-2col > .table-tile:nth-child(-n+2) { display: none; }

  .table-2col > .table-tile.content.nowrap {
    padding: var(--l) var(--l) var(--3xs);
    font-size: .875rem;
    opacity: .6;
  }
  .table-2col > .table-tile.content.nowrap + .table-tile.content {
    padding: 0 var(--l) var(--l);
  }
  /* Trennlinie zwischen zwei Eintraegen, nie innerhalb eines. Der dritte
     Nachbar ist das Datum des naechsten Eintrags. */
  .table-2col > .table-tile.content.nowrap + .table-tile.content + .table-tile {
    border-top: 1.5px solid var(--beige-3);
  }
}

/* ---------------- VERANSTALTUNGSLISTE ----------------
   .news-wrapper ist eine Reihe aus drei Karten (Startseite). Fuer eine
   vollstaendige Liste braucht es dieselben Karten im Raster. */
.news-wrapper.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: var(--2xl) var(--m);
}
.article-preview .article-image { width: 100%; }

/* Auf der Startseite ist .news-wrapper ein Flex-Container ohne .grid. Ohne
   die naechste Regel richten sich die Karten nach ihrer Textlaenge aus:
   375, 317 und 352px nebeneinander - und weil die Bilder ihr Verhaeltnis
   halten, werden sie dadurch auch unterschiedlich hoch, und die Texte
   beginnen auf verschiedenen Hoehen.

   flex-basis 0 statt auto laesst alle Karten gleich viel Platz nehmen,
   unabhaengig vom Inhalt. min-width 0 ist dabei noetig, weil Flex-Elemente
   von Haus aus nicht unter ihre Inhaltsbreite schrumpfen - genau das war
   die Ursache. Bei .news-wrapper.grid greift die Regel nicht, dort
   verteilt schon das Raster gleichmaessig. */
.news-wrapper > .article-preview {
  flex: 1 1 0;
  min-width: 0;
}

/* min-width 0 nimmt den Karten die eingebaute Mindestbreite. Ohne die
   naechste Regel ragt dann ein langes Kompositum wie
   "Mitgliederversammlung" aus seiner Karte und schiebt die ganze Seite
   waagrecht auf - bei 900px waren das 34px.

   hyphens: auto trennt deutsche Woerter an sinnvollen Stellen (die Seite
   traegt lang="de"), overflow-wrap faengt ab, was sich nicht trennen
   laesst - lange Adressen etwa. */
.article-preview {
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Termine, deren Datum noch nicht feststeht, werden als solche gekennzeichnet. */
.event-note {
  display: inline-block;
  margin-bottom: var(--s);
  padding: 2px 10px;
  border-radius: 999px;
  background-color: var(--beige-3);
  font-size: .8125rem;
}

@media screen and (max-width: 991px) {
  .news-wrapper.grid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 767px) {
  .news-wrapper.grid { display: grid; grid-template-columns: 1fr; }
}

/* ---------------- BILDVERHAELTNISSE ----------------
   Die width/height-Attribute an den Bildern reservieren den Platz vor dem Laden
   (kein Layout-Shift). Sie wirken aber als Praesentations-Hinweis und wuerden
   sonst eine feste Pixelhoehe erzwingen - darum ueberall height:auto.
   Ausgenommen sind Bilder, die ihren Container bewusst ausfuellen sollen
   (Mosaik-Kacheln, .stretch, Lageplan) - die brauchen height:100%. */
img[width][height]:not(.mosaic-image):not(.stretch):not(.map-image):not(.blob-img) { height: auto; }

/* Verstaerkt, damit die Regel oben nicht doch greift. */
.mosaic-tile > .mosaic-image,
picture > .mosaic-image { height: 100%; }

/* Karten-Bilder kamen bisher in ihrem Originalformat - hoch- und querformatige
   Fotos nebeneinander liessen die Karten unterschiedlich hoch werden. */
.article-image,
.link-card-image {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  height: auto;
}
.page-preview .body-image,
.sidebar-persona .body-image {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  height: auto;
}
/* object-fit braucht eine wirksame Hoehe - aspect-ratio allein genuegt hier
   nicht, wenn height:auto gilt. */
.article-image,
.link-card-image,
.page-preview .body-image,
.sidebar-persona .body-image { min-height: 0; }

/* ---------------- SIDEBAR ----------------
   Die Kontaktkarte hat kein Bild mehr, dadurch wirkte der Innenabstand von
   12px zu knapp. Gleicher Wert wie bei .card. */
.sidebar-persona .div-block-2 {
  padding: var(--xl);
  gap: var(--s);
}
.sidebar-persona .div-block-2 .p-s { margin-bottom: 0; }
.sidebar-persona .wrapped-icon { margin-bottom: var(--2xs); }
.sidebar-text { padding: var(--xl); border-radius: var(--m); background-color: var(--beige-2); }
.sidebar-text .p-s:last-child { margin-bottom: 0; }
.page-preview .body-image { margin-bottom: var(--m); }

/* ---------------- ZAHLENBAND ----------------
   .stat-row lag ungenutzt im Webflow-CSS. Es bricht lange Textstrecken auf
   und hebt die Zahlen heraus, nach denen Eltern ohnehin suchen. */
.stat-row .card {
  padding: var(--l) var(--xl);
  gap: var(--2xs);
  justify-content: center;
}
.stat-row .stat-number {
  font-size: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  color: var(--primary);
}
.stat-row .p-s { margin-bottom: 0; }

/* Hervorgehobene Kennzahl im Fliesstext (z. B. die Beitragsspanne). */
.highlight-figure {
  padding: var(--xl);
  border-radius: var(--m);
  border-left: 4px solid var(--primary);
  background-color: var(--beige-2);
  margin-bottom: var(--m);
}
.highlight-figure .p-l { margin-bottom: var(--2xs); font-family: Hedvig Letters Serif, sans-serif; }
.highlight-figure .p-s { margin-bottom: 0; }

@media screen and (max-width: 991px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
}

/* <picture> nur als Container fuer die WebP-Alternative - es soll im Layout
   nicht mitzaehlen, damit alle Regeln weiter direkt am <img> greifen. */
picture { display: contents; }

/* ---------------- ICON-SCHRIFT ----------------
   Das Subset ist ein statischer Schnitt in Gewicht 400. .i-m verlangte 500,
   was sonst kuenstlich fett gerechnet wuerde. Dazu die Einstellungen, die
   Material Symbols fuer die Ligaturen braucht (aus "download" wird ein Icon). */
.i-xs, .i-s, .i-m, .i-l, .button-inline-icon {
  font-weight: 400;
  font-variant-ligatures: normal;
  font-feature-settings: 'liga';
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}

/* ---------------- FORMULAR-MELDUNGEN ----------------
   Webflow liefert dafuer ein graues Standardfeld mit winziger, zentrierter
   Schrift. Hier im Stil der uebrigen Karten. */
.w-form-done,
.w-form-fail {
  padding: var(--xl);
  border-radius: var(--m);
  text-align: left;
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  line-height: 135%;
}
.w-form-done {
  border-left: 4px solid var(--primary);
  background-color: var(--beige-2);
}
.w-form-fail {
  border-left: 4px solid var(--primary);
  background-color: #b13f4c1a;
  color: var(--dark-primary);
}
.w-form-fail:focus-visible,
.w-form-done:focus-visible { outline-offset: 2px; }

/* Der Absende-Knopf waehrend des Sendens */
.contact-form input[type="submit"]:disabled { opacity: .6; cursor: progress; }

/* ---------------- MOSAIK-KACHELN ALS KNOEPFE ----------------
   Die Kacheln sind jetzt <button>, damit sie anklickbar und per Tastatur
   erreichbar sind. Der Browser-Standardrahmen muss dafuer weg. */
button.mosaic-tile {
  padding: 0;
  border: 0;
  font: inherit;
  cursor: zoom-in;
  display: block;
  position: relative;
}
button.mosaic-tile .mosaic-image { transition: transform .4s cubic-bezier(.22,.61,.36,1); }
button.mosaic-tile:hover .mosaic-image { transform: scale(1.04); }
button.mosaic-tile:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  button.mosaic-tile .mosaic-image,
  button.mosaic-tile:hover .mosaic-image { transition: none; transform: none; }
}

/* ---------------- GROSSANSICHT ---------------- */
.zoom {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background-color: #1a1210f2;
}
.zoom.is-open { display: flex; }
html.zoom-offen { overflow: hidden; }

.zoom-figur {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--m);
  max-width: 100%;
  max-height: 100%;
}
.zoom-bild {
  max-width: min(1400px, 92vw);
  max-height: 78vh;
  width: auto;
  height: auto;
  border-radius: var(--m);
  background-color: var(--beige-2);
}
.zoom-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 60ch;
  color: var(--white);
  text-align: center;
  font-size: .95rem;
  line-height: 135%;
}
.zoom-zaehler { opacity: .6; font-size: .85rem; }

.zoom-schliessen,
.zoom-nav {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background-color: #ffffff26;
  color: var(--white);
  cursor: pointer;
  transition: background-color .2s ease;
}
.zoom-schliessen:hover,
.zoom-nav:hover { background-color: #ffffff40; }
.zoom-schliessen:focus-visible,
.zoom-nav:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.zoom-schliessen { top: 16px; right: 16px; }
.zoom-vor  { left: 16px;  top: 50%; transform: translateY(-50%); }
.zoom-nach { right: 16px; top: 50%; transform: translateY(-50%); }

@media screen and (max-width: 767px) {
  .zoom { padding: 8px; }
  .zoom-bild { max-height: 68vh; }
  /* Auf dem Handy stehen die Pfeile unten nebeneinander statt am Bildrand -
     dort waeren sie mit dem Daumen kaum erreichbar. */
  .zoom-nav { top: auto; bottom: 16px; transform: none; }
  .zoom-vor  { left: calc(50% - 62px); }
  .zoom-nach { right: calc(50% - 62px); }
  .zoom-text { padding-bottom: 76px; }
}

/* ---------------- MOSAIK-RASTER AUF DEM HANDY ----------------
   Nachgemessen: bei 375px Fensterbreite ist eine Spalte 167px breit, eine
   h-1-Kachel mit 15 Zeilen aber 187px hoch. Querformat-Fotos verloren dadurch
   fast die Haelfte ihrer Breite. Mit 13 Zeilen wird die Kachel quadratisch,
   mit 27 Zeilen die hohe Kachel wieder 1:2. */
@media screen and (max-width: 767px) {
  .mosaic-tile.h-1 { grid-row: span 13 / span 13; }
  .mosaic-tile.h-2 { grid-row: span 27 / span 27; }
  .mosaic-tile.wide { grid-row: span 13 / span 13; }

  /* Text-, Zahlen- und Zitatkacheln waren mit 30 Zeilen doppelt so hoch wie
     ihr Inhalt - darunter blieb sichtbar Leerraum. Gemessen braucht der
     laengste Textblock 168px, das Zitat 104px. */
  .mosaic-text { grid-row: span 16 / span 16; }
  .mosaic-stat { grid-row: span 14 / span 14; }
  .mosaic-quote { grid-area: span 15 / span 2 / span 15 / span 2; }
}

/* ---------------- BURGER-SYMBOL ----------------
   Ersetzt eine 299 KB grosse Lottie-Bibliothek, die nichts anderes tat, als drei
   Striche zum X zu drehen. Die drei Striche sind Pseudo-Elemente des Knopfes. */
.lottie-animation-3 {
  position: relative;
  width: 32px;
  height: 32px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: none;
  border: 0;
  padding: 0;
  flex: 0 0 auto;
}
.burger-strich,
.lottie-animation-3::before,
.lottie-animation-3::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  height: 2.5px;
  border-radius: 2px;
  background-color: var(--black);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), opacity .18s ease;
}
.lottie-animation-3::before { top: 9px; }
.burger-strich            { top: 15px; }
.lottie-animation-3::after { top: 21px; }

/* Geöffnet: obere und untere Linie kreuzen sich, die mittlere blendet aus. */
.lottie-animation-3.is-open::before { transform: translateY(6px) rotate(45deg); }
.lottie-animation-3.is-open::after  { transform: translateY(-6px) rotate(-45deg); }
.lottie-animation-3.is-open .burger-strich { opacity: 0; transform: scaleX(.4); }

.lottie-animation-3:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .burger-strich,
  .lottie-animation-3::before,
  .lottie-animation-3::after { transition: none; }
}


/* ---------------- FOOTER-HINTERGRUND ----------------
   Das Original ist 315 KB gross und liegt auf jeder Seite. Es ist eine
   Bleistiftskizze hinter dunklem Rot - dafuer reicht die kleine Variante,
   zumal sie mit background-size:cover ohnehin skaliert wird. */
.footer {
  background-image: url("../images/SuhlauSkizze1-p-800.png");
}

/* ==================================================================
   SIDEBAR
   Regel siehe SIDEBAR-REGEL.md. Aufbau immer gleich:
   Knopf - Auf einen Blick - Ansprechstelle - Weiterlesen - Downloads.
   ================================================================== */
.main-sidebar {
  align-self: start;
  /* Ohne feste Basis schrumpft die Spalte im Flexbox-Container mit. */
  flex: 0 0 360px;
  max-width: 360px;
}
.main-content { flex: 1 1 auto; min-width: 0; }

/* Die Sidebar scrollt mit dem Inhalt, sie bleibt nicht stehen.
   align-self: start oben sorgt dafuer, dass sie ihre natuerliche Hoehe
   behaelt und oben buendig mit dem Inhalt beginnt, statt auf dessen
   volle Hoehe gestreckt zu werden. */

.sidebar-block {
  padding: var(--xl);
  border-radius: var(--m);
  background-color: var(--beige-2);
}
.sidebar-block > .h4 { margin-bottom: var(--m); }

/* --- Auf einen Blick --- */
.fakten { margin: 0; display: flex; flex-direction: column; gap: var(--s); }
.fakt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-bottom: var(--s);
  border-bottom: 1px solid var(--beige-3);
}
.fakt:last-child { padding-bottom: 0; border-bottom: 0; }
.fakt-titel {
  font-size: .8125rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  opacity: .55;
}
.fakt-wert {
  margin: 0;
  font-size: clamp(.9375rem, .9rem + .2vw, 1rem);
  line-height: 130%;
}

/* --- Weiterlesen --- */
.page-preview {
  display: block;
  padding-bottom: var(--m);
  border-radius: var(--m);
  background-color: var(--beige-2);
  overflow: hidden;
  transition: background-color .2s ease;
}
.page-preview:hover { background-color: var(--beige-3); }
.page-preview .body-image { margin-bottom: var(--m); border-radius: 0; }
.page-preview .h4,
.page-preview .p-s { padding-left: var(--xl); padding-right: var(--xl); }
.page-preview .p-s:last-child { margin-bottom: 0; }
/* Kleiner Hinweis, dass es weitergeht */
.page-preview .h4::after {
  content: " →";
  color: var(--primary);
  white-space: nowrap;
}

/* --- Downloads in der Sidebar etwas kompakter --- */
.main-sidebar .link-block { padding: var(--m); }
.main-sidebar .link-block .i-l { font-size: 26px; }
.main-sidebar .download-title { font-size: .9375rem; line-height: 125%; }
.main-sidebar .sidebar-block .download-wrapper { gap: var(--s); }

/* --- Der Knopf oben spannt ueber die volle Sidebarbreite --- */
.main-sidebar > .button { margin-bottom: 0; width: 100%; }

/* Auf schmalen Fenstern wird die Sidebar zum Anhang unter dem Text. */
@media screen and (max-width: 991px) {
  .main-sidebar { gap: var(--m); }
  .main-container { gap: var(--2xl); }
}

/* ================================================================
   ERSCHEINEN BEIM SCROLLEN
   ================================================================
   Zurueckhaltend gedacht: 14 Pixel Weg, eine gute halbe Sekunde,
   eine Kurve, die am Ende ausrollt. Was weiter faehrt oder schneller
   ist, faellt auf — und etwas, das auffaellt, wirkt beim dritten Mal
   wie ein Effekt und nicht mehr wie Handwerk.

   Versteckt wird ausschliesslich, was site.js vorher markiert hat.
   Damit bleibt die Seite ohne JavaScript, im Live Editor und in
   jedem Lesemodus vollstaendig sichtbar — und es gibt kein Aufblitzen
   vor dem Laden des Skripts, weil das Skript nur anfasst, was beim
   Start ohnehin unterhalb des Fensters liegt. */

.js-erscheint {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity   .62s cubic-bezier(.22, .61, .36, 1),
    transform .62s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--verzug, 0ms);
  will-change: opacity, transform;
}

.js-erscheint.ist-da { opacity: 1; transform: none; will-change: auto; }

/* Bilder kommen ohne Weg — bei einer Flaeche liest sich eine Bewegung
   als Ruckeln, bei Text als Auftritt. */
.js-erscheint.ist-bild { transform: translate3d(0, 8px, 0); }

@media (prefers-reduced-motion: reduce) {
  .js-erscheint { opacity: 1; transform: none; transition: none; }
}

/* ================================================================
   BLOBS IN DER HERO-SECTION
   ================================================================
   Sechs Formen, zwei davon Fotos. Am Zeiger bewegen sie sich
   unterschiedlich weit — das ergibt Tiefe, ohne dass irgendetwas
   sichtbar „animiert" waere. Der Weg liegt bei hoechstens vierzehn
   Pixeln; alles darueber sieht nach Spielerei aus.

   Die Verschiebung setzt site.js als Custom Property, damit sie sich
   mit der Schwebe im selben transform addieren laesst. */

.blob {
  --zeiger-x: 0px;
  --zeiger-y: 0px;
  --schwebe-y: 0px;
  transform: translate3d(var(--zeiger-x), calc(var(--zeiger-y) + var(--schwebe-y)), 0);
  will-change: transform;
}

/* Mit Maus: weich nachziehen. Ohne diese Uebergangszeit wirkt es
   hakelig, mit mehr wirkt es traege. */
@media (pointer: fine) {
  .blob { transition: transform .55s cubic-bezier(.16, .84, .44, 1); }
}

/* Ohne Maus gibt es keinen Zeiger, dem man folgen koennte. Statt
   dessen ein langsames Schweben: jede Form mit eigener Dauer und
   eigenem Versatz, damit sich kein Takt einstellt, den man mitzaehlt. */
@media (pointer: coarse) {
  .blob { animation: blob-schweben var(--dauer, 13s) ease-in-out var(--versatz, 0s) infinite alternate; }

  .blob.blob-1 { --dauer: 11s; --versatz: -2s;   }
  .blob.blob-2 { --dauer: 17s; --versatz: -7s;   }
  .blob.blob-3 { --dauer: 13s; --versatz: -4.5s; }
  .blob.blob-4 { --dauer: 19s; --versatz: -1s;   }
  .blob.blob-5 { --dauer: 15s; --versatz: -9s;   }
  .blob.blob-6 { --dauer: 23s; --versatz: -6s;   }
}

@keyframes blob-schweben {
  from { --schwebe-y: -5px; }
  to   { --schwebe-y:  5px; }
}

/* @property macht die Custom Property fuer den Browser zu einer Laenge
   statt zu einem Text — erst damit wird sie interpoliert. Ohne die
   Angabe springt die Schwebe zwischen den Werten, statt zu gleiten. */
@property --schwebe-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; transition: none; transform: none; }
}

/* ================================================================
   DETAILSEITE EINES TERMINS
   ================================================================
   Der ausfuehrliche Text kommt aus dem Rich-Text-Feld: Absaetze,
   Zwischentitel, Aufzaehlungen, Links und Bilder in beliebiger
   Reihenfolge. Er braucht deshalb eigene Abstaende — die Klassen der
   Webflow-Bausteine greifen hier nicht, weil das Markup erst beim
   Speichern entsteht. */

.artikel-text {
  max-width: 68ch;
  font-size: 17px;
  line-height: 1.62;
}

.artikel-text > * + * { margin-top: 1.1em; }

.artikel-text h2 {
  margin-top: 1.9em;
  font-size: 24px;
  line-height: 1.25;
}

.artikel-text h3 {
  margin-top: 1.6em;
  font-size: 19px;
  line-height: 1.3;
}

.artikel-text ul,
.artikel-text ol { padding-left: 1.35em; }
.artikel-text li + li { margin-top: .4em; }

/* Bilder im Fliesstext nehmen die volle Breite. Die Bildunterschrift
   steht dicht darunter und linksbuendig — nah genug, dass sie sichtbar
   zum Bild gehoert, mit Abstand nach unten zum naechsten Absatz. */
.artikel-text figure { margin: 1.6em 0; }
.artikel-text figure img { width: 100%; height: auto; }
.artikel-text figure figcaption {
  margin-top: 6px;
  text-align: left;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-2, #5d5d66);
}

/* Der Abschluss unter dem Text: Weg zurueck zur Liste. Eine Haarlinie
   trennt ihn ab, damit er nicht wie ein weiterer Absatz gelesen wird. */
.artikel-fuss {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(28, 28, 31, .12);
}

/* ================================================================
   ABSTAND ZWISCHEN INHALT UND FUSSBEREICH
   ================================================================
   Der Inhaltsbereich endet auf manchen Seiten mit einem farbigen
   CTA-Kasten. Ohne eigenen Abstand stiess der direkt an den dunklen
   Fussbereich — zwei Farbflaechen ohne Luft dazwischen, was wie ein
   Fehler aussieht und nicht wie eine Trennung. */

.main { padding-bottom: 80px; }

@media screen and (max-width: 767px) {
  .main { padding-bottom: 52px; }
}

/* ================================================================
   LEADBILD EINER INHALTSSEITE
   ================================================================
   Ohne Vorgabe kommt das Bild in seinem Originalformat. Hochformatige
   Aufnahmen schoben damit den ganzen Text nach unten und liessen die
   Sidebar danebenstehen wie abgeschnitten. 4:3 ist breit genug, dass
   das Motiv wirkt, und flach genug, dass der Einstieg lesbar bleibt. */

.main-content > .image-wrapper .body-image {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  height: auto;
  min-height: 0;
  width: 100%;
}

/* ================================================================
   SIDEBAR AUF SCHMALEN FENSTERN
   ================================================================
   Ab hier stapelt der main-container zur Spalte: die Sidebar steht
   unter dem Text und soll die volle Breite einnehmen. Die feste Basis
   von 360px weiter oben wuerde sie sonst weiterhin kappen — sichtbar
   zwischen etwa 400 und 767 Pixeln. Die flex-Angabe meint in
   Spaltenrichtung die Hoehe, nicht die Breite; 360px ist dort nur
   irrefuehrend. */

@media screen and (max-width: 767px) {
  .main-sidebar { flex: 0 0 auto; max-width: none; width: 100%; }
}

/* ================================================================
   KALENDER-ADRESSE IN DER BILDUNTERSCHRIFT
   ================================================================
   Der Knopf darueber abonniert per webcal. Diese Adresse steht fuer
   den Google Kalender am Computer da, der webcal nicht kennt und sie
   abgetippt haben will.

   overflow-wrap, weil eine Adresse kein Wort mit Trennstellen ist:
   ohne die Regel schiebt sie auf einem Telefon die ganze Zeile ueber
   den Rand hinaus und erzeugt seitliches Scrollen auf der Seite. */
.kalender-adresse {
  overflow-wrap: anywhere;
  color: var(--black);
}

/* ---------------- KNOEPFE IM AUFRUF-ABSCHNITT ----------------
   Zwei Knoepfe nebeneinander brauchen zusammen rund 370px. Ein Telefon
   bietet abzueglich der Raender keine 350 - die Beschriftungen wurden
   deshalb an beiden Seiten abgeschnitten. Untereinander bekommt jeder
   die volle Breite, und die Reihenfolge bleibt die gedachte: der
   Hauptweg oben.

   Kein flex-wrap: das ergaebe bei drei Knoepfen zwei oben und einen
   unten, was nach Gruppe aussieht, wo keine ist. */
@media screen and (max-width: 559px) {
  .button-wrapper {
    flex-flow: column;
    align-items: stretch;
  }
  .button-wrapper .button { margin-bottom: 0; width: 100%; }
}