/* Das Lauschende Herz – Aussehen der Homepage (index.html und es/index.html), Text V3 mit
   Einzelgesprächen.
   Hervorgegangen aus Endfassung 3 „Bank, danach“ (archiv/runde-9/endfassung.css), die Sebastian
   am 2026-10-14 gewählt hat; deren Grundlage ist Finish 2 „Grau“ (archiv/runde-8/finish.css):
   warmer Sandgrund, Lesetext in warmem Grau, Überschriften, leise Stimme und Knöpfe in Braun, die
   Mitte in Ton; Spectral, leicht gesetzt; die Linie fällt „sanft“. „Grau“ ist damit das
   Designschema für alle Medien (../Erscheinungsbild.md).

   Ohne Skript und bei „Bewegung reduzieren“ steht alles sofort da. */

:root {
  /* Farben */
  --papier: #F1EADD;
  --flaeche: #E8DFCE;
  --linie: #D6CAB6;
  --strich: #B5A993;                      /* gestrichelter Rand: im Entstehen; die Rosette */
  --akzent: #AE5B38;
  --akzent-text: #9C4F30;                 /* der Ton für kleine Schrift (4,9 : 1 auf dem Papier) */
  --auf-bild: #FCF7EE;                    /* Schrift auf dem Titelbild */
  --schatten-bild: rgba(30, 32, 40, 0.46);

  /* „Grau“: Das Braun ist die Farbe der Überschriften, der leisen Stimme und der Knöpfe; der
     Lesetext und das Beiwerk tragen ein warmes Grau. So tönt das Braun nicht die ganze Seite.
     Kontrast auf dem Papier in Klammern. */
  --tinte: #4A4541;                       /* Lesetext (7,9 : 1) */
  --titel-ton: #6E4A39;                   /* Überschriften und die leise Stimme */
  --grau: #68625C;                        /* Beiwerk: Ortszeile, Stichwörter, Hinweise (5,0 : 1) */
  --knopf: #5E4436;                       /* der gefüllte Knopf */

  /* Schrift */
  --schrift: "Spectral", "Iowan Old Style", Georgia, serif;
  --titel: var(--schrift);
  --gewicht-titel: 300;
  --gewicht-name: 200;
  --spat-titel: -0.012em;
  --spat-name: -0.016em;
  --text: clamp(1.09rem, 0.99rem + 0.34vw, 1.25rem);
  --zeile: 1.66;
  --name: clamp(2.6rem, 1.4rem + 4.1vw, 4.9rem);
  --h2: clamp(2rem, 1.38rem + 2.3vw, 3.1rem);
  --h3: 1.4em;
  --klein: 0.86em;
  --knopf-text: 1.0625rem;

  /* Maße */
  --kopf: 4.25rem;
  --rand: clamp(1.25rem, 5vw, 5rem);
  --breit: 76rem;
  --spalte: 33rem;
  --luft: clamp(5.5rem, 10vw, 8.5rem);
  --rund: 2px;

  /* Bewegung */
  --dauer: 1.5s;
  --kurve: cubic-bezier(0.22, 0.61, 0.24, 1);
  --weg: 0rem;                            /* wie weit etwas beim Aufscheinen steigt */
  --folge: 150ms;                         /* Abstand, in dem Nachbarn nacheinander erscheinen */
  /* Die Linie fällt „sanft“: länger, mit weichem Anlauf und weichem Ankommen; der Punkt wird
     allmählich sichtbar. */
  --fall: 1.7s;                           /* wie lange die Linie mit ihrem Punkt fällt */
  --fall-kurve: cubic-bezier(0.42, 0, 0.18, 1);
  --fall-blende: 0.8s;                    /* wie rasch der Punkt dabei sichtbar wird */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf) + 1.5rem); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papier); color: var(--tinte);
  font-family: var(--schrift); font-size: var(--text); line-height: var(--zeile);
  font-kerning: normal; font-optical-sizing: auto; font-variant-ligatures: common-ligatures;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: color-mix(in srgb, var(--akzent) 26%, transparent); }
img, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.24em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); transition: text-decoration-color 0.3s, color 0.3s; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
h1, h2, h3, h4, p, ul, dl, figure { margin: 0; }
h1, h2, h3, h4 { font-family: var(--titel); font-weight: var(--gewicht-titel); letter-spacing: var(--spat-titel); }
h2, h3, h4 { color: var(--titel-ton); }
ul { padding: 0; list-style: none; }
p { text-wrap: pretty; }
em { font-style: italic; }
strong { font-weight: 500; }

.knopf {
  display: inline-block; font: inherit; font-size: var(--knopf-text); letter-spacing: 0.02em; line-height: 1; text-decoration: none; cursor: pointer;
  padding: 0.95em 1.7em; border: 1px solid var(--knopf); border-radius: var(--rund); background: var(--knopf); color: var(--papier);
  transition: background-color 0.4s var(--kurve), border-color 0.4s var(--kurve), color 0.4s var(--kurve);
}
.knopf:hover { background: var(--akzent-text); border-color: var(--akzent-text); }
.knopf.still { background: transparent; color: var(--tinte); border-color: color-mix(in srgb, var(--tinte) 55%, transparent); }
.knopf.still:hover { background: var(--knopf); border-color: var(--knopf); color: var(--papier); }
/* Der leise Weg weiter: ein Verweis, dessen Linie den Ton der Mitte trägt. */
.weiter, .orte a { text-decoration-color: var(--akzent); }
.weiter:hover, .orte a:hover { color: var(--akzent-text); }

/* ---------- Kopfleiste: Zeichen und Menü stehen auf den Kanten des Inhalts ---------- */
.kopf { position: sticky; top: 0; z-index: 20; padding: 0 var(--rand); background: var(--papier); box-shadow: 0 1px 0 var(--linie); }
.kopf .innen { max-width: var(--breit); height: var(--kopf); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.marke { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; font-size: 1.3rem; white-space: nowrap; }
.marke svg { width: 2rem; height: 2rem; flex: none; }
.kopf nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.25rem); font-size: 1.0625rem; white-space: nowrap; }
.kopf nav a:not(.knopf) { position: relative; padding: 0.4rem 0; text-decoration: none; color: var(--grau); }
.kopf nav a:not(.knopf):hover, .kopf nav a[aria-current] { color: var(--tinte); }
/* Der Punkt aus der Mitte des Zeichens zeigt, wo man gerade liest. */
.kopf nav a:not(.knopf)::after { content: ""; position: absolute; left: 50%; bottom: -0.15rem; width: 0.3rem; height: 0.3rem; margin-left: -0.15rem; border-radius: 50%; background: var(--akzent); transform: scale(0); transition: transform 0.5s var(--kurve); }
.kopf nav a[aria-current]::after { transform: none; }
.kopf nav .knopf { padding: 0.75em 1.25em; }
.menue { display: none; font: inherit; font-size: 1.0625rem; color: inherit; background: none; border: 0; padding: 0.5rem 0; cursor: pointer; }

/* ---------- Titelbild: füllt den ersten Bildschirm ---------- */
/* Der See: der Himmel bleibt leer, der Name liegt unten links auf dem Wasser. */
.hero { position: relative; display: flex; align-items: flex-end; height: min(calc(100svh - var(--kopf)), 72rem); min-height: 30rem; padding: 0 var(--rand); overflow: hidden; background: #BFA07A; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; animation: atem 9s var(--kurve) both; }
.hero-text { position: relative; width: 100%; max-width: var(--breit); margin-inline: auto; padding-bottom: clamp(2.75rem, 8svh, 5.25rem); color: var(--auf-bild); text-shadow: 0 0 1.75rem var(--schatten-bild); }
.hero h1 { font-weight: var(--gewicht-name); font-size: var(--name); line-height: 1.04; letter-spacing: var(--spat-name); text-wrap: balance; animation: aufscheinen 2.4s ease-out 0.5s both; }
.hero p { margin-top: 1.05rem; font-style: italic; font-weight: 300; font-size: clamp(1.06rem, 0.9rem + 0.82vw, 1.6rem); line-height: 1.45; }
/* Der Satz kommt in zwei Atemzügen: erst die eine Zeile, dann die andere. */
.hero p span { display: block; text-wrap: balance; animation: aufscheinen 2.2s ease-out 1.7s both; }
.hero p span + span { animation-delay: 2.7s; }
@keyframes aufscheinen { from { opacity: 0; } }
@keyframes atem { from { scale: 1.045; } }
/* Die Führungslinie beginnt schon im Bild und läuft auf dem Papier weiter. */
.hero::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: clamp(2rem, 5svh, 3.25rem); background: color-mix(in srgb, var(--auf-bild) 80%, transparent); }

/* ---------- Schwelle: was es ist, und wo ---------- */
.schwelle { --lot: clamp(2.5rem, 5vw, 3.75rem); position: relative; padding: 0 var(--rand) var(--luft); text-align: center; }
.schwelle > .lot { --lot: clamp(2.5rem, 5vw, 3.75rem); margin-bottom: clamp(2.25rem, 4.5vw, 3.25rem); }
/* Ein Absatz, drei Sätze: Jeder steht für sich, wie drei Atemzüge. */
.einleitung { max-width: 37rem; margin-inline: auto; font-weight: 300; font-size: 1.26em; line-height: 1.5; }
.einleitung span { display: block; text-wrap: balance; }
.einleitung span + span { margin-top: 1.1em; }
/* Der zweite Absatz trägt die beiden Wegweiser. */
.orte { max-width: 34rem; margin: clamp(2.25rem, 4.5vw, 3rem) auto 0; text-wrap: balance; }
.orte::before { content: ""; display: block; width: 2.5rem; height: 1px; margin: 0 auto clamp(1.75rem, 3.5vw, 2.25rem); background: var(--linie); }

/* ---------- Kapitel auf der Mittelachse ---------- */
.kapitel { --lot: clamp(4rem, 8vw, 6.5rem); position: relative; padding: 0 var(--rand) var(--luft); }
/* Die Führungslinie. Die Linie selbst ist ::before, damit der Punkt an ihrem Ende beim Zeichnen
   nicht mit verzerrt wird. */
.lot { --lot: clamp(4rem, 8vw, 6.5rem); display: block; position: relative; width: 1px; height: var(--lot); margin: 0 auto clamp(3rem, 6vw, 4.75rem); }
.lot::before { content: ""; position: absolute; inset: 0; background: var(--linie); transform-origin: 50% 0; }
/* Jede Führungslinie endet in einem Punkt, wie ein Lot. Er läuft mit ihr nach unten. */
.lot::after { content: ""; position: absolute; left: 50%; bottom: -0.2rem; width: 0.4rem; height: 0.4rem; margin-left: -0.2rem; border-radius: 50%; background: var(--akzent); }
footer .lot::after { content: none; }   /* die letzte Linie läuft auf das Zeichen zu */
.vorzeile { text-align: center; color: var(--grau); font-size: 0.92em; margin-bottom: 0.55rem; }
.kapitel h2 { max-width: 22ch; margin-inline: auto; text-align: center; font-size: var(--h2); line-height: 1.12; text-wrap: balance; }
.text { max-width: var(--spalte); margin: clamp(1.75rem, 3.5vw, 2.5rem) auto 0; hyphens: auto; hyphenate-limit-chars: 8 4 4; }
.text p + p { margin-top: 0.9em; }
/* Die leise Stimme: der Dreiklang, kursiv, leicht und im Ton der Überschriften. */
.dreiklang { max-width: 40rem; margin: clamp(1.75rem, 3.5vw, 2.5rem) auto 0; text-align: center; font-style: italic; font-weight: 300; font-size: 1.22em; line-height: 1.4; color: var(--titel-ton); }
.dreiklang p { text-wrap: balance; }
.dreiklang p + p { margin-top: 0.45em; }
/* Die stille Mitte: ein Satz, der für sich steht. Er ist sehr fein gesetzt und behält darum
   die volle Tinte des Lesetexts. Über ihm öffnet sich die Rosette. */
.mitte { position: relative; max-width: 31rem; margin: clamp(3.5rem, 7vw, 5rem) auto; text-align: center; font-style: italic; font-weight: 200; font-size: 1.62em; line-height: 1.3; text-wrap: balance; }
.mitte + .text { margin-top: 0; }
.mitte + .termin { margin-top: 0; }
.notiz { max-width: var(--spalte); margin: 1.25rem auto 0; font-size: var(--klein); color: var(--grau); }
.platzhalter { border-bottom: 1px dashed var(--akzent); color: var(--grau); }

/* ---------- Tafel und Kerbe: der Titel steht auf einem Stück Papier, das von unten ins Bild greift ---------- */
.tafel { width: min(100%, var(--breit)); margin: 0 auto; overflow: hidden; }
.tafel picture { display: block; }
.tafel img { width: 100%; aspect-ratio: var(--form, 16 / 9); object-fit: cover; object-position: var(--fokus, 50% 50%); }
.tafel.mittel { width: min(100%, 56rem); }
.kerbe { position: relative; width: min(76%, 44rem); margin: -4.75rem auto 0; padding: 2.4rem clamp(1.25rem, 4vw, 3rem) 0; background: var(--papier); }
.tafel.mittel + .kerbe { width: min(70%, 34rem); margin-top: -4rem; padding: 2rem 1.5rem 0; }

/* ---------- Offener Abend ---------- */
.termin { max-width: var(--spalte); margin: 2.75rem auto 0; padding: 1.75rem 2rem 2rem; background: var(--flaeche); }
.termin h3 { font-size: var(--h3); font-weight: 400; line-height: 1.2; margin-bottom: 0.9rem; }
.termin > dl { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1.5rem; margin-bottom: 1.6rem; }
.termin > dl dt { color: var(--grau); }
.termin > dl dd { margin: 0; }

/* ---------- Termine (Termine.md): Eine Stelle trägt die nächsten Termine im Voraus. Es gilt die erste
   Fassung; was vorbei ist, nimmt seite.js heraus. Von den nächsten Terminen stehen vier da. ---------- */
.erste-gilt > :not(:first-child) { display: none; }
.reihe > :nth-child(n+5) { display: none; }
.reihe > * + *::before { content: ", "; }
/* Ein Abend fällt aus: eine kurze Zeile im Kasten, im Ton (auf der getönten Fläche eine Spur dunkler, 4,9 : 1). */
.termin .ausfall { margin: -0.5rem 0 1.5rem; font-size: var(--klein); color: #8F4627; }
.termin .ausfall + .ausfall { margin-top: -1.1rem; }

/* ---------- Schritte: ein Knopf und, leiser, der Weg zu den Einzelheiten ---------- */
.schritte { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
/* untereinander, wenn eine Box an Ort und Stelle aufklappt: so springt beim Öffnen nichts zur Seite */
.schritte.stapel { display: grid; justify-items: start; gap: 1.15rem; }

/* ---------- Weitere Wege: Felder. Getönt: jetzt offen. Gestrichelt: im Entstehen. ---------- */
.kachel { padding: clamp(1.75rem, 3.5vw, 2.75rem); background: var(--flaeche); hyphens: auto; }
.kachel h3, .einzel h3, .zeit h3 { font-size: var(--h3); font-weight: 400; line-height: 1.2; margin-bottom: 0.9rem; }
.kachel.spaeter { background: transparent; border: 1px dashed var(--strich); }
.status { font-style: italic; font-size: var(--klein); color: var(--grau); }
.status .platzhalter { font-style: normal; }
/* Die Angabe der Tage bricht als Ganzes um („Online ·“ / „dienstags und freitags“). */
.tage { white-space: nowrap; }

/* ---------- Infobox: klappt an Ort und Stelle auf ---------- */
.mehr { width: 100%; max-width: var(--spalte); }
.mehr summary { display: inline-block; cursor: pointer; list-style: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.24em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); transition: text-decoration-color 0.3s; }
.mehr summary:hover { text-decoration-color: currentColor; }
.mehr summary::-webkit-details-marker { display: none; }
.mehr summary::after { content: "+"; display: inline-block; margin-left: 0.45em; color: var(--akzent); transition: rotate 0.5s var(--kurve); }
.mehr[open] summary::after { rotate: 45deg; }
.mehr .angaben { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--linie); }
/* Wo der Browser es kann, öffnet sich die Box ruhig statt mit einem Sprung. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .mehr::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size 0.7s var(--kurve), opacity 0.7s var(--kurve), content-visibility 0.7s allow-discrete; }
  .mehr[open]::details-content { block-size: auto; opacity: 1; }
}
/* Online: Der eine sichtbare Knopf öffnet Zeiten, Hinweise und das E-Mail-Feld. Er trägt das
   Pluszeichen der Infoboxen: Es geht hier auf, nicht woandershin. */
.zugang summary.knopf { text-decoration: none; transition: background-color 0.4s var(--kurve), border-color 0.4s var(--kurve), color 0.4s var(--kurve); }
.zugang summary.knopf::after { margin-left: 0.6em; transition: rotate 0.5s var(--kurve), color 0.4s var(--kurve); }
.zugang summary.knopf:hover::after { color: inherit; }
.zugang .angaben { border-top: 0; padding-top: 0.35rem; }
.zugang .dazu { margin-top: 1.25rem; font-size: 0.94em; }
.zugang form { max-width: none; margin: 1rem 0 0; }
.zugang .eintragen label { flex-basis: 9rem; }
.zugang .rueckmeldung { margin: 0.6rem 0 0; min-height: 0; color: #8F4627; }   /* auf der getönten Fläche eine Spur dunkler (4,9 : 1) */
.zugang .notiz { margin: 0.6rem 0 0; }
.zugang .morgen { margin-top: 1.4rem; padding-top: 1.25rem; border-top: 1px solid var(--linie); }

/* Angaben: links das Stichwort, rechts die Auskunft */
.angaben { display: grid; grid-template-columns: minmax(6.5rem, auto) 1fr; gap: 0.7rem 1.75rem; font-size: 0.94em; text-align: left; }
.angaben dt { color: var(--grau); }
.angaben dd { margin: 0; hyphens: auto; }

/* ---------- Begegnung: ein großes Bild, der Text auf ruhigem Grund darin ---------- */
.begegnung { max-width: var(--breit); margin-inline: auto; }
.begegnung > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: var(--fokus, 50% 50%); }
.begegnung .unter { display: grid; grid-template-columns: minmax(0, 29.5rem) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; padding-inline: clamp(1.25rem, 3vw, 2.5rem); }
.begegnung .karte { position: relative; margin-top: -29rem; padding: clamp(1.75rem, 3vw, 2.75rem); background: var(--papier); }
.begegnung .karte h2 { max-width: none; margin: 0 0 1.4rem; text-align: left; font-size: calc(var(--h2) * 0.84); }
.begegnung .karte p + p { margin-top: 0.9em; }
.begegnung .daneben { max-width: 25rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--linie); font-size: var(--klein); color: var(--grau); }
/* Der letzte Absatz steht für sich unter dem Bild: was Sebastian mitbringt und worum es ihm geht. */
.begegnung .daneben.wort { max-width: 27rem; margin-top: 2.5rem; padding-top: 1.5rem; font-size: 1em; color: var(--tinte); }
/* Am Ende der Seite: dasselbe mit dem Kontaktformular. Die Karte steht tiefer im Bild und
   auf der Seite, auf der das Bild sie verträgt. */
.begegnung.ende > img { aspect-ratio: 3 / 2; }
.begegnung.ende .karte { margin-top: -27rem; }
.begegnung.ende .karte form { max-width: none; }
.begegnung.ende.links .unter { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); }

/* ---------- Formulare ---------- */
form { max-width: var(--spalte); margin: 2.25rem auto 0; }
.feld { display: block; margin-top: 1.4rem; }
.feld > span, legend { display: block; padding: 0; font-size: var(--klein); color: var(--grau); transition: color 0.3s; }
.feld:focus-within > span { color: var(--tinte); }
input[type="text"], input[type="email"], textarea {
  display: block; width: 100%; font: inherit; color: inherit; background: transparent;
  border: 0; border-bottom: 1px solid color-mix(in srgb, var(--tinte) 60%, transparent); border-radius: 0; padding: 0.35rem 0 0.45rem;
  transition: border-color 0.3s, box-shadow 0.3s;
}
/* Das Feld, in dem man schreibt, zeigt sich an seiner Linie. */
input[type="text"]:focus, input[type="email"]:focus, textarea:focus { outline: none; border-bottom-color: var(--akzent); box-shadow: 0 1px 0 var(--akzent); }
textarea { min-height: 6.5rem; resize: vertical; }
fieldset { border: 0; padding: 0; margin: 0; }
.wahl { display: flex; flex-wrap: wrap; gap: 0.4rem 1.75rem; margin-top: 0.45rem; }
.wahl label { display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer; }
/* Die Wahl sieht aus wie das Zeichen: ein Kreis, und was gewählt ist, bekommt seine Mitte. */
input[type="radio"] { appearance: none; -webkit-appearance: none; flex: none; display: grid; place-content: center; width: 1.05rem; height: 1.05rem; margin: 0; border: 1px solid var(--tinte); border-radius: 50%; background: transparent; cursor: pointer; }
input[type="radio"]::before { content: ""; width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--akzent); scale: 0; transition: scale 0.35s var(--kurve); }
input[type="radio"]:checked::before { scale: 1; }
/* Passt der Knopf nicht neben das Feld, steht er darunter; er bricht nicht um. */
.eintragen { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.5rem 1.25rem; }
.eintragen label { flex: 1 1 13rem; margin-top: 0; }
form .knopf { margin-top: 1.75rem; }
.eintragen .knopf { margin-top: 0; white-space: nowrap; }
.rueckmeldung { max-width: var(--spalte); min-height: 1.5em; margin: 0.9rem auto 0; font-size: var(--klein); color: var(--akzent-text); }
/* Angeschlossen seit dem 2026-10-16 (Formulare.md): Was nur Programme ausfüllen (Honigtopf), steht
   außer Sicht, nicht bloß unsichtbar. Der Kasten für Turnstile hat keine Höhe, bis Cloudflare einmal
   eine Bestätigung braucht. Nach dem Absenden tritt das Formular zurück; an seiner Stelle steht in
   Lesegröße, was nun geschieht, darunter leise der nächste Weg. */
[hidden] { display: none !important; }
.nicht-ausfuellen { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.schutz { max-width: var(--spalte); height: 0; margin-inline: auto; overflow: hidden; }
.schutz.zeigt { height: auto; margin-top: 1.25rem; }
form[aria-busy="true"] .knopf { opacity: 0.55; cursor: progress; }
.notiz a, .daneben a { text-decoration-color: var(--akzent); }
button.weiter { appearance: none; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.24em; text-decoration-color: var(--akzent); }

/* ---------- Die Rückmeldung: die Wende ----------
   Sebastians Wahl vom 2026-10-17 (Entwurf 2 der Studie, archiv/runde-11/studie/, Design.md 4.11):
   Nach dem Absenden wendet sich das Blatt mit dem Formular langsam um; auf seiner Rückseite steht im
   Sandton, was nun geschieht, mit der Linie und ihrem Punkt. Ist die Anmeldung zu „Gedanken und
   Einladungen“ bestätigt, öffnet sich der Punkt zur Rosette. Beim Absenden läuft eine feine Linie im
   Ton unter dem Formular; ein Fehler bekommt den Punkt der Linie davor, das Feld zeigt sich an seiner
   Linie. Ohne Bewegung („Bewegung reduzieren“) blendet alles nur über. */
form[data-art] { position: relative; }
form[data-art]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.65rem; height: 1px; background: var(--akzent);
  transform-origin: 0 50%; scale: 0 1; opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
form[data-art][aria-busy="true"]::after { opacity: 1; animation: laufen 1.5s cubic-bezier(0.5, 0, 0.3, 1) infinite; }
@keyframes laufen {
  0% { scale: 0 1; transform-origin: 0 50%; }
  49% { scale: 1 1; transform-origin: 0 50%; }
  51% { scale: 1 1; transform-origin: 100% 50%; }
  100% { scale: 0 1; transform-origin: 100% 50%; }
}
.rueckmeldung.ist-fehler::before {
  content: ""; display: inline-block; width: 0.36rem; height: 0.36rem; margin-right: 0.6rem; vertical-align: 0.16em;
  border-radius: 50%; background: var(--akzent);
}
[aria-invalid="true"] { border-bottom-color: var(--akzent) !important; box-shadow: 0 1px 0 var(--akzent); }
.eingabe { font-weight: 500; overflow-wrap: anywhere; }

/* Zwei Seiten in derselben Zelle; beim Wenden dreht sich die Vorderseite fort und die Rückseite
   herein. Für die Dauer der Wende zeigt die Vorderseite einen feinen Rand, damit man ein Blatt sieht
   und nicht nur Schrift, die sich dreht. */
.wende { display: grid; perspective: 2200px; }
.wende > .vorn, .wende > .hinten {
  grid-area: 1 / 1; min-width: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform 1.5s cubic-bezier(0.62, 0.02, 0.22, 1), border-color 0.4s, background-color 0.4s, box-shadow 1.5s;
}
.wende > .vorn { border: 1px solid transparent; }
.wende > .hinten {
  transform: rotateY(-180deg); display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: clamp(2rem, 4vw, 2.75rem) clamp(1.25rem, 4vw, 2.75rem); background: var(--flaeche); text-align: center;
}
.wende > .hinten:empty { display: none; }
.wende > .hinten, .wende.gewendet > .vorn { pointer-events: none; }
.wende.gewendet > .hinten { pointer-events: auto; }
.wende.rahmen > .vorn { border-color: var(--linie); background: var(--papier); }
.wende.gewendet > .vorn { transform: rotateY(180deg); }
.wende.gewendet > .hinten { transform: rotateY(0deg); }
.wende.dreht > .vorn, .wende.dreht > .hinten { box-shadow: 0 1.5rem 3rem -1.5rem rgba(60, 40, 25, 0.22); }
/* Nach der Wende liegt die Vorderseite unten und bestimmt die Höhe nicht mehr. */
.wende.liegt > .vorn { visibility: hidden; max-height: 0; overflow: hidden; }
/* „In Verbindung bleiben“: das ganze Blatt unter der Überschrift (Text, Formular, Hinweis) */
/* Text und Formular stehen genau wie zuvor; der Rahmen der Wende liegt in einem Abstand darum. */
.wende.verbindung { max-width: calc(var(--spalte) + 4rem); margin: calc(clamp(1.75rem, 3.5vw, 2.5rem) - 1.5rem) auto 0; }
.wende.verbindung > .vorn { padding: 0 2rem 1.75rem; }
.wende.verbindung > .vorn > .text { margin-top: 1.5rem; }
/* Die Karte im Bild (Kontakt): Sie selbst ist das Blatt. */
.begegnung.ende .karte:has(> .karte-wende) { padding: 0; background: transparent; }
.karte-wende > .vorn { padding: clamp(1.75rem, 3vw, 2.75rem); background: var(--papier); }
.karte-wende > .hinten { padding: clamp(2rem, 4vw, 3rem); }
/* Im Online-Feld: der Teil mit dem E-Mail-Feld; die Rückseite hell auf der getönten Kachel. */
.wende.im-feld { margin-top: 1.25rem; }
.wende.im-feld > .vorn { padding: 0; }
.wende.im-feld > .vorn > .dazu { margin-top: 0; }
.wende.im-feld > .hinten { background: var(--papier); border: 1px solid var(--linie); }
.wende.im-feld.rahmen > .vorn { background: var(--flaeche); padding: 0; }

.rueckseite { max-width: 28rem; }
.rueckseite:focus { outline: none; }
.rueckseite .lot { --lot: 2.6rem; margin: 0 auto 1.6rem; }
.rueckseite .lot::before { scale: 1 0; transition: scale 1.4s var(--fall-kurve) 1.1s; }
.rueckseite .lot::after { opacity: 0; translate: 0 calc(-1 * var(--lot)); transition: translate 1.4s var(--fall-kurve) 1.1s, opacity 0.8s ease-out 1.1s; }
.gewendet .rueckseite .lot::before { scale: 1; }
.gewendet .rueckseite .lot::after { opacity: 1; translate: none; }
.rueckseite .vorzeile { margin-bottom: 0.4rem; }
.rueckseite h3 { font-size: 1.55em; font-weight: 300; line-height: 1.22; color: var(--titel-ton); text-wrap: balance; }
.rueckseite .zeilen { margin-top: 1.1rem; }
.rueckseite .zeilen p { text-wrap: balance; }
.rueckseite .zeilen p + p { margin-top: 0.35rem; }
.rueckseite .hinweis { margin-top: 1.2rem; font-size: var(--klein); color: var(--grau); text-wrap: balance; }
.rueckseite .lauscht { margin-top: 0.5rem; font-size: var(--klein); font-style: italic; color: var(--grau); }
.rueckseite .danach { margin-top: 1.2rem; font-size: var(--klein); color: var(--grau); }
.rueckseite .weg { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.9s var(--kurve), opacity 0.6s; }
.rueckseite .weg > div { min-height: 0; overflow: hidden; }
.rueckseite .fertig-text { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.9s var(--kurve), opacity 0.9s var(--kurve) 0.35s; }
.rueckseite .fertig-text > p { min-height: 0; overflow: hidden; margin-top: 1rem; }
.bestaetigt .rueckseite .weg { grid-template-rows: 0fr; opacity: 0; }
.bestaetigt .rueckseite .fertig-text { grid-template-rows: 1fr; opacity: 1; }
.bestaetigt .rueckseite .danach { display: none; }
/* Mit der Bestätigung öffnet sich der Punkt der Linie zur Rosette. */
.rueckseite .lot .rosette-antwort { position: absolute; left: 50%; bottom: 0; width: 3.1rem; height: 3.1rem; margin: 0 0 -1.55rem -1.55rem; }
.rueckseite .lot .rosette-antwort circle { display: none; }
.bestaetigt .rueckseite .lot { margin-bottom: 2.6rem; transition: margin 0.9s var(--kurve); }

/* ---------- Fußzeile ---------- */
footer { padding: 0 var(--rand) 3.5rem; text-align: center; font-size: 0.9em; color: var(--grau); }
footer svg { width: 4.25rem; height: 4.25rem; margin: 0 auto; color: var(--titel-ton); }
footer .name { margin-top: 1.1rem; font-family: var(--titel); font-weight: 400; font-size: 1.3em; color: var(--titel-ton); }
/* Der Claim (Claims.md, der erste), kursiv und in Grau: Zeichen und Name sind in Braun der
   Absender, der Claim tritt als leise Stimme dahinter zurück (Sebastian, 2026-10-14: „vielleicht
   ins Grau setzen“). Die Zeile „Offene Abende in Freiburg …“ ist entfallen. */
footer .claim { margin: 0.35rem 0 0; font-style: italic; font-weight: 300; font-size: 1.12em; color: var(--grau); }
footer nav { display: flex; justify-content: center; gap: 2rem; margin-top: 2.4rem; }

/* ================================================================ Aufscheinen */
/* Das Skript gibt allem, was aufscheinen soll, die Klasse „auf“ und, sobald es im Blickfeld
   ist, „da“. Bis das Skript bereit ist, bleibt der Teil unter dem Titelbild verborgen, damit
   nichts erst da ist und dann verschwindet. */
.js:not(.bereit) main > :not(.hero), .js:not(.bereit) footer { visibility: hidden; }

/* Was ins Blickfeld kommt, scheint auf; das Stück Papier greift ins Bild, dann schreibt sich
   die Überschrift von links nach rechts. */
[data-auf="bisher"] .auf { opacity: 0; translate: 0 var(--weg); transition: opacity var(--dauer) var(--kurve), translate var(--dauer) var(--kurve); transition-delay: calc(var(--i, 0) * var(--folge)); }
[data-auf="bisher"] .auf.da { opacity: 1; translate: none; }
[data-auf="bisher"] .tafel.auf { translate: none; }
[data-auf="bisher"] .tafel.auf img { scale: 1.04; transition: scale 2.6s var(--kurve); }
[data-auf="bisher"] .tafel.auf.da img { scale: 1; }
[data-auf="bisher"] .kerbe.auf { opacity: 1; translate: 0 1.75rem; transition: translate 1.5s var(--kurve) 0.25s; }
[data-auf="bisher"] .kerbe.auf > * { opacity: 0; transition: opacity var(--dauer) var(--kurve) 0.6s; }
[data-auf="bisher"] .kerbe.auf.da { translate: none; }
[data-auf="bisher"] .kerbe.auf.da > * { opacity: 1; }
[data-auf="bisher"] .kerbe.auf h2 { opacity: 1; clip-path: inset(-0.3em 100% -0.3em -0.1em); transition: clip-path 1.9s var(--kurve) 0.55s; }
[data-auf="bisher"] .kerbe.auf.da h2 { clip-path: inset(-0.3em -0.1em -0.3em -0.1em); }
/* Die Linie zeichnet sich von oben nach unten, ihr Punkt läuft mit und bleibt an ihrem Ende stehen. */
[data-auf="bisher"] .lot.auf { opacity: 1; translate: none; }
[data-auf="bisher"] .lot.auf::before { scale: 1 0; transition: scale var(--fall) var(--fall-kurve); }
[data-auf="bisher"] .lot.auf.da::before { scale: 1; }
[data-auf="bisher"] .lot.auf::after { opacity: 0; translate: 0 calc(-1 * var(--lot)); transition: translate var(--fall) var(--fall-kurve), opacity var(--fall-blende) ease-out; }
[data-auf="bisher"] .lot.auf.da::after { opacity: 1; translate: none; }

/* ================================================================ Rosette */
/* Aus einem Punkt wird ein Kreis, und der Kreis dreht sich zur Rosette auf (werkzeug/ornamente.py).
   Zweimal auf der Seite: über dem Satz der stillen Mitte (acht Kreise, mit ihrem Punkt) und über
   „In Verbindung bleiben“, wo sich der Punkt der Linie zu einer kleinen öffnet (sechs Kreise). */
.bluete { display: block; overflow: visible; }
.bluete path { fill: none; stroke: var(--strich); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.bluete circle { fill: var(--akzent); }
.bluete g { rotate: calc(var(--k) * var(--teil)); }
.mitte .bluete { width: 5.25rem; height: 5.25rem; margin: 0 auto 1.7rem; }
.bluete.am-lot { position: absolute; left: 50%; top: var(--lot); width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem; }
.bluete.am-lot circle { display: none; }                 /* ihre Mitte ist der Punkt der Linie */
#newsletter > .lot { margin-bottom: clamp(3.6rem, 6.5vw, 5rem); }
@media (prefers-reduced-motion: no-preference) {
  .js .bluete g { transition: rotate 3.4s cubic-bezier(0.3, 0, 0.15, 1); transition-delay: calc(1.5s + var(--k) * 0.07s); }
  .js .bluete path { transition: scale 1.5s var(--kurve) 0.3s; }
  .js .bluete:not(.da) g { rotate: 0deg; }
  .js .bluete:not(.da) path { scale: 0; }
  .js .bluete.am-lot path { transition-delay: 1.1s; }
  .js .bluete.am-lot g { transition-delay: calc(2.2s + var(--k) * 0.07s); }
}

/* ================================================================ Weitere Wege */
/* Untereinander: das Online-Feld über die ganze Breite, links, was es ist, rechts der eine
   Knopf. Darunter die längeren Formen als drei Karten, jede mit ihrer Statuszeile. Dann die
   Einzelgespräche, nachgeordnet, und die Einladung, in die der Abschnitt mündet. */
.kachel.breit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); gap: 1.75rem clamp(2rem, 5vw, 4.5rem); align-items: start; max-width: 64rem; margin: clamp(2.75rem, 5.5vw, 4rem) auto 0; }
.kachel.breit .schritte { margin-top: 0; padding-top: 0.2rem; }
.kachel.breit > div > p + p { margin-top: 0.9em; }       /* wie im Lesetext; seit dem Satz zu den Online-Retreats */
.zeit { max-width: var(--spalte); margin: clamp(3rem, 6vw, 4.25rem) auto 0; text-align: center; }
.zeit p { text-wrap: balance; }
.karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 64rem; margin: 1.9rem auto 0; }
.karten .kachel { padding: clamp(1.5rem, 2.6vw, 2.1rem); }
.karten h4 { font-size: 1.24em; font-weight: 400; line-height: 1.2; }
.karten .status { margin: 0.2rem 0 0.85rem; }
.karten .status + p { font-size: 0.94em; }

/* ---------- Einzelgespräche: nachgeordnet, ohne gefüllten Knopf, ohne Platz in der Kopfleiste ---------- */
.einzel .schritte { margin-top: 1.5rem; }
/* Die Bank: ein kleines Hochformat neben dem Text; sie schaut zum Text hin. */
.einzel.paar { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: clamp(2rem, 5.5vw, 4.75rem); align-items: center; max-width: 56rem; margin: clamp(4rem, 8vw, 6rem) auto 0; }
.einzel.paar img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: var(--fokus, 50% 50%); }
.einzel.paar > div { max-width: var(--spalte); }

/* ---------- Die Einladung: hier mündet der Abschnitt ---------- */
/* Eine kurze Linie mit ihrem Punkt führt hinein, wie die Linien von Abschnitt zu Abschnitt, nur
   kleiner: Sie gehört noch zu „Weitere Wege“. Darunter zwei Sätze auf der Mittelachse, je Satz
   eine Zeilengruppe (wie in der Schwelle), dann der Knopf. */
.einladung { max-width: 40rem; margin: clamp(3.5rem, 7vw, 5rem) auto 0; text-align: center; }
.einladung > .lot { --lot: clamp(2.75rem, 5vw, 3.75rem); margin-bottom: clamp(1.9rem, 3.8vw, 2.5rem); }
.einladung p { font-weight: 300; font-size: 1.14em; line-height: 1.5; }
.einladung p > span { display: block; text-wrap: balance; }
.einladung p > span + span { margin-top: 0.5em; }
/* Der erste Satz bricht dort, wo man beim Sprechen Atem holt; auf dem Handy fließt er. */
@media (min-width: 42rem) { .einladung .sinn { display: block; } }
.einladung .knopf { margin-top: clamp(1.75rem, 3.5vw, 2.25rem); }

/* ---------- Unterseiten: Datenschutz, die Bestätigung der Anmeldung, Meldungen des Servers ----------
   Ein Blatt auf der Mittelachse: die Linie mit ihrem Punkt, die Überschrift, eine Spalte Text. */
.unterseite { min-height: calc(100svh - var(--kopf) - 15rem); }
.blatt h2 { margin-bottom: 0.2rem; }
.blatt:not(.rechtliches) .text { text-align: center; }
.blatt .text > p + p { margin-top: 1em; }
.blatt .bestaetigen { display: flex; justify-content: center; margin-top: 2.25rem; }
.blatt .mittig, .blatt .weiter-zeile { max-width: var(--spalte); margin: 1.5rem auto 0; text-align: center; }
.rechtliches .text { margin-top: clamp(2rem, 4vw, 3rem); }
.rechtliches .einleitung { font-size: 1.08em; color: var(--titel-ton); }
.rechtliches h3 { margin: 2.4rem 0 0.6rem; font-size: 1.22em; font-weight: 400; }
.rechtliches .stand { margin-top: 2.6rem; font-size: var(--klein); color: var(--grau); }
.rechtliches a { word-break: break-word; }

/* ================================================================ schmalere Fenster */
@media (max-width: 80rem) {
  /* Das Bild steht oben, die Karte greift von unten hinein. */
  .begegnung > img { aspect-ratio: 3 / 2; height: auto; }
  .begegnung .unter, .begegnung.ende .unter { display: block; max-width: none; padding-inline: 0; }
  .begegnung .karte, .begegnung.ende .karte { width: min(100% - 2 * clamp(1rem, 5vw, 3rem), 38rem); margin: -5.5rem auto 0; }
  .begegnung .daneben { width: min(100% - 2 * clamp(1rem, 5vw, 3rem), 38rem); max-width: none; margin: 1.75rem auto 0; }
}
/* Die Kopfleiste trägt einen langen Knopf: Das Menü klappt deshalb früher ein als bisher. */
@media (max-width: 72rem) {
  .menue { display: block; }
  .kopf nav { display: none; position: absolute; top: var(--kopf); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 0.25rem var(--rand) 1.5rem; background: var(--papier); box-shadow: 0 1px 0 var(--linie); white-space: normal; }
  .kopf nav.ist-offen { display: flex; }
  .kopf nav a:not(.knopf) { padding: 0.8rem 0; border-bottom: 1px solid var(--linie); font-size: 1.2rem; color: var(--tinte); }
  .kopf nav a:not(.knopf)::after { display: none; }
  .kopf nav .knopf { margin-top: 1.25rem; padding: 1em; text-align: center; }
}
@media (max-width: 56rem) {
  .kachel.breit { grid-template-columns: 1fr; }
  .karten { grid-template-columns: 1fr; max-width: 36rem; }
  /* Die Bank bleibt neben dem Text, nur schmaler; sie soll nicht größer werden als der Weg selbst. */
  .einzel.paar { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); max-width: 40rem; }
}
@media (max-width: 48rem) {
  .kachel.breit { max-width: 36rem; }
}
@media (max-width: 40rem) {
  .einzel.paar { grid-template-columns: 1fr; max-width: 36rem; }
  .einzel.paar img { aspect-ratio: 3 / 2; object-position: var(--fokus-schmal, 50% 50%); }
}
@media (max-width: 42rem) {
  .hero { height: 78svh; }
  .hero > img { object-position: 30% 50%; }
  /* Tafel und Kerbe auf dem Handy: das Bild randlos und hoch, der Titelblock greift
     deutlich hinein und lässt links und rechts einen Streifen Bild stehen. */
  .tafel, .tafel.mittel { width: auto; margin-inline: calc(-1 * var(--rand)); }
  .tafel img { aspect-ratio: var(--form-schmal, 4 / 5); object-position: var(--fokus-schmal, var(--fokus, 50% 50%)); }
  .kerbe, .tafel.mittel + .kerbe { width: calc(100% - 2.75rem); min-height: 5.75rem; margin-top: -4.25rem; padding: 1.7rem 0.75rem 0; }
  .vorzeile { text-wrap: balance; }
  /* Lange Knöpfe dürfen umbrechen, ohne zu zerfallen. */
  .knopf { padding-inline: 1.15em; text-align: center; line-height: 1.25; }
  .termin { padding: 1.5rem 1.25rem 1.6rem; }
  .eintragen { flex-direction: column; align-items: stretch; }
  .eintragen label { flex: none; }
  .eintragen .knopf { white-space: normal; }
  .angaben { grid-template-columns: 1fr; gap: 0.1rem; }
  .angaben dd + dt { margin-top: 0.8rem; }
  /* Begegnung auf dem Handy: das Bild randlos und hoch, die Karte greift hinein. */
  .begegnung { margin-inline: calc(-1 * var(--rand)); }
  .begegnung > img, .begegnung.ende > img { aspect-ratio: 4 / 5; object-position: var(--fokus-schmal, var(--fokus, 50% 50%)); }
  .begegnung .karte, .begegnung.ende .karte { width: calc(100% - 2rem); margin-top: -4.5rem; padding: 1.75rem 1.5rem; }
  .begegnung.ende .karte:has(> .karte-wende) { padding: 0; }
  .karte-wende > .vorn { padding: 1.75rem 1.5rem; }
  .karte-wende > .hinten { padding: 2rem 1.5rem; }
  .wende.verbindung { margin-inline: -1rem; }
  .wende.verbindung > .vorn { padding: 0 1rem 1.5rem; }
  .begegnung .daneben { width: calc(100% - 2 * var(--rand)); }
  .mitte .bluete { width: 4.5rem; height: 4.5rem; }
  .einzel.paar figure { margin-inline: calc(-1 * var(--rand)); }
}
/* Sehr schmale Handys: Der Name in der Kopfleiste wird etwas kleiner, damit „Menü“ daneben Platz
   hat (der spanische Name ist länger als der deutsche). */
@media (max-width: 24rem) {
  .kopf .innen { gap: 1rem; }
  .marke { gap: 0.55rem; font-size: min(1.3rem, 5.1vw); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero > img, .hero h1, .hero p span { animation: none; }
  .auf, .auf > *, .auf::before, .auf::after, .tafel.auf img { opacity: 1; translate: none; scale: 1; clip-path: none; transition: none; animation: none; }
  /* Die Wende blendet nur über. */
  .wende > .vorn, .wende > .hinten { transition: opacity 0.4s; transform: none !important; }
  .wende > .hinten { opacity: 0; }
  .wende.gewendet > .vorn { opacity: 0; }
  .wende.gewendet > .hinten { opacity: 1; }
  form[data-art][aria-busy="true"]::after { animation: none; scale: 1 1; }
}