/* ==========================================================================
   Jungschar St. Thekla — eigene Styles
   Die Osmo-Komponenten liegen unangetastet in css/osmo-*.css. Hier stehen
   Farben, Schrift, Masse und die Anpassungen an diese Seite.
   ========================================================================== */


/* ==========================================================================
   Farbschema
   Nicht ausgedacht, sondern aus den fünf Smiley-SVGs gezogen — die Farben
   liegen ohnehin auf der Seite, sobald die Dinger fallen. Dadurch lesen
   Seite und Objekte als ein System statt als zwei Entwürfe nebeneinander.

   Die Fläche bleibt ruhig: warmes Papierweiß auf allen Seiten, Tinte für
   Schrift und dunkle Karten.
   Die kräftigen Töne kommen nur punktuell — Hover, Auswahl, Akzente. Das
   ist der Unterschied zwischen kräftig und laut.
   ========================================================================== */

:root {
  /* Grundfläche — aus den Smileys abgeleitet statt danebengesetzt.
     Das Papier ist ein sehr helles Gelb: dieselbe Farbe wie #FEC600,
     nur stark aufgehellt. Dadurch sitzt jeder Ball auf verwandtem Grund.
     Das Dunkel ist exakt der Strich, mit dem jeder Smiley gezeichnet ist. */
  --paper:  #F7F2E4;
  --ink:    #131313;   /* exakt der Strich in jedem Smiley */
  --deep:   #131313;
  --cream:  #F7F2E4;

  /* Akzente, alle direkt aus den Smileys */
  --yellow: #FEC600;
  --pink:   #FCA5A0;
  --blue:   #0184D4;
  --green:  #00A146;
  --orange: #FB4E02;


  --font: "Google Sans", system-ui, -apple-system, sans-serif;

  /* Osmos Easing — steht so in deren Nav-CSS als --cubic-default */
  --osmo-ease: cubic-bezier(0.625, 0.05, 0, 1);
}


/* ==========================================================================
   Osmos Scaling System
   Eins zu eins von osmo-dynamic-text-cursor.webflow.io. Alle Osmo-Bausteine
   rechnen in em — ohne das hier sitzen sie auf großen Schirmen zu klein.
   --size-font ist die Bezugsgröße, die body erbt.
   ========================================================================== */

:root {
  --size-unit: 14;              /* war 16 — kleiner skaliert alle Osmo-Bausteine mit */
  --size-container-ideal: 1440; /* Bildschirmbreite im Entwurf, ohne px */
  --size-container-min: 992px;
  --size-container-max: 1920px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
}

@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 834;
    --size-container-min: 768px;
    --size-container-max: 991px;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 390;
    --size-container-min: 480px;
    --size-container-max: 767px;
  }
}

@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 390;
    --size-container-min: 320px;
    --size-container-max: 479px;
  }
}


body {
  margin: 0;
  min-height: 100svh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--size-font);
  font-weight: 400;
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--yellow);
  color: var(--ink);
}


/* ==========================================================================
   Schrift-Overrides
   Beide Osmo-Komponenten rufen "Haffer XH" auf, eine lizenzpflichtige
   Schrift. Ohne diese Zeilen fallen sie auf Arial zurück.
   ========================================================================== */

.twostep-nav__link-span,
.twostep-nav__link-eyebrow,
.demo-links__link-span {
  font-family: var(--font);
}


/* ==========================================================================
   Hero-Name
   Ersetzt das Wortmarken-SVG der Matter.js-Komponente durch echten Text.
   Eine Zeile. --name-size regelt die Breite: hochdrehen bis es passt —
   die Sektion schneidet Überstand ab (overflow: hidden).
   Bewusst in Ink, nicht bunt: die Farbe kommt von den Smileys.
   ========================================================================== */

.resource-name {
  --name-size: 8vw;

  width: 100%;
  margin: 0;
  margin-top: 7rem;            /* Platz für die fixierte Nav, plus Luft */
  font-family: var(--font);
  font-size: var(--name-size);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.03em;
  text-align: center;
  white-space: nowrap;
}

@media screen and (max-width: 767px) {
  .resource-name {
    --name-size: 8.5vw;
    margin-top: 7.5rem;
  }
}


/* ==========================================================================
   Kacheln — Overrides zur Osmo-Demo
   Form, Größe und Hover-Verhalten bleiben wie dort. Geändert sind nur
   die Farben (auf unser Schema) und die Positionierung: bei Osmo füllt
   .demo-links eine eigene Sektion, bei uns sitzt sie in der freien Fläche
   zwischen Name und Smiley-Haufen.

   --tiles-top verschiebt die Reihe nach oben oder unten.
   ========================================================================== */

.demo-links {
  --tiles-top: 42%;

  min-height: 0;               /* statt 100svh — wir sind nicht die Sektion */
  position: absolute;
  top: var(--tiles-top);
  left: 0;
  right: 0;
  /* über dem Matter-Canvas, aber unter der Cursor-Blase (die hat 25) */
  z-index: 10;
  flex-wrap: wrap;
  padding-inline: 2vw;
}

.demo-links__link {
  background-color: var(--deep);
  color: var(--cream);
}

/* Der Kasten fuer die Smileys ist bei Osmo ein Quadrat (padding-top: 100%),
   unten angeschlagen. Auf dem Desktop ist das Quadrat hoeher als der
   Schirm und faellt nicht auf. Auf dem Handy war es 390x390 — die oberen
   450px des Heros hatten gar keine Physik, die Smileys tauchten erst in
   der Mitte auf und darueber blieb ein Loch.

   Jetzt deckt der Kasten den ganzen Hero ab und ragt ein Viertel nach oben
   darueber hinaus. Das ist Absicht: Osmo erzeugt die Smileys direkt unter
   der oberen Wand. Stuende die Wand am Bildrand, entstuenden sie sichtbar
   im Bild und ploppten auf. Ueber dem Rand entstehen sie ausser Sicht und
   fallen weich herein — genau wie es Osmos Quadrat auf dem Desktop tat.
   Der Boden bleibt die Unterkante des Heros; das Ueberstehende schneidet
   .section-resource mit overflow: hidden ab. */
.canvas-matter {
  top: -25%;
  bottom: 0;
  height: auto;
}

/* Desktop: Osmo setzt die Smileys eine Smiley-Groesse unter die obere
   Wand, und am Desktop ist ein Smiley ein Achtel der Breite (240px bei
   1920). Ein Viertel der Hero-Hoehe reicht da nicht: sie entstanden halb
   im Bild und stauten sich am oberen Rand. Der Ueberstand richtet sich
   deshalb nach der Breite — doppelte Smiley-Groesse, also sicher ausser Sicht. */
@media screen and (min-width: 768px) {
  .canvas-matter {
    top: -25vw;
  }
}

.canvas-matter__before {
  display: none;
}

.demo-links .demo-links__link:hover {
  color: var(--yellow);
}

@media screen and (max-width: 767px) {
  .demo-links {
    --tiles-top: 38%;
  }
}


/* ==========================================================================
   Inhalt unterhalb des Heros
   Unter dem Hero wird gescrollt.
   Aufbau und Groessen kommen aus osmo-highlight-text.css, hier nur
   Grund und Farbe.
   ========================================================================== */

.content {
  position: relative;
  z-index: 1;              /* über dem Matter-Canvas, der bis unten reicht */
  background: var(--paper);
  color: var(--ink);
}


/* Die Karten erben die Seitenschrift, Osmo setzt dort keine eigene. */

/* Osmos Linie ist #f4f4f4b3 — hell auf deren dunklem Grund. Bei uns liegt
   sie auf Papierweiß und wäre unsichtbar. Gelb kommt aus den Smileys. */
.draw-scroll__path-el {
  color: var(--yellow);
}

/* Die Überschriften rufen "Haffer" auf — lizenzpflichtig. */


/* ==========================================================================
   Der gezeichnete Pfad als Band hinter dem Inhalt
   Osmos Komponente rechnet mit einem eigenen Abschnitt fester Höhe. Hier
   spannt sie sich über alle Sektionen — deshalb Seitenverhältnis und
   Ränder aus, dafür volle Höhe.
   ========================================================================== */

.path-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Seitenverhaeltnis und Raender der Vorlage gelten weiter — die Segmente
   stehen einfach untereinander und fuellen die Hoehe gemeinsam. */
.path-layer .draw-scroll__path-w {
  margin: 0;
  width: 100%;
}

/* Naht zwischen den Segmenten schliessen. Zwei Ursachen addieren sich:
   der Pfad beginnt im viewBox erst bei y=30 und endet bei y=2400, und der
   Wrapper hat aspect-ratio 980/2370 waehrend das SVG 1040/2430 misst — der
   Kasten ist also hoeher als die Zeichnung. Zusammen 8,2 % der Breite,
   nachgemessen am gerenderten Bild. Prozentuale Raender rechnen gegen die
   Breite, deshalb steht hier % und nicht px. */
.path-layer .draw-scroll__path-w + .draw-scroll__path-w {
  margin-top: -8.2%;
}

/* Der Inhalt liegt vor dem Band */
.termine,
.highlight-text-section,
.cards-stack,
.news,
.gruppenstunden,
.faq,
.newsletter-block {
  position: relative;
  z-index: 1;
}

/* Osmos Sektion ist fest 100vh hoch und zentriert den Satz darin. Bei uns
   ist der Satz auf breiten Schirmen hoeher als das, er stand oben ueber
   den Rand hinaus und lag auf der Gruppenstunden-Karte darueber. Die
   Sektion waechst jetzt mit, ist aber nie kleiner als ein Schirm. */
.highlight-text-section {
  height: auto;
  min-height: 100vh;
}

/* Osmos Knopf mit Pfeilblase in unseren Farben: beide Blasen (die rechts
   in Ruhe, die links beim Hovern) in der Akzentfarbe, Pille dunkel wie die
   anderen Knoepfe. */
.btn-bubble-arrow__arrow,
.btn-bubble-arrow__arrow.is--duplicate {
  color: var(--ink);
  background-color: var(--pink);
}

.btn-bubble-arrow__content {
  color: var(--paper);
  background-color: var(--ink);
}

.highlight-text-container .btn-group {
  margin-top: 3rem;
}

/* ==========================================================================
   Kartenfarben
   Dieselben Töne wie bei den vorigen Karten (Stacking Cards 3D), damit der
   Abschnitt aussieht wie gehabt. Osmos eigene Varianten sind Weiß, Oliv
   und Schwarz — die kommen hier nicht zum Einsatz.
   ========================================================================== */

.cards-stack-card.is--p1 { color: #2b1a12; background-color: #e8c4b8; }
.cards-stack-card.is--p2 { color: #1d2212; background-color: #dde3c0; }
.cards-stack-card.is--p3 { color: #121a24; background-color: #c9d6e8; }
.cards-stack-card.is--p4 { color: #241c0c; background-color: #e6d3a3; }


/* ==========================================================================
   Handy
   Osmos Demos sind für den Desktop gebaut und bringen für diese Bausteine
   keine Regeln unter 768px mit. Was hier steht, ist genau das Nötige,
   damit die Seite am Telefon dasselbe Bild abgibt.
   ========================================================================== */

@media screen and (max-width: 767px) {

  /* Der Name in ZWEI Zeilen und dafuer gross. Vorher stand er einzeilig
     auf 8vw — das sind bei 390px 31px, kleiner als die Knoepfe darunter.
     Umbrechen darf er nur zwischen "Jungschar" und "St. Thekla": im
     Markup steht ein geschuetztes Leerzeichen vor "Thekla". intro.js
     zerlegt nur echte Leerzeichen in Bruchstellen, das geschuetzte wird
     zum Zeichen und haelt "St. Thekla" zusammen. */
  /* Name und Knoepfe haengen an denselben Massen. Vorher sassen die Knoepfe
     bei einem Prozentwert der Hero-Hoehe, der Name bei einem festen Abstand
     von oben. In Safari auf dem iPhone 15 Pro bleiben mit Leisten nur
     ~660px sichtbar — dort rutschten die Knoepfe 15px IN den Namen.
     Jetzt: Knoepfe = Oberkante des Namens + seine zwei Zeilen + Abstand. */
  .section-resource {
    --name-top: 8.5rem;
    --name-size: 15.5vw;
    --name-luft: 3.25rem;
    /* Die GROSSE Hoehe (Safari-Leiste eingeklappt). Mit 100svh war der Hero
       nur so hoch wie der Schirm mit Leiste — klappte sie beim Scrollen ein,
       schaute unten der naechste Abschnitt herein. So sieht man oben immer
       nur den Hero. */
    height: 100lvh;
  }

  .resource-name {
    --name-size: inherit;       /* vom Hero, dort rechnen auch die Knoepfe damit */
    white-space: normal;
    line-height: .95;
    margin-top: var(--name-top);
    padding-inline: 1rem;
  }

  /* Dieselbe Form wie am Desktop — nicht nur dieselbe Ecke. Osmo baut die
     Kachel komplett in em: 20 x 13.33em (3:2), Ecke .75em, Schrift 3.75em.
     Vorher standen hier eigene Masse in rem (19 x 4.25rem), und daraus
     wurden flache Balken — eine andere Form als die Kacheln am Desktop.
     Jetzt bleiben Osmos Masse unangetastet, und nur die Schriftgroesse des
     Kastens wird kleiner: die Kacheln schrumpfen als Ganzes und behalten
     Seitenverhaeltnis, Rundung und Textgroesse im selben Verhaeltnis.
     Auf dem Handy sind alle drei gleich — auch die Mitte ist hier eine
     Kachel, keine Pille. Am Desktop bleibt Osmos Pille in der Mitte.
     2vw sind bei 390px 7.8px — eine Kachel misst dann 156 x 104px. */
  .demo-links__link.is--center {
    border-radius: .75em;
  }

  /* Kuerzere Schirme — Safari auf dem iPhone mit Adress- und Statusleiste
     laesst ~660 bis ~740px sichtbar. Dort wird gestaffelt: Name etwas
     hoeher und kleiner, Kacheln kleiner, die Luft zwischen Name und Knoepfen
     bleibt deutlich. */
  @media (max-height: 800px) {
    .section-resource { --name-top: 7.25rem; --name-luft: 3rem; }
    .section-resource .demo-links { font-size: 1.8vw; }
  }

  @media (max-height: 700px) {
    .section-resource { --name-top: 6rem; --name-size: 14vw; --name-luft: 2.75rem; }
    .section-resource .demo-links { font-size: 1.6vw; }
  }

  .demo-links {
    --tiles-top: calc(var(--name-top) + 2 * .95 * var(--name-size) + var(--name-luft));
    font-size: 2vw;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    padding-inline: 0;
  }

  /* "Gruppenleiter:innen" ist ein einziges unteilbares Wort und bei 3rem
     breiter als das Display. */
  /* Der Button war am Telefon zu groß für die Zeile. */
  /* Das gelbe Band: im Markup 60 Einheiten stark, gedacht fuer die volle
     Desktopbreite. Auf 390px frisst es fast ein Viertel der Spalte und
     laeuft quer hinter jedem Absatz durch. Duenner bleibt es als Faden
     erkennbar, ohne den Text zu uebertoenen. CSS schlaegt hier das
     stroke-width-Attribut im SVG. */
  .path-layer [data-draw-scroll-path] {
    stroke-width: 34;
  }

  /* Osmo erzwingt fuer die Karten auf dem Handy ein festes Hochformat
     (aspect-ratio 2/3) und schiebt Nummer und Text mit space-between an
     die Raender. Osmos Demo hat dort zwei Zeilen Text — unsere Karten
     tragen einen ganzen Absatz, und zwischen "1." und dem Titel blieb ein
     leeres Feld, das die Sektion auf 2467px aufgeblaeht hat. Die Karte
     waechst jetzt mit ihrem Inhalt; Nummer und Titel haben einen festen
     Abstand statt eines zufaelligen. */
  .cards-stack-card,
  .cards-stack-card.is--wide {
    aspect-ratio: auto;
    justify-content: flex-start;
    gap: 2.25rem;
    padding: 1.75rem;
  }

  .cards-stack-card__services {
    min-height: 0;
    gap: .75rem;
  }

  .cards-stack-card__services-p {
    font-size: 1rem;
    line-height: 1.45;
  }

  /* Osmos Satz steht auf 3em — bei 14px Grundschrift sind das 42px, und
     der eine Absatz lief ueber ZWEI ganze Bildschirme. Dazu hat die
     Sektion eine feste Hoehe von 100vh: was nicht hineinpasst, laeuft
     unten heraus und ueber die Karten darunter. 2em bleibt eine
     Ansage (28px, gross und fett), passt aber auf einen Schirm, und die
     Sektion waechst jetzt mit ihrem Inhalt statt ihn abzuschneiden. */
  .highlight-text-section {
    height: auto;
    min-height: 100svh;
    padding-block: 6rem 4rem;
  }

  .highlight-text-h {
    font-size: 2em;
    line-height: 1.18;
    letter-spacing: -.015em;
  }

  .highlight-text-container .btn-group {
    margin-top: 3rem;
    font-size: 1em;
  }
}

/* ==========================================================================
   Aktuelles — Hülle um Osmos Cascading Slider
   Der Slider bringt Höhe, Breite und Abstände selbst mit. Hier steht nur
   der Kopf, die ergänzte Datumszeile und der Platz um den Knopf.
   ========================================================================== */

.news {
  padding-block: clamp(4rem, 10vw, 8rem);
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.news__head {
  text-align: center;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}


/* ==========================================================================
   Bereichsüberschriften
   Eine Regel fuer alle vier statt vier Kopien, die auseinanderlaufen.
   "Neues aus der Jungschar" stand vorher auf einem kleineren Grad
   (2–3.5rem gegen 2.5–5rem) und einer anderen Zeilenhoehe — jetzt sind
   alle gleich, und sie bleiben es auch, weil es nur noch diese eine Stelle
   gibt. Die Seitenueberschrift .blog__title ist bewusst nicht dabei: die
   ist ein h1 und benennt die ganze Seite, nicht einen Bereich darin.
   ========================================================================== */

.termine__h,
.news__title,
.gruppenstunden__h,
.faq__h,
.newsletter-block__h {
  margin: 0;
  /* Untergrenze 2rem und nicht 2.5rem: "Gruppenstundenzeiten" ist EIN Wort
     und laesst sich nicht umbrechen. Bei 2.5rem mass es auf dem Handy
     398 px in einem 350-px-Kasten und hat die ganze Seite um 4 px nach
     rechts geschoben. overflow-wrap steht als Netz dahinter, damit eine
     kuenftige lange Ueberschrift das nicht wieder tut. */
  font-size: clamp(2rem, 7vw, 5rem);
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.04em;
  text-align: center;
  overflow-wrap: break-word;
}


/* Die Datumszeile ist unsere Ergänzung — Osmos Folie trägt nur eine
   Überschrift. Sie steigt zusammen mit dem Titel ein, deshalb dieselbe
   Kurve und ein etwas kürzerer Versatz. */
.cascading-slider__date {
  opacity: 0;
  margin: 0 0 .5em;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .75);
  transition: all .3s cubic-bezier(.645, .045, .355, 1);
  transform: translate(0, .25em);
}

[data-cascading-slide][data-status="active"] .cascading-slider__date {
  transition-delay: 320ms;
  opacity: 1;
  transform: translate(0, 0);
}

/* Osmos Überschrift ruft "Haffer XH" auf — lizenzpflichtig. */
.cascading-slider__h {
  font-family: var(--font);
}


/* Der Link liegt als Fläche über der Folie, damit Osmos Markup unberührt
   bleibt. z-index 3, also über dem Verlauf mit Datum und Titel (2). */
.cascading-slider__link {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
}


/* ==========================================================================
   Farbschema an die Smileys angeglichen
   Die fünf Bälle geben die Palette vor: #FEC600, #FB4E02, #FCA5A0,
   #0184D4, #00A146, gezeichnet mit #131313. Alles hier zieht Osmos
   Demo-Farben auf genau diese Töne — deren Werte waren für deren eigene
   Seiten gewählt und standen neben unserer Palette, nicht darin.
   ========================================================================== */

/* --- Vier Säulen: Osmos Pastelltöne raus, die Ballfarben rein ------------ */

.cards-stack-card.is--p1 { color: var(--ink);   background-color: var(--yellow); }
.cards-stack-card.is--p2 { color: var(--paper); background-color: var(--orange); }
.cards-stack-card.is--p3 { color: var(--paper); background-color: var(--blue); }
.cards-stack-card.is--p4 { color: var(--paper); background-color: var(--green); }

/* --- Aktuelles-Slider: Osmos Mintgrün war die einzige Farbe auf der
       Seite, die zu nichts gehörte. --------------------------------------- */

.cascading-slider__button {
  color: var(--ink);
  background-color: var(--yellow);
}

/* --- Button 066: das Weiß der Vorlage verschwindet auf hellem Grund ------ */

:root {
  --button-066-color: var(--paper);
  --button-066-color-background: #131313;
  --button-066-color-focus: #131313;
}


/* ==========================================================================
   Blog-Übersicht — ein Bildschirm, ein Raster
   Kein Aufmacher mehr, keine Karten, kein Scrollen: alle sechs Beiträge
   stehen als Raster auf genau einer Bildschirmhöhe. Die Zeilen teilen sich
   den Platz, der nach der Überschrift übrig bleibt — dadurch sitzen die
   Linien immer bündig an der Unterkante, egal wie hoch das Fenster ist.

   Grund und Farben wie auf allen anderen Seiten. Die Hover-Kachel laeuft in
   --pink, der einen Akzentfarbe der Seite.
   ========================================================================== */


.blog {
  --blog-gutter: clamp(1.25rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding-block: clamp(5.5rem, 9vw, 8rem) clamp(1.5rem, 3vw, 2.5rem);
}

/* Überschrift und Zeilentext hängen am selben Rand. Die Linien des Rasters
   laufen bewusst darüber hinaus bis an den Fensterrand — das ist der
   Unterschied zwischen einer Tabelle auf der Seite und einem Raster, das
   die Seite ist. */
.blog__head {
  padding-inline: var(--blog-gutter);
  margin-bottom: clamp(1.5rem, 4vh, 3rem);
}

.blog__title {
  margin: 0;
  font-size: clamp(3rem, 9vw, 7rem);
  font-weight: 500;
  line-height: .85;
  letter-spacing: -.05em;
}

.blog__count {
  margin: .875rem 0 0;
  font-size: 1rem;
  color: rgba(19, 19, 19, .5);
}

/* --- Osmos Directional List als Raster ------------------------------------
   Kein eigenes Zeilenlayout — das macht die Komponente. Hier stehen nur
   die Farben, die Schriftgrade und die Anweisung, sich die Resthöhe zu
   teilen.

   Die Kachel, die beim Hover hereinfaehrt, laeuft in der Farbe des
   jeweiligen Beitrags. Deshalb hat jede Zeile ein --tone.
   ------------------------------------------------------------------------ */

.directional-list.posts {
  max-width: none;          /* Osmo: 50em — unsere Zeilen tragen mehr Text */
  color: var(--ink);
  flex: 1;                  /* nimmt die ganze Resthöhe */
  min-height: 0;
}

/* Die drei Ebenen zwischen Liste und Zeile geben die Höhe nur weiter,
   wenn man es ihnen sagt. */
.posts .directional-list__collection,
.posts .directional-list__list {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.posts .directional-list__item {
  flex: 1 1 0;
  min-height: 3.75em;
  padding-inline: var(--blog-gutter);
}

.posts .directional-list__info {
  padding-inline: var(--blog-gutter);
}

/* Eine Akzentfarbe, nicht sechs. Fuenf verschiedenfarbige Zeilen
   untereinander lesen sich als Farbmuster, nicht als Liste.

   Welche Farbe, ist auch nicht Geschmack: --pink #FCA5A0 ist Zeichen fuer
   Zeichen dieselbe Farbe, die Osmo im Back-To-Top-Knopf als Akzent setzt,
   und sie markiert auf dieser Seite schon den gewaehlten Tag im Kalender.
   Als Kachel unter dem Mauszeiger sagt sie damit ueberall dasselbe: das
   hier ist das Ding, auf das du gerade zeigst. Eine Farbe, ein Anlass. */
.directional-list.posts {
  --tone: var(--pink);
}

.directional-list__hover-tile {
  background-color: var(--tone);
}

/* Die Spaltenüberschriften setzt Osmo in Rostrot und Versalien. Das ist
   genau die kleine farbige Zeile, die ich hier nicht haben will — also
   gedecktes Creme, die Form der Komponente bleibt. */
.direcitonal-list__eyebrow {
  color: rgba(19, 19, 19, .45);
  font-weight: 400;
}

.direcitonal-list__p {
  font-size: .9375em;
  color: rgba(19, 19, 19, .55);
  line-height: 1.2;
}

.direcitonal-list__p.is--titel {
  font-size: clamp(1.25rem, 2.6vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--ink);
}

/* Sobald die Kachel liegt, muss der Text auf ihr stehen können. Das Gelb
   ist hell, also traegt die Kachel Tinte.
   Gesteuert über [data-status], das Osmos Skript selbst setzt — nicht über
   :hover. Der Zustand gehört zur Komponente und kennt die Richtung; :hover
   kennt nur an/aus und fällt bei schnellen Wechseln zwischen zwei Zeilen
   auch mal daneben. */
.directional-list__item .direcitonal-list__p {
  transition: color .35s var(--osmo-ease);
}

.directional-list__item[data-status^="enter-"] .direcitonal-list__p,
.directional-list__item[data-status^="enter-"] .direcitonal-list__p.is--titel {
  color: var(--ink);
}

@media screen and (max-width: 767px) {
  /* Nebeneinander wird es zu eng: Datum und Nummer in eine Zeile, der
     Titel darunter über die volle Breite. Sechs solcher Zeilen passen
     nicht mehr auf eine Handyhöhe — hier darf die Seite scrollen, statt
     die Schrift kleinzurechnen. */
  .blog { min-height: 0; }
  .posts .directional-list__item {
    flex-wrap: wrap;
    flex: 0 0 auto;
    padding-block: 1.5em;
  }
  .directional-list__col-award { min-width: 0; flex: 1; order: 1; }
  .directional-list__col-year  { order: 2; text-align: right; min-width: 0; }
  .directional-list__col-client { order: 3; flex-basis: 100%; margin-top: .5em; }
  .directional-list__info .directional-list__col-client { display: none; }
}


/* ==========================================================================
   Schriftgewicht
   Hauptregel: Google Sans nie zu fett setzen. Die Schrift hat sehr offene
   Formen, ab 600 laufen die Innenräume zu und die Buchstaben werden
   teigig — besonders bei großen Graden. 500 ist die Obergrenze für
   Überschriften, 400 für Fließtext.

   Betrifft auch die Osmo-Komponenten: deren Demos setzen 600 und 900,
   weil sie mit Haffer gesetzt sind. Mit Google Sans passt das nicht.
   ========================================================================== */

                 /* Osmo: 900 */
.cards-stack-card__h,          /* Osmo: 600 */
.cards-stack-card__number,                 /* Osmo: 600 */
.events-calendar__month-span,  /* Osmo: 600 */
.event-card__h,                /* Osmo: 600 */
.event-card__date-p {          /* Osmo: 600 */
  font-weight: 500;
}

/* Die Kachel eines Termins setzt Osmo auf 600. Bei Ziffern faellt das noch
   staerker auf als bei Buchstaben. */
.events-calendar__tile[data-events-calendar-tile-status="event"],
.events-calendar__tile[data-events-calendar-tile-status="selected"] {
  font-weight: 500;
}


/* ==========================================================================
   Termine — Farben des Events Calendar
   Osmos Komponente kommt in Dunkelgruen mit Limette und Rosa. Das Gruen
   ist nicht aus unserer Familie, also laeuft die Tafel im Tintenschwarz
   der Startseite und die beiden Kachelzustaende in Gelb und Rosa der
   Smileys — dieselben zwei Farben, die auch die Legende erklaert.

   Alles hier sind nur Farbwerte. Masse, Raster und Ablauf bleiben, wie
   Osmo sie liefert; die Komponente steht unveraendert in
   css/osmo-events-calendar.css.
   ========================================================================== */

.termine {
  padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 4vw, 3rem);
}

/* Der Abstand gehoert hierher und nicht auf .termine: zwischen Ueberschrift
   und Kalender steht dieser Kasten, und .termine hat nur ihn als Kind. Ein
   gap auf .termine haette also nichts zu trennen — die Ueberschrift klebte
   mit 0 px am Kalender. */
.termine__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.25rem, 5vw, 4rem);
}


.events-calendar {
  font-size: clamp(11px, 1.05vw, 15px);
  max-width: 100%;
  background-color: var(--ink);
}

/* Tag mit Termin, und der gerade gewaehlte Tag */
.events-calendar__tile[data-events-calendar-tile-status="event"] {
  background: var(--yellow);
}

.events-calendar__tile[data-events-calendar-tile-status="selected"] {
  background: var(--pink);
}

.events-calendar__tile[data-events-calendar-tile-status="event"],
.events-calendar__tile[data-events-calendar-tile-status="selected"] {
  color: var(--ink);
}

/* Der Ring um "heute" ist ein Kreis in der Farbe der Tafel — er muss
   mitziehen, sonst bleibt ein gruener Punkt stehen. */
.events-calendar__tile[data-events-calendar-today]::before {
  background: var(--ink);
}

.events-calendar__legenda-dot { background-color: var(--yellow); }
.events-calendar__legenda-dot.is--selected { background-color: var(--pink); }

.events-calendar__tile-count {
  background-color: var(--paper);
  color: var(--ink);
}

/* In Osmos Datei steht .events-calendar__no-event NACH der Regel
   [data-events-calendar-empty-status="not-active"]{display:none}. Beide sind
   gleich spezifisch (0-1-0), also gewinnt die spaetere — die Box "Keine
   kommenden Termine" blieb dadurch immer stehen und nahm der aktiven Karte
   die halbe Breite weg. Eine Klasse mehr im Selektor dreht das um. Am
   Original ist nichts geaendert, das steht in css/osmo-events-calendar.css. */
.events-calendar__no-event[data-events-calendar-empty-status="not-active"] {
  display: none;
}

/* Osmo stellt den Leerzustand neben die Kartenspalte. Beide sind Kinder
   desselben Flex-Kastens, also nimmt jeder die halbe Breite — die Meldung
   stand links in einem grauen Block, rechts daneben blieb es leer. Als
   Auflage ueber der ganzen Flaeche liest sie sich als das, was sie ist. */
.events-calendar__no-event[data-events-calendar-empty-status="active"] {
  position: absolute;
  inset: 1.5em 0;
  margin: 0;
}

/* Die Terminkarte */
.event-card {
  background-color: var(--paper);
  color: var(--ink);
}

.event-card__date-p { color: var(--ink); }
.event-card__h      { color: var(--blue); }
.event-card__h.is--orange { color: var(--orange); }

/* Der Knopf auf der Terminkarte ist jetzt Osmos Button 066 — derselbe, der
   unter jedem Beitrag als "Alle Beitraege" steht. Damit laufen beide mit
   derselben Bewegung: SplitText zerlegt die Beschriftung, beim Hovern
   wandern die Zeichen versetzt nach oben und die Kopie rueckt nach.

   Aussehen und Masse der alten Kalender-Pille bleiben, gesetzt ueber die
   --button-066-Variablen. Genau dafuer sind sie da: Osmo schreibt, einzelne
   Knoepfe lassen sich ueberschreiben, indem man die Variable auf dem
   Element setzt. An beiden Komponenten ist nichts geaendert.
   Hoehe wie zuvor: 1em Zeile + 2 x 1.125em Polsterung = 3.25em. */
.event-card__cta {
  --button-066-color: var(--paper);
  --button-066-color-background: var(--blue);
  --button-066-color-focus: var(--ink);
  --button-066-border-radius: 50em;
  --button-066-padding: 1.125em 1.75em;
  font-weight: 500;
}

.event-card__cta.is--orange {
  --button-066-color-background: var(--orange);
}

@media screen and (max-width: 991px) {
  /* Untereinander gestapelt liest sich die Kartenspalte besser mit einer
     festen Hoehe — sonst schiebt eine lange Beschreibung die Tafel auf. */
  .events-calendar__cards-list { height: 34em; }

  /* Steht kein Termin an, braucht die Meldung nicht die Hoehe einer
     ganzen Karte mit Bild. */
  .events-calendar__cards:has([data-events-calendar-empty-status="active"])
    .events-calendar__cards-list { height: 9em; }
}

/* ==========================================================================
   Gruppenstunden — Osmos Opening Hours auf dem Farbschema
   Keine eigene Tafel: der Bereich steht auf dem Papierweiss der Seite wie
   der Beitrags-Slider auch. Damit die Karte darauf nicht verschwindet,
   dreht sie sich um — dunkel auf hell, dieselbe Flaeche wie .demo-card und
   wie die Kacheln der Fragen direkt darunter. Zwei dunkle Karten
   untereinander statt einer dunklen Karte in einem dunklen Kasten.

   Osmos Original ist weiss auf dunklem Grund; hier ist es umgekehrt, also
   kehren auch die Textwerte um. Der Akzent bleibt klein: der Punkt im
   Abzeichen, sonst nichts.
   ========================================================================== */

.gruppenstunden {
  padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 4vw, 3rem);
}

.gruppenstunden__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.75rem, 3.5vw, 2.5rem);
  max-width: 62em;
  margin-inline: auto;
}


.gruppenstunden__note {
  margin: 0;
  font-size: .9375rem;
  color: rgba(19, 19, 19, .5);
  text-align: center;
}

/* Osmo setzt max-width: 20em. Deren Demo hat je Zeile nur "Monday" und eine
   Uhrzeit; hier steht zusaetzlich die Gruppe, und Donnerstag traegt drei.
   Bei 20em brechen die Zeilen. Das ist die einzige Massaenderung an der
   Komponente, und sie kommt aus dem Inhalt, nicht aus Geschmack. */
.opening-hours {
  max-width: 30em;
  background-color: var(--ink);
  color: var(--paper);
  border-radius: 1.25em;
  padding: 1.25em .75em .75em;
}

.opening-hours__title {
  font-weight: 500;                /* Osmo: 600 — Hauptregel Google Sans */
}

.opening-hours__row {
  color: rgba(247, 242, 228, .7);
  align-items: flex-start;
  padding-block: .8em;
}

/* Gruppe und Zeit gehoeren zusammen, also stehen sie in EINER Zeile
   nebeneinander und nicht in zwei Spalten, die nicht fluchten. Der rechte
   Block ist ein zweispaltiges Raster: Gruppennamen linksbuendig
   untereinander, Uhrzeiten rechtsbuendig untereinander. */
.opening-hours__time {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 1em;
  row-gap: .45em;
  align-items: baseline;
  justify-content: end;
}

.opening-hours__gruppe {
  font-size: .8125em;
  color: rgba(247, 242, 228, .45);
  white-space: nowrap;
}

.opening-hours__zeit {
  font-variant-numeric: tabular-nums;   /* Ziffern stehen untereinander */
  text-align: right;
  white-space: nowrap;
}

.opening-hours__frei {
  grid-column: 1 / -1;
  font-size: .8125em;
  color: rgba(247, 242, 228, .3);
}

.opening-hours__p { line-height: 1.35; }

/* Osmo hebt den heutigen Tag mit rgba(0,0,0,.05) hervor — auf dunklem
   Grund unsichtbar. Hier dieselbe Idee mit umgekehrtem Vorzeichen. */
[data-opening-hours-current-day] {
  background-color: rgba(247, 242, 228, .09);
  border-color: rgba(247, 242, 228, .09);
}

[data-opening-hours-current-day] .opening-hours__zeit,
[data-opening-hours-current-day] .opening-hours__p {
  font-weight: 500;                /* Osmo: 600 — Hauptregel Google Sans */
  color: var(--paper);
}

[data-opening-hours-current-day] .opening-hours__gruppe {
  color: rgba(247, 242, 228, .6);
}

/* Samstag und Sonntag sind unsichtbar, aber sie bleiben im Markup. Osmos
   Skript braucht genau sieben Zeilen, eine je Wochentag — fehlt eine, bricht
   es mit "if (ordered.some(r => !r)) return" ab, und dann gibt es weder
   den hervorgehobenen heutigen Tag noch das Abzeichen "Laeuft gerade".
   Also ausblenden statt loeschen. Am Wochenende ist die hervorgehobene
   Zeile dadurch unsichtbar und das Abzeichen sagt "Gerade keine" — stimmt
   ja auch. */
[data-opening-hours-day="saturday"],
[data-opening-hours-day="sunday"] {
  display: none;
}

/* Das Abzeichen. Osmo: #c00 zu / #008214 offen. Hier die Palette:
   gedecktes Creme, wenn nichts laeuft, --green wenn doch. Der Punkt ist das
   kleinste Element auf der Karte — genau die Stelle, an der ein voll
   gesaettigter Ton hingehoert. */
.opening-hours__status {
  color: rgba(247, 242, 228, .45);
}

[data-opening-hours-store-status="open"] .opening-hours__status {
  color: var(--green);
}


/* ==========================================================================
   Häufige Fragen — Osmos Accordion auf dem Farbschema
   Osmos Kachel ist #efeeec, ein neutrales Off-White, gedacht fuer eine
   weisse Seite. Auf unserem warmen Creme wuerde das grau und schmutzig
   wirken. Statt einen sechsten Ton zu erfinden nehme ich die Flaeche, die
   auf dieser Seite fuer Karten schon da ist: --ink, wie .demo-card und die
   Tafel des Terminkalenders.
   Der Kreis um den Pfeil ist das kleine Element — dort steht der Akzent,
   dasselbe --pink wie die Kachel in der Blogliste und der gewaehlte Tag im
   Kalender.
   ========================================================================== */

.faq {
  padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 4vw, 3rem);
}

.faq__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 4vw, 3rem);
  max-width: 62em;
  margin-inline: auto;
}


/* Osmo: 29em. Die Fragen hier sind laenger als "Super easy, try it
   for yourself!" und brechen sonst schon in der Kopfzeile um. */
.accordion-css {
  max-width: 42em;
  width: 100%;
}

.accordion-css__item {
  background-color: var(--ink);
  color: var(--paper);
  border-radius: 1.25em;           /* Osmo: .5em — die Seite rundet weicher */
}

.accordion-css__item-h3 {
  font-weight: 500;                /* Osmo: 500 — passt schon */
  letter-spacing: -.01em;
}

.accordion-css__item-icon {
  background-color: var(--pink);
  color: var(--ink);
}

.accordion-css__item-p {
  color: rgba(247, 242, 228, .7);
  font-size: 1em;
}

.accordion-css__link {
  color: var(--pink);
  text-decoration: underline;
  text-underline-offset: .2em;
  word-break: break-word;
}


/* ==========================================================================
   Newsletter in der Kopfzeile der Blogübersicht
   Die Überschrift nimmt links ein Drittel, rechts war leerer Grund. Das
   Formular setzt sich dorthin, damit das Raster auf einer Bildschirmhöhe
   bleibt.
   ========================================================================== */

.blog__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 4rem);
  flex-wrap: wrap;
}

.blog__head-text { flex: 1 1 18rem; }

.newsletter {
  flex: 0 1 26rem;
  display: flex;
  flex-direction: column;
  gap: .625rem;
  margin-bottom: .25rem;
}

/* Die Eingabe kommt zweimal vor: als eigener Bereich auf der Startseite
   (heller Grund) und klein in der Kopfzeile der Blogübersicht (dunkler
   Grund). Es gibt nur EINE Bauform; die Farben stehen als Marken und werden
   pro Ort umgestellt.

   Beide Male ist die Pille eine satte Flaeche und keine blasse Kontur —
   eine Kontur mit 4 % Fuellung verschwindet auf dem Creme, und der Knopf
   sieht dann aus, als schwebe er frei. Auf der Startseite ist sie Tinte,
   wie die Kacheln der Fragen und die Stundentafel direkt darueber; auf der
   Blogseite Creme, wie die Terminkarten auf der dunklen Tafel. */
.newsletter {
  --nl-fill: var(--ink);
  --nl-text: var(--paper);
  --nl-placeholder: rgba(247, 242, 228, .45);
}

.newsletter__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Eingabe und Knopf sitzen in EINER Pille, statt als Linie und Knopf
   nebeneinander zu stehen. Das ist die Form, die auf dieser Website ohnehin
   ueberall vorkommt: die Zeilen im Terminkalender, das Abzeichen bei den
   Gruppenstunden und jeder Button 066 laufen auf border-radius: 50em. */
.newsletter__field {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--nl-fill);
  border-radius: 50em;
  padding: .35rem .35rem .35rem 1.35rem;
  box-shadow: 0 0 0 0 var(--pink);
  transition: box-shadow .3s var(--osmo-ease);
}

.newsletter__field:focus-within {
  box-shadow: 0 0 0 .1875rem var(--pink);
}

.newsletter__input {
  flex: 1 1 8rem;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--nl-text);
  font: inherit;
  font-size: 1rem;
  padding: .5rem 0;
}

.newsletter__input::placeholder { color: var(--nl-placeholder); }

/* Hinweis auf die Datenschutzerklärung unter der Pille. Erbt die Schrift-
   farbe des Ortes, passt also auf hellem wie dunklem Grund. */
.newsletter__hinweis {
  margin: .25rem 0 0;
  font-size: .8125rem;
  line-height: 1.4;
  opacity: .65;
}

.newsletter__hinweis a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .15em;
}

/* Osmos Button 066, auf die Masse dieser Pille gestellt — wie bei den
   Terminkarten nur ueber die --button-066-Variablen. */
.newsletter__btn {
  --button-066-color: var(--ink);
  --button-066-color-background: var(--pink);
  --button-066-color-focus: var(--paper);
  --button-066-border-radius: 50em;
  --button-066-padding: .7em 1.35em;
  flex: none;
  font-weight: 500;
  border: none;
  cursor: pointer;
}

@media screen and (max-width: 767px) {
  .blog__head { align-items: flex-start; }
  .newsletter { flex-basis: 100%; }
}


/* ==========================================================================
   Eine Farbe, wirklich ueberall
   Der Navigationsbalken lief in Osmos #f2f2f2 — ein neutrales Grauweiss.
   Neben dem warmen Creme der Seite (#F7F2E4) liest sich das als zweiter,
   kaelterer Ton, und der Balken steht auf JEDER Seite ganz oben. Dasselbe
   galt fuer die ausgeklappte Navigation. Beide laufen jetzt auf --paper.
   ========================================================================== */

.twostep-nav__back-bg,
.twostep-nav__bottom-inner{
  background-color: var(--paper);
}

.twostep-nav__logo {
  width: auto;                 /* Osmo: 6em — dort steht ein querer Schriftzug */
  text-decoration: none;
  color: inherit;
}

/* Das Jungschar-Logo liegt als Maske vor, nicht als farbiges Bild: die
   Datei traegt nur die Form (Alphakanal), die Farbe kommt aus dem CSS.
   Dadurch nimmt das Logo jede Akzentfarbe an und passt sich dem Untergrund
   an, statt in seinem Petrol festzustecken. Freigestellt aus der
   heruntergeladenen JPG — der Rotkanal trennt Form und weissen Grund
   sauber, also sind auch die Rundungen weich statt ausgefranst.
   Blau ist der Ton der Palette, der dem Original am naechsten liegt; das
   Logo bleibt damit erkennbar und gehoert trotzdem zum Farbschema. */
.nav-mark {
  flex: none;
  width: 2.4em;
  height: 2.4em;
  background-color: var(--blue);
  -webkit-mask: url("../assets/img/jungschar-logo.png") center / contain no-repeat;
  mask: url("../assets/img/jungschar-logo.png") center / contain no-repeat;
}


/* ==========================================================================
   Newsletter-Anmeldung — eigener Bereich am Ende der Startseite
   Aufbau wie die uebrigen Bereiche: Ueberschrift mittig, ein Satz darunter,
   dann die Eingabe. Kein Kasten, kein Rahmen — die Eingabepille ist das
   einzige Element mit Kontur.
   ========================================================================== */

.newsletter-block {
  padding: clamp(4rem, 9vw, 7rem) clamp(1.25rem, 4vw, 3rem);
}

.newsletter-block__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  max-width: 42em;
  margin-inline: auto;
  text-align: center;
}


.newsletter-block .newsletter {
  width: 100%;
  max-width: 26rem;
  align-items: center;
  margin-top: .75rem;
}

.newsletter-block .newsletter__field { width: 100%; }


/* ==========================================================================
   Footer — Osmos Footer Parallax auf dem Farbschema
   Aufbau, Masse und Bewegung kommen aus der Komponente. Hier stehen nur
   Schriftgewicht, Farben und die zwei Groessen, die der Inhalt braucht.

   Osmo setzt 600 auf .demo-footer und .demo-eyebrow. Google Sans laeuft ab
   600 zu — Hauptregel, also 500. Gilt hier besonders: die Links stehen auf
   2.75em, da faellt ein zu fettes Gewicht sofort auf.
   ========================================================================== */

.demo-footer,
.demo-eyebrow {
  font-weight: 500;
}

/* Die Komponente setzt keinen eigenen Grund — sie uebernimmt den der Seite.
   Das ist auf allen Seiten dasselbe Creme.
   Die Trennlinie oben zeigt, wo die Seite endet und der Fuss beginnt. */
.footer-wrap {
  border-top: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 18%, transparent);
}

.demo-footer__a {
  letter-spacing: -.03em;
}

/* Die Mailadresse ist 39 Zeichen lang — auf 2.75em sprengt sie jede Spalte.
   Das <wbr> im Markup gibt ihr zusaetzlich eine Bruchstelle nach dem @. */
.demo-footer__a.is--mail {
  font-size: 1.25em;
  line-height: 1.25;
  word-break: break-word;
}

.demo-footer__a.is--adresse {
  font-size: 1.5em;
  line-height: 1.2;
}

/* Die Pfarradresse ist die zweite Schiene, nicht die erste — sie steht
   kleiner und gedeckter als hallo@. */
.demo-footer__a.is--klein {
  font-size: .9375em;
  opacity: .6;
}

/* Rechtstexte sind Pflichtlinks, keine Hauptnavigation. Sie stehen klein
   unter dem Netzwerk statt als Riesenzeile daneben. */
.demo-footer__a.is--recht {
  font-size: 1.125em;
}

.demo-footer__links.is--recht {
  gap: .1em;
}

.footer-wordmark {
  margin: 0;
  font-size: clamp(2rem, 8vw, 6rem);
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.045em;
  overflow-wrap: break-word;
}

/* Band im Footer (js/footer-band.js). Liegt hinter dem Footer-Inhalt,
   der dunklen Lage und allem Klickbaren. */
/* Null hoch, sitzt genau auf der Naht. Das SVG haengt absolut daran und
   reicht nach oben in den Inhalt und nach unten ueber den ganzen Footer.
   z-index 1 wie .content, steht spaeter im Dokument -> liegt darueber.
   .footer-wrap bekommt ebenfalls 1 und liegt wieder ueber dem Band. */
.footer-band {
  position: relative;
  height: 0;
  z-index: 1;
  pointer-events: none;
}

.footer-band__svg {
  position: absolute;
  left: 0;
  display: block;
  overflow: visible;
}

.footer-band + .footer-wrap {
  z-index: 1;
}

/* Osmos dunkle Lage ist #201d1d. Unsere Tinte ist #131313 — dieselbe Rolle,
   nur der Ton der Seite. */
.footer-wrap__dark {
  background-color: var(--ink);
}

@media screen and (max-width: 767px) {
  .demo-footer__a.is--mail { font-size: 1.0625em; }
  .demo-footer__a.is--adresse { font-size: 1.25em; }
}


/* ==========================================================================
   Karte im Fuss — MapLibre
   Rechteckig und flach (21:9): der Fuss soll zeigen, wo das Heim ist, und
   nicht selbst zur Landkarte werden. Der Kartenstil (OpenFreeMap positron)
   ist hell und grau, Farbe traegt genau ein Element — der Marker.
   ========================================================================== */

/* Klein und bei der Adresse. Der Fuss soll zeigen, wo das Heim ist, und
   nicht selbst zur Landkarte werden — deshalb eine Miniatur neben dem Text
   statt einer Bahn ueber die ganze Breite. */
.karte {
  width: 100%;
  max-width: 15em;
  aspect-ratio: 4 / 3;
  margin-top: .75em;
  border-radius: .75em;
  overflow: hidden;        /* schneidet MapLibres Canvas auf die Rundung */
  background: color-mix(in srgb, currentColor 8%, transparent);
}

/* Der Marker: ein Punkt im Rosa der Seite, darin das Logo als Maske —
   dieselbe Datei wie im Navigationsbalken. MapLibres blaue Stecknadel
   gehoert zu MapLibre, nicht zu dieser Website. */
.karte__stift {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 0 .1875rem var(--paper), 0 .125rem .5rem rgba(19, 19, 19, .25);
  display: grid;
  place-items: center;
  cursor: default;
}

.karte__stift::after {
  content: "";
  width: 1rem;
  height: 1rem;
  background-color: var(--ink);
  -webkit-mask: url("../assets/img/jungschar-logo.png") center / contain no-repeat;
  mask: url("../assets/img/jungschar-logo.png") center / contain no-repeat;
}

/* MapLibres Bedienknoepfe auf das Farbschema. Nur Farbe und Rundung —
   Masse und Verhalten bleiben, wie die Bibliothek sie liefert. */
/* Bei dieser Groesse traegt die Bedienleiste mehr auf als sie nuetzt. */
.karte .maplibregl-ctrl-bottom-right .maplibregl-ctrl-group {
  display: none;
}

.karte .maplibregl-ctrl-attrib {
  font-family: var(--font);
  font-size: .625rem;
}

/* Marke unten im Fuss: Logo und Schriftzug auf einer Linie. Das Logo
   waechst mit dem Schriftzug mit, deshalb em und nicht rem. */
.footer-marke {
  display: flex;
  align-items: center;
  gap: .4em;
  flex-wrap: wrap;
}

.footer-marke__logo {
  flex: none;
  width: .85em;
  height: .85em;
  font-size: clamp(2rem, 8vw, 6rem);   /* dieselbe Groesse wie der Schriftzug */
  background-color: var(--blue);
  -webkit-mask: url("../assets/img/jungschar-logo.png") center / contain no-repeat;
  mask: url("../assets/img/jungschar-logo.png") center / contain no-repeat;
}

/* ==========================================================================
   Textseiten — Impressum, Datenschutz, Kinderschutz, Über uns, Kontakt
   Aufbau uebernommen von pauli.li (pauli-portfolio/src/components/Legal.tsx),
   auf die Masse und Farben dieser Website gezogen:

     - Ueberschrift riesig und linksbuendig: 14vw auf dem Handy, 10vw ab
       Tablet, Zeilenhoehe .9. Auf pauli.li steht dort "Legal" — deshalb
       heissen die Seiten hier auch kurz "Impressum" statt
       "Datenschutzerklaerung": bei 10vw passt nur ein kurzes Wort in eine
       Zeile, und der Buchstaben-Roll braucht eine Zeile.
     - Textspalte 65ch statt der 34em von vorher. Das ist breiter, aber
       pauli.li setzt dazu eine groessere Schrift und mehr Zeilenabstand —
       zusammen ergibt das wieder eine lesbare Zeile.
     - Abstaende: 3rem zwischen den Bloecken, 1rem zwischen den Absaetzen
       darin (gap-12 / gap-4 im Original).
   ========================================================================== */

.rechtstext {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: none;
  margin-inline: 0;
  padding: 9rem 1.5rem 6rem;
}

@media screen and (min-width: 768px) {
  .rechtstext {
    padding: 11rem 2.5rem 6rem;
  }
}

.rechtstext__h1 {
  margin: 0 0 4rem;
  font-size: 14vw;
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.03em;
}

@media screen and (min-width: 768px) {
  .rechtstext__h1 { font-size: 10vw; }
}

.rechtstext__h2 {
  margin: 3rem 0 0;
  font-size: 1.875rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.rechtstext__h3 {
  margin: 1.75rem 0 0;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -.01em;
}

.rechtstext__p,
.rechtstext__ul {
  max-width: 65ch;
  margin: 1rem 0 0;
  font-size: 1rem;
  line-height: 1.625;
}

@media screen and (min-width: 768px) {
  .rechtstext__p,
  .rechtstext__ul { font-size: 1.125rem; }
}

.rechtstext__p--intro {
  max-width: 65ch;
  margin-top: 0;
}

.rechtstext__ul {
  padding-left: 1.25em;
}

.rechtstext__ul li {
  margin-bottom: .35em;
}

/* pauli.li setzt die Stichwoerter am Absatzanfang in --mid, einen gedeckten
   Blauton. Hier uebernimmt das --blue: ein kleines Element, genau die
   Stelle, an der ein gesaettigter Ton hingehoert. */
.rechtstext__p strong,
.rechtstext__ul strong {
  font-weight: 500;
  color: var(--blue);
}

.rechtstext__link {
  color: var(--blue);
  text-decoration: none;
  transition: opacity .3s var(--osmo-ease);
}

.rechtstext__link:hover { opacity: .7; }

.rechtstext__bild {
  max-width: 65ch;
  margin: 2.5rem 0 0;
}

.rechtstext__bild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1em;
}

/* Der Schlusssatz steht auf pauli.li in opacity-60, ohne Trennlinie. */
.rechtstext__stand {
  max-width: 65ch;
  margin: 3rem 0 0;
  font-size: 1rem;
  line-height: 1.625;
  opacity: .6;
}

.rechtstext__back {
  margin-top: 4rem;
}

/* ==========================================================================
   TextRoll — portiert von pauli.li
   Die Mechanik steht in js/text-roll.js. Hier nur, wie es aussieht.

   Die Maske sitzt auf jedem Buchstaben einzeln (siehe unten) — deshalb
   funktioniert es auch mehrzeilig. Die Zeilenhoehe muss so gross sein, dass
   die Buchstaben ganz in ihre Maske passen, sonst kappt sie Unterlaengen.
   ========================================================================== */

[data-text-roll] {
  /* Fest 1.25, nicht normal: bei normal haengt die Zeilenhoehe an der
     Schrift (191px Ersatzschrift gegen 180px Google Sans bei 144px), und die
     Ueberschrift sprang beim ersten Besuch, wenn Google Sans nachkam. 1.25
     ist genau Google Sans' eigener Wert — die Buchstaben passen in ihre
     Maske, Unterlaengen inklusive. */
  line-height: 1.25;
}

/* Ein Wort bleibt zusammen. Umgebrochen wird nur an den Leerzeichen
   dazwischen. */
.tr__word {
  display: inline-block;
  white-space: nowrap;
}

/* Jeder Buchstabe ist seine eigene Maske: genau eine Zeile hoch, und was
   darunter liegt, ist abgeschnitten. Deshalb funktioniert es auch bei
   Ueberschriften ueber mehrere Zeilen. */
.tr__char {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: top;
}

.tr__a,
.tr__b {
  display: block;
  transition: transform .5s ease-in-out var(--d);
  will-change: transform;
}

/* Die Kopie wartet eine Zeile tiefer, in derselben Maske. */
.tr__b {
  position: absolute;
  left: 0;
  top: 100%;
}

/* Nur wo es einen Mauszeiger gibt. Auf dem Handy gibt es kein Hovern, und
   ein haengengebliebener Zustand nach einem Fingertipp waere schlimmer als
   gar kein Effekt. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-text-roll]:hover .tr__a,
  [data-text-roll]:hover .tr__b {
    transform: translateY(-100%);
  }
}


/* ==========================================================================
   Ziehen im Aktuelles-Slider — siehe js/slider-ziehen.js
   pan-y: senkrecht scrollt weiter der Browser, waagrecht gehoert dem Slider.
   ========================================================================== */

.news [data-cascading-viewport] {
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.news [data-cascading-viewport].is--gezogen {
  cursor: grabbing;
}

.news [data-cascading-viewport] img {
  -webkit-user-drag: none;
  pointer-events: none;
}


/* Smileys: auf dem Handy nicht verschiebbar. Der Kasten nimmt dort keine
   Beruehrung mehr an — dann faengt er auch das Scrollen nicht ab, wenn der
   Daumen ueber dem Hero liegt. */
@media screen and (max-width: 767px) {
  #canvas-target canvas {
    pointer-events: none;
  }
}


/* ==========================================================================
   Seitenuebergang: jede Seite traegt ihren eigenen Grund
   Osmos Overlapping Parallax schiebt die neue Seite ueber die alte. Das
   setzt voraus, dass die Seite selbst einen Hintergrund hat. Bei uns lag er
   nur am body — die hereinfahrende Seite war durchsichtig, und mitten im
   Uebergang standen beide Texte uebereinander.
   ========================================================================== */

[data-barba="container"] {
  background-color: var(--paper);
  min-height: 100vh;
}


/* ==========================================================================
   Fotos
   Oben der Aufbau der Textseiten (pauli.li), darunter die Alben als Osmos
   Directional List — dieselbe Komponente und dieselbe rosa Kachel wie in
   der Beitragsuebersicht.
   ========================================================================== */

/* Die Textseiten sind mindestens einen Schirm hoch. Hier folgt die Liste
   direkt darunter, also keine Mindesthoehe. */
.rechtstext.fotos { min-height: 0; padding-bottom: 3rem; }
.rechtstext.fotos__ende { min-height: 0; padding-top: 0; }

.fotos__vorschau {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin-top: 2.5rem;
}

.fotos__bild {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 1em;
  display: block;
}

.directional-list.alben {
  --tone: var(--pink);
  max-width: none;          /* Osmo: 50em */
  color: var(--ink);
  margin-bottom: 4rem;
}

.alben .directional-list__item,
.alben .directional-list__info {
  padding-inline: 1.5rem;
}

@media screen and (min-width: 768px) {
  .alben .directional-list__item,
  .alben .directional-list__info {
    padding-inline: 2.5rem;
  }
}

@media screen and (max-width: 767px) {
  .fotos__vorschau { grid-template-columns: 1fr 1fr; }
  .fotos__vorschau .fotos__bild:last-child { display: none; }
  .alben .directional-list__item {
    flex-wrap: wrap;
    padding-block: 1.25em;
  }
}


/* ==========================================================================
   Beitragsseiten — schlicht: Titel, Datum, Bild, Text
   Vorher Osmos "Table of Contents for Article" mit Gliederungsspalte und
   "Auf dieser Seite" — fuer Beitraege, die man in einer Minute liest, zu
   viel Apparat. Jetzt derselbe Aufbau wie die Textseiten (pauli.li), mit
   Titelbild. Oben bewegt sich beim Laden nichts.
   ========================================================================== */

.post {
  padding: 9rem 1.5rem 5rem;
}

@media screen and (min-width: 768px) {
  .post { padding: 11rem 2.5rem 6rem; }
}

.post__kopf {
  max-width: 60rem;
}

.post__titel {
  margin: 0;
  font-size: clamp(2.5rem, 6.5vw, 6.5rem);
  font-weight: 500;
  letter-spacing: -.035em;
}

.post__datum {
  margin: 1.25rem 0 0;
  font-size: 1.0625rem;
  color: rgba(19, 19, 19, .55);
}

.post__bild {
  margin: 3rem 0 0;
}

.post__bild-img {
  display: block;
  width: 100%;
  max-height: 78vh;
  object-fit: cover;
  border-radius: 1.25em;
}

.post__text {
  max-width: 65ch;
  margin-top: 3rem;
  font-size: 1.0625rem;
  line-height: 1.65;
}

@media screen and (min-width: 768px) {
  .post__text { font-size: 1.1875rem; }
}

.post__text p { margin: 0 0 1rem; }

.post__text h2 {
  margin: 2.5rem 0 .5rem;
  font-size: 1.875rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.post__text strong { font-weight: 500; }

.post__text a {
  color: var(--blue);
  text-decoration: none;
}

.post__text a:hover { opacity: .7; }

.post__text hr {
  border: 0;
  border-top: 1px solid rgba(19, 19, 19, .15);
  margin: 2rem 0;
}

/* Bilder im Text — z. B. der Flyer der Weihnachtsbetreuung — ungeschnitten,
   damit man sie lesen kann. */
.post__text img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1em;
  margin: 1rem 0;
}

.post__datei::before {
  content: "↓ ";
}

/* Spendenstand: die Zahl ist die Nachricht, also gross. */
.post__summe {
  margin: .25rem 0 1.5rem;
}

.post__summe-zahl {
  margin: 0;
  font-size: clamp(3.25rem, 11vw, 8rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

.post__zurueck {
  margin-top: 4rem;
}