/* =========================================================================
   Spiritual-Teacher-Seiten — Gestaltung
   Angelegt 29.08.2026 von Claude-Bali-IPD nach dem Beschluss in
   inhalte/GESTALTUNG.md.

   Loest das gruen-goldene Design aus der Jimdo-Zeit ab und uebernimmt die
   Sprache der Masterseite: der Fliesstext laeuft in der eigenen Serifenschrift
   statt in der Systemschrift, die Typografie folgt einer Leiter, es gibt genau
   eine dunkle Flaeche je Seite.

   Nachtrag 29.08. nach Daniels Rueckmeldung: Die erste Fassung war zu still.
   Der Weiter-Knopf war als Knopf nicht zu erkennen — in einer Strecke, die von
   Seite 1 bis Seite 4 fuehren soll, ist das kein Geschmacksfehler, sondern ein
   Geldfehler. Dazugekommen sind deshalb: ein tragender Knopf mit Goldverlauf
   und wanderndem Lichtstreif, Verlaeufe in Kopf und Abschlussflaeche, ein
   weicher Schein unter den Bildern und Einblendungen beim Scrollen
   (spiritual.js, respektiert prefers-reduced-motion).
   Rundungen gibt es weiterhin keine — die sind das Erkennungszeichen von
   Vorlagen.

   Am Text wurde nichts geaendert. Woerter, Reihenfolge und Bilder sind
   unveraendert; aus dem Inhalt wurden nur die fest eingebauten Schriftgroessen
   und Farben aus der Jimdo-Zeit entfernt (301 Stueck), damit ueberhaupt eine
   Typografie moeglich ist.
   ========================================================================= */

@font-face {
  font-family: "Marke";
  src: url("schrift/marke-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Marke";
  src: url("schrift/marke-medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Marke";
  src: url("schrift/marke-semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Marke";
  src: url("schrift/marke-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  --tinte:    #16211D;
  --tinte2:   #0E1815;
  --papier:   #F8F6F1;
  --papier2:  #F0EDE4;
  --gold:     #A8823C;
  --goldtext: #8C6A2B;
  --gold2:    #C9A55E;
  --grau:     #5F6C67;
  --hell:     #DCE5E1;
  --linie:    #DAD2C1;

  --serif: "Marke", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans:  "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --lesen: 660px;          /* rund 72 Zeichen bei 19,5px */
  --rand:  clamp(22px, 5vw, 48px);

  --s1: 20px;
  --s2: 40px;
  --s3: clamp(48px, 6vw, 72px);
  --s4: clamp(64px, 9vw, 108px);
  --s5: clamp(120px, 11vw, 168px);   /* der eine grosse Abstand */
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }

body {
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--serif);
  font-size: 19.5px;
  line-height: 1.62;
  font-variant-numeric: oldstyle-nums proportional-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.schmal { max-width: var(--lesen); margin: 0 auto; padding: 0 var(--rand); }

/* ------------------------------------------------------------ Die Buehne */

.buehne {
  position: relative;
  min-height: 88svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: var(--tinte2);
}
.buehne-bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  /* Der Schriftzug im Bild sitzt rechts oben — die rechte Kante bleibt beim Beschnitt erhalten. */
  object-fit: cover; object-position: right 42%;
  margin: 0; outline: 0; box-shadow: none;
  /* Kamerazug und Scroll-Tiefe steuert spiritual.js — eine CSS-Animation
     wuerde mit fill-mode das transform sperren und das Skript aushebeln. */
  transform: scale(1.12);
}
.buehne-schleier {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(14,24,21,.34) 0%, rgba(14,24,21,.18) 34%,
      rgba(14,24,21,.42) 70%, rgba(14,24,21,.88) 100%);
}
.buehne-ziffer {
  position: absolute; left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  font-family: var(--serif);
  font-size: clamp(240px, 44vh, 420px);
  line-height: 1;
  color: rgba(201,165,94,.13);
  letter-spacing: .04em;
  pointer-events: none;
  user-select: none;
}
.buehne-wort { position: relative; }
.buehne-wort .stern {
  font-size: 17px; line-height: 1; color: var(--gold2);
  margin-bottom: var(--s1);
  animation: stern-glimmt 3600ms ease-in-out infinite;
}
@keyframes stern-glimmt {
  0%, 100% { opacity: .55; text-shadow: 0 0 6px rgba(201,165,94,0); }
  50%      { opacity: 1;   text-shadow: 0 0 18px rgba(201,165,94,.55); }
}
.buehne-wort h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 6.4vw, 64px);
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--papier);
  max-width: 16ch;
  margin: 0 auto;
  text-wrap: balance;
  text-shadow: 0 2px 34px rgba(14,24,21,.55);
  animation: bali-auftritt 900ms cubic-bezier(.2,.6,.2,1) 150ms both;
}
.buehne-wort .schritt {
  margin-top: var(--s1);
  font-family: var(--sans);
  font-size: 12px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold2);
  animation: bali-auftritt 900ms cubic-bezier(.2,.6,.2,1) 420ms both;
}
.buehne-pfeil {
  position: absolute; left: 50%; bottom: 30px;
  width: 1px; height: 52px;
  background: linear-gradient(to bottom, rgba(201,165,94,0), rgba(201,165,94,.85));
  animation: pfeil-atmet 2200ms ease-in-out infinite;
}
@keyframes pfeil-atmet {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50%      { transform: translateY(10px); opacity: 1; }
}
.buehne-ohne-bild { min-height: 46svh; }

.buehne-wort h1 .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(16px);
  animation: wort-tritt-auf 700ms cubic-bezier(.2,.6,.2,1) both;
  animation-delay: calc(220ms + var(--wi) * 90ms);
}
@keyframes wort-tritt-auf { to { opacity: 1; transform: none; } }

@keyframes bali-auftritt { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
/* ----------------------------------------------------------- Lesestrecke */

main { padding: var(--s4) 0 0; }

.baustein { margin: 0 0 var(--s2); }
.baustein:last-child { margin-bottom: 0; }

p { margin: 0 0 26px; }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--tinte);
  text-wrap: balance;
}
h2 {
  font-size: clamp(25px, 2.6vw, 32px);
  line-height: 1.18;
  letter-spacing: -.016em;
  margin: var(--s3) 0 var(--s1);
}
h3 {
  font-size: clamp(21px, 2.2vw, 25px);
  line-height: 1.3;
  letter-spacing: -.01em;
  margin: var(--s2) 0 14px;
}
h4 { font-size: 21px; line-height: 1.35; margin: var(--s2) 0 12px; }

strong, b { font-weight: 600; color: var(--tinte); }
em, i { font-style: italic; }

ul, ol { margin: 0 0 26px 1.1em; }
li { margin-bottom: 10px; }
ul { list-style: none; margin-left: 0; }
ul li { position: relative; padding-left: 26px; }
ul li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 7px; height: 1px; background: var(--gold);
}
ol li { padding-left: 4px; }

a {
  color: var(--tinte);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  transition: color 160ms ease, border-color 160ms ease;
}
a:hover { color: var(--goldtext); border-bottom-color: var(--goldtext); }

hr {
  border: 0; height: 1px; width: 44px; max-width: 44px;
  background: var(--linie); margin: var(--s2) 0;
}

/* ------------------------------------------------------------- Bildwerk */

figure { margin: var(--s3) 0; }

img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: var(--s3) auto;
  border-radius: 0;
  box-shadow: none;
  outline: 1px solid rgba(22, 33, 29, .07);
  outline-offset: -1px;
}
figure img { margin: 0 auto; }

figcaption {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.5;
  letter-spacing: .005em;
  color: var(--grau);
  max-width: 44ch;
  margin: 14px 0 0;
}

video {
  display: block; width: 100%; height: auto;
  margin: var(--s3) 0;
  background: var(--papier2);
  outline: 1px solid rgba(22, 33, 29, .07);
  outline-offset: -1px;
}

/* --------------------------------------------------- Der Weg nach unten */

.weiter {
  position: relative;
  color: var(--hell);
  padding: var(--s2) 0 var(--s3);
  text-align: center;
  background:
    radial-gradient(90% 120% at 50% 0%, #1E2E28 0%, var(--tinte) 42%, var(--tinte2) 100%);
}
/* Goldschimmer an der Oberkante — der Uebergang ins Dunkle */
.weiter::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(to right,
    rgba(201,165,94,0) 0%, rgba(201,165,94,.6) 50%, rgba(201,165,94,0) 100%);
}
.weiter .schmal { max-width: 620px; }
.weiter p {
  color: var(--hell);
  opacity: .78;
  font-size: 19.5px;
  margin: 0 auto 30px;
}
.weiter a {
  position: relative;
  display: inline-block;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: #16211D;
  background: linear-gradient(168deg, #F0D9A2 0%, #C9A55E 46%, #A8823C 100%);
  border: 0;
  border-radius: 0;
  padding: 28px 64px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,.32) inset,
              0 18px 44px -16px rgba(201,165,94,.85);
  animation: knopf-ruft 2600ms ease-in-out infinite;
  transition: transform 220ms cubic-bezier(.2,.6,.2,1),
              box-shadow 220ms cubic-bezier(.2,.6,.2,1);
}
@keyframes knopf-ruft {
  0%, 100% { box-shadow: 0 1px 0 rgba(255,255,255,.32) inset,
                         0 18px 44px -16px rgba(201,165,94,.85); }
  50%      { box-shadow: 0 1px 0 rgba(255,255,255,.32) inset,
                         0 22px 70px -10px rgba(201,165,94,1),
                         0 0 36px rgba(201,165,94,.5); }
}
/* Ein Lichtstreif wandert beim Zeigen einmal darueber. */
.weiter a::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg,
    rgba(255,255,255,0) 38%, rgba(255,255,255,.48) 50%, rgba(255,255,255,0) 62%);
  transform: translateX(-110%);
  animation: knopf-streif 4200ms cubic-bezier(.2,.6,.2,1) infinite;
}
@keyframes knopf-streif {
  0%       { transform: translateX(-110%); }
  16%      { transform: translateX(110%); }
  100%     { transform: translateX(110%); }
}
.weiter a:hover, .weiter a:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255,255,255,.34) inset,
              0 26px 56px -20px rgba(168,130,60,.86);
}
.weiter a:active { transform: translateY(0); }

.punkte { display: flex; gap: 10px; justify-content: center; padding: var(--s2) 0 0; }
.punkte i {
  display: block; width: 26px; height: 1px;
  background: var(--linie); border-radius: 0;
}
.punkte i.an { background: var(--gold); }

/* ---------------------------------------------------------------- Fuss */

footer {
  background: var(--tinte2);
  border-top: 1px solid rgba(201,165,94,.18);
  margin-top: 0;
  padding: var(--s2) 0;
  text-align: center;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: rgba(220,229,225,.5);
}
footer a { color: rgba(220,229,225,.6); border-bottom: 0; }
footer a:hover { color: var(--gold2); }

/* ------------------------------------------------------------- Formular */

form {
  background: var(--papier2);
  border: 1px solid var(--linie);
  border-radius: 0;
  box-shadow: none;
  padding: var(--s2) var(--s2) var(--s2);
  margin: var(--s3) 0;
}

label {
  display: block;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--grau);
  margin: 0 0 8px;
}

input[type=text], input[type=email], input[type=tel] {
  width: 100%;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.4;
  padding: 13px 0;
  margin: 0 0 24px;
  color: var(--tinte);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--linie);
  border-radius: 0;
  transition: border-color 160ms ease;
}
input[type=text]:hover, input[type=email]:hover, input[type=tel]:hover {
  border-bottom-color: var(--grau);
}
input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus {
  outline: 0;
  border-bottom-color: var(--gold);
}

.zeile2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s1); }

.zustimmung {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 6px 0 var(--s2);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  color: var(--grau);
}
.zustimmung input { flex: none; width: 18px; height: 18px; margin-top: 4px; accent-color: var(--gold); }

button[type=submit] {
  width: 100%;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--papier);
  background: var(--tinte);
  border: 1px solid var(--tinte);
  border-radius: 0;
  box-shadow: none;
  padding: 20px;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
button[type=submit]:hover { background: var(--tinte2); }

/* ---------------------------------------------------------------- Kleines */

@media (max-width: 720px) {
  /* Der Knopftext ist lang. Auf schmalen Bildschirmen enger setzen, damit er
     nicht auf drei Zeilen zerfaellt — und wenn er umbricht, sauber umbrechen. */
  .weiter a {
    display: block;
    padding: 22px 24px;
    font-size: 13.5px;
    letter-spacing: .1em;
    line-height: 1.5;
  }
  .weiter { padding: var(--s1) 0 var(--s2); }
}

@media (max-width: 560px) {
  .zeile2 { grid-template-columns: 1fr; }
  form { padding: var(--s1); }
  header h1 { font-size: clamp(28px, 8vw, 34px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ------------------------------------------------- Einblendungen (29.08.) */

.steigt {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 720ms cubic-bezier(.2,.6,.2,1),
              transform 720ms cubic-bezier(.2,.6,.2,1);
  will-change: opacity, transform;
}
.steigt.sichtbar { opacity: 1; transform: none; }

/* Bilder steigen eine Spur weiter und langsamer — das gibt Gewicht. */
main figure.steigt, main img.steigt {
  transform: translateY(34px) scale(.985);
  transition-duration: 900ms;
}
main figure.sichtbar, main img.sichtbar { transform: none; }

/* Ein sanfter Schein unter jedem Bild, damit es auf dem Papier steht
   statt darauf zu kleben. */
figure { position: relative; }
figure::after {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: -14px; height: 22px;
  background: radial-gradient(60% 100% at 50% 0%,
    rgba(22,33,29,.13) 0%, rgba(22,33,29,0) 72%);
  pointer-events: none;
}

img {
  box-shadow: 0 22px 48px -30px rgba(22, 33, 29, .55);
}

/* Der Abschluss der Lesestrecke laeuft ins Papier2 aus, bevor es dunkel wird. */
main::after {
  content: ""; display: block; height: var(--s2);
  background: linear-gradient(to bottom,
    rgba(240,237,228,0) 0%, var(--papier2) 55%, #D8D3C6 100%);
  margin-top: var(--s1);
}

/* --------------------------------------- Vollbreite Bild-Kapitel (29.08.) */

main figure.kapitelbild {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
main figure.kapitelbild img {
  width: 100%;
  height: auto;          /* nie beschneiden — jedes Foto ganz zeigen */
  outline: 0;
}
main figure.kapitelbild::after { left: 0; right: 0; }
main figure.kapitelbild figcaption {
  padding: 0 var(--rand);
  margin-left: auto; margin-right: auto;
  max-width: var(--lesen);
}

/* ----------------------------------------------------- Kernsaetze (29.08.) */

.kernsatz {
  width: 100vw;
  margin: var(--s3) calc(50% - 50vw) !important;
  padding: var(--s3) var(--rand);
  text-align: center;
  font-size: clamp(25px, 3.2vw, 36px) !important;
  line-height: 1.3;
  letter-spacing: -.012em;
  text-wrap: balance;
  position: relative;
  color: var(--gold2);
  background: radial-gradient(85% 130% at 50% 0%, #1E2E28 0%, var(--tinte) 48%, var(--tinte2) 100%);
}
.kernsatz::before {
  content: "\2726";
  display: block;
  font-size: 14px; color: var(--gold2); opacity: .85;
  margin-bottom: 18px;
}
.kernsatz::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(to right, rgba(201,165,94,0), rgba(201,165,94,.55), rgba(201,165,94,0));
}
.kernsatz strong { font-weight: 400; color: inherit; }
.kernsatz span { color: inherit !important; }
.kernsatz + .kernsatz { margin-top: calc(-1 * var(--s3)) !important; padding-top: 0; }
.kernsatz + .kernsatz::before { content: none; }
.kernsatz + .kernsatz::after { content: none; }

/* ---------------------------------------------- Der goldene Faden (29.08.) */

.faden {
  position: fixed; top: 0; right: clamp(10px, 2vw, 26px);
  width: 1px; height: 100vh;
  background: rgba(218,210,193,.55);
  z-index: 40; pointer-events: none;
}
.faden i {
  position: absolute; top: 0; left: 0; width: 100%;
  height: 0;
  background: linear-gradient(to bottom, var(--gold2), var(--gold));
  box-shadow: 0 0 8px rgba(201,165,94,.5);
  transition: height 120ms linear;
}
@media (max-width: 720px) { .faden { display: none; } }

/* -------------------------------------------------- Video-Buehne (29.08.) */

.video-buehne {
  width: 100vw; margin: var(--s4) calc(50% - 50vw);
  background:
    radial-gradient(80% 110% at 50% 0%, #1E2E28 0%, var(--tinte) 46%, var(--tinte2) 100%);
  padding: var(--s4) var(--rand);
}
.video-rahmen {
  position: relative;
  max-width: 900px; margin: 0 auto;
  outline: 1px solid rgba(201,165,94,.45);
  outline-offset: 10px;
}
.video-rahmen video {
  margin: 0; outline: 0; background: #000;
}
.video-los {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(14,24,21,.25);
  border: 0; cursor: pointer;
  transition: background 300ms ease, opacity 420ms ease;
}
.video-los:hover { background: rgba(14,24,21,.05); }
.video-los.weg { opacity: 0; pointer-events: none; }
.video-los-ring {
  display: flex; align-items: center; justify-content: center;
  width: 92px; height: 92px;
  border: 1px solid var(--gold2);
  border-radius: 50%;
  background: rgba(14,24,21,.45);
  box-shadow: 0 0 44px rgba(201,165,94,.35);
  transition: transform 260ms cubic-bezier(.2,.6,.2,1), box-shadow 260ms ease;
}
.video-los:hover .video-los-ring { transform: scale(1.07); box-shadow: 0 0 64px rgba(201,165,94,.55); }
.video-los-dreieck {
  width: 0; height: 0; margin-left: 6px;
  border-style: solid; border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent var(--gold2);
}

/* ------------------------------------------------ Durch die Tuer (29.08.) */

.tuer {
  position: fixed; inset: 0;
  background: var(--tinte2);
  opacity: 0; pointer-events: none;
  transition: opacity 420ms cubic-bezier(.2,.6,.2,1);
  z-index: 90;
}
.tuer.zu { opacity: 1; pointer-events: all; }
html.kommt-an .tuer { opacity: 1; transition: none; }
html.kommt-an.da .tuer { opacity: 0; transition: opacity 700ms cubic-bezier(.2,.6,.2,1); }

/* -------------------------------------------- Der Moment danach (29.08.) */

.moment {
  position: fixed; inset: 0; z-index: 95;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  background:
    radial-gradient(90% 110% at 50% 30%, #1E2E28 0%, var(--tinte) 48%, var(--tinte2) 100%);
  color: var(--hell);
  animation: bali-auftritt 900ms cubic-bezier(.2,.6,.2,1) 200ms both;
  padding: var(--rand);
}
.moment .stern {
  font-size: 19px; color: var(--gold2); margin-bottom: var(--s2);
  animation: stern-glimmt 3600ms ease-in-out infinite;
}
.moment h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.15; color: var(--papier);
  margin: 0 0 18px;
}
.moment p {
  color: var(--hell); opacity: .78;
  font-size: 19.5px; max-width: 44ch; margin: 0 auto var(--s2);
}
.moment a {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--gold2); border-bottom: 1px solid rgba(201,165,94,.5);
  padding-bottom: 3px;
}
.moment a:hover { color: var(--papier); border-color: var(--gold2); }

/* Zwei Kernsaetze direkt hintereinander: ein Gedanke, ein Stern. */
.kernsatz + .kernsatz {
  padding-top: 0;
  margin-top: calc(-1 * var(--s2)) !important;
}
.kernsatz + .kernsatz::before { content: none; }

/* ------------------------------------------- Grossansicht der Bilder (29.08.) */
main figure img, main .baustein > img { cursor: zoom-in; }
.gross {
  position: fixed; inset: 0; z-index: 96;
  display: flex; align-items: center; justify-content: center;
  background: rgba(14,24,21,.94);
  opacity: 0; transition: opacity 300ms ease;
}
.gross.da { opacity: 1; }
.gross img {
  max-width: min(92vw, 1400px); max-height: 88vh;
  width: auto; height: auto; margin: 0;
  outline: 1px solid rgba(201,165,94,.4); outline-offset: 10px;
  box-shadow: 0 40px 120px -40px rgba(0,0,0,.8);
}
.gross button {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px; border: 1px solid rgba(201,165,94,.5);
  background: rgba(14,24,21,.5); color: var(--gold2);
  font-size: 22px; line-height: 1; cursor: pointer; border-radius: 0;
  transition: background 200ms ease, border-color 200ms ease;
}
.gross button:hover { background: rgba(201,165,94,.15); border-color: var(--gold2); }
.gross .zu    { top: 28px; right: 28px; transform: none; }
.gross .vor   { right: 28px; }
.gross .rueck { left: 28px; }
.gross .stand {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  font-family: var(--sans); font-size: 11.5px; font-weight: 600;
  letter-spacing: .19em; color: var(--hell); opacity: .7;
}
@media (max-width: 720px) { .gross .vor, .gross .rueck { display: none; } }

/* Papierkorn wie auf der Masterseite. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity: .03; pointer-events: none;
}
body > * { position: relative; z-index: 1; }
.faden, .tuer, .gross, .moment { z-index: 96; }
.tuer { z-index: 97; }

/* ------------------------------------ Formular als Aufnahmegespraech (29.08.) */
.gruppe { margin: 0 0 var(--s2); }
.gruppe-kopf {
  display: flex; align-items: baseline; gap: 14px;
  border-bottom: 1px solid var(--linie);
  padding-bottom: 10px; margin-bottom: 22px;
}
.gruppe-zahl {
  font-family: var(--serif); font-size: 15px; letter-spacing: .06em;
  color: var(--goldtext); font-variant-numeric: lining-nums;
}
.gruppe-name {
  font-family: var(--sans); font-size: 11.5px; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase; color: var(--grau);
}
form input[type=text], form input[type=email], form input[type=tel] { font-size: 19px; }

/* ------------------------------------ Zusammengefuehrt (Daniel 11.09.2026) */
/* „kannst du das optisch noch anpassen und zusammenfuehren?" — zwei Kernsaetze
   und der Weiter-Knopf bilden EINEN dunklen Block. Vorher blieben helle
   Streifen: der zweite Kernsatz zog nur -s2 hoch, der erste schob s3 nach
   unten (Rest s3-s2 hell), und zwischen letztem Kernsatz und .weiter lagen
   main::after (Papierverlauf) und die Aussenabstaende. */
.kernsatz + .kernsatz {
  margin-top: calc(-1 * var(--s3)) !important;   /* hebt den Unterabstand des ersten genau auf */
  padding-top: 0;
  background: linear-gradient(to bottom, var(--tinte) 0%, var(--tinte2) 100%);
}
.kernsatz:has(+ .kernsatz) { padding-bottom: 12px; }   /* ein Gedanke, ein Atemzug Abstand */
main:has(.baustein:last-child > .kernsatz:last-child) .baustein:last-child > .kernsatz:last-child {
  margin-bottom: 0 !important;
}
main:has(.baustein:last-child > .kernsatz:last-child)::after { display: none; }
main:has(.baustein:last-child > .kernsatz:last-child) + .weiter {
  padding-top: 0;
  background: var(--tinte2);              /* nahtlos an das Ende des Kernsatz-Verlaufs */
}
main:has(.baustein:last-child > .kernsatz:last-child) + .weiter::before { content: none; }