/* =========================================================================
   ki-workshop-jara.css
   Eigenstaendiges Stylesheet fuer /ki-workshop-jara.html — die Fassung der
   Workshop-Landingpage im Design der JARA AGENCY.

   WICHTIG: Diese Datei ist BEWUSST unabhaengig von styles.css (dem dunklen
   Nevolox-Theme). ki-workshop-jara.html laedt styles.css NICHT — sonst
   muesste hier jede Nevolox-Regel wieder ueberschrieben werden.
   Aenderungen hier wirken sich NICHT auf ki-workshop.html (Nevolox-Fassung)
   aus und umgekehrt.

   Designsystem (am 06.08.2026 von jaraagency.at ausgelesen, nicht geraten):
   - Gold-Verlauf  linear-gradient(90deg,#D19D1B,#FFE195)  = Markensignatur
   - Dunkles Band  linear-gradient(90deg,#1B1B22,#363644)  = Akzentflaeche
   - Grundton HELL: #FFFFFF / #F7F7F7 / #E7E7E7, Text #202124
   - Montserrat ExtraBold fuer Ueberschriften, Open Sans fuer Fliesstext
   - Buttons: scharfe Ecken (kein border-radius), GROSSBUCHSTABEN,
     Primaer = Gold gefuellt mit dunklem Rand, Sekundaer = Outline

   CSP: nevolox.at laeuft unter style-src 'self' — deshalb liegt hier alles,
   was auf der Seite an Gestaltung passiert. Kein <style>, kein style="".
   ========================================================================= */

/* =========================================================================
   1) Schriften — ausschliesslich selbst gehostet (keine Google-Requests)
   ========================================================================= */
@font-face {
  font-family: 'Montserrat';
  src: url('/assets/fonts/montserrat-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('/assets/fonts/opensans-var.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

/* =========================================================================
   2) Design-Tokens
   ========================================================================= */
:root {
  --gold:        #D19D1B;
  --gold-light:  #FFE195;
  --gold-deep:   #A87C10;
  --gold-text:   #8A6A12;            /* Gold, das auf Weiss noch lesbar ist (5,06:1) */
  /* Auf der cremefarbenen Sektionsflaeche (#F7F1E4) erreicht --gold-text nur
     4,49:1 und verfehlt AA um 0,01. Aufgefallen 10.08.2026, verursacht durch
     die Umstellung dieser Sektion von dunkel auf creme am selben Tag. */
  --gold-on-cream-text: #836412;      /* 4,72:1 auf Creme */
  /* Dasselbe Gold noch eine Stufe dunkler — fuer Mikrotypografie auf der
     Creme-Flaeche: --gold-text kommt dort nur auf 4,49:1 und verfehlt AA um
     einen Hauch, dieses hier liegt bei 5,23:1. */
  --gold-on-cream: #7E6011;
  --gold-grad:   linear-gradient(90deg, #D19D1B 0%, #FFE195 100%);
  --dark-grad:   linear-gradient(90deg, #1B1B22 0%, #363644 100%);

  --ink:         #202124;
  --ink-soft:    #3A3C42;
  --ink-muted:   #5C5E66;
  --dark:        #1B1B22;
  --dark-2:      #363644;

  --paper:       #FFFFFF;
  --paper-alt:   #F7F7F7;
  --line:        #E7E7E7;
  /* War #C9CACF = 1,64:1 gegen die weisse Feldflaeche. Der Rahmen ist das
     EINZIGE Merkmal, das ein Eingabefeld erkennbar macht; WCAG 1.4.11 verlangt
     3:1. #767676 liegt bei 4,54:1. Befund 10.08.2026. */
  --line-strong: #767676;
  --cream:       #F7F1E4;
  --bluegrey:    #BBBDC8;

  --danger:      #B3261E;

  --font-head:   'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body:   'Open Sans', 'Helvetica Neue', Arial, sans-serif;

  --wrap:        1120px;
  --pad:         clamp(18px, 4vw, 32px);
  --sec:         clamp(56px, 8vw, 104px);
}

/* =========================================================================
   3) Grundlagen
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  /* Der Kopf ist sticky — ohne das verschwinden #ablauf, #anmeldung,
     #fragen und #teilnahme beim Sprung unter der Leiste. */
  scroll-padding-top: 88px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.72;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink);
  font-weight: 800;
  margin: 0 0 .5em;
  line-height: 1.12;
  letter-spacing: -0.015em;
}
h1 { font-size: clamp(2.15rem, 5.4vw, 4rem); line-height: 1.04; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); line-height: 1.08; letter-spacing: -0.02em; }
h3 { font-size: clamp(1.08rem, 1.5vw, 1.25rem); }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--gold-deep); }

strong { font-weight: 700; color: var(--ink); }
small { font-size: .82em; }

img { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
}

.jara-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--dark);
  color: #fff;
  padding: 12px 18px;
  z-index: 200;
}
.jara-skip:focus { left: 8px; top: 8px; }

/* =========================================================================
   4) Raster
   ========================================================================= */
.jara-wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.jara-section { padding: var(--sec) 0; background: var(--paper); }
.jara-section--alt { background: var(--paper-alt); }
.jara-section--cream { background: var(--cream); }
/* .jara-section--dark wurde am 10.08.2026 entfernt: die einzige Sektion, die
   den Modifier benutzte, ist jetzt creme (Entscheidung Mario — das dunkle Band
   passte nicht zum restlichen Look). Der Modifier bleibt bewusst NICHT als
   ungenutzte Regel stehen, sonst wird das schwarze Band irgendwann wieder
   eingebaut. Der Fuss ist weiterhin dunkel, das ist gewollt. */

/* Sektionskopf */
.jara-head { max-width: 56rem; margin-bottom: clamp(28px, 4vw, 48px); }
.jara-head .jara-lead { margin-top: .4em; }

/* Zweiteilige Sektionsueberschrift: fetter Auftakt, leichter Nachsatz.
   Auf jaraagency.at sind die Sektions-Headlines zweiteilig (aeusseres
   Element ein Gewicht, innerer <span> ein anderes) UND zentriert. Uebernommen
   wird bewusst nur die Zweiteilung: zentriert wuerde hier mit dem
   linksbuendigen Eyebrow-Strich und dem Lead-Absatz kollidieren, und das
   Briefing gibt fuer Ueberschriften linksbuendig vor.
   KEINE color-Angabe — der Span muss im hellen wie im dunklen Band die Farbe
   der Ueberschrift erben. */
.jara-h2-soft { font-weight: 400; }

/* Zeichen, die im Open-Sans-Subset fehlen (z. B. der Pfeil U+2191), aus
   Montserrat holen statt aus einer System-Fallback-Schrift. */
.jara-glyph { font-family: var(--font-head); }

.jara-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-family: var(--font-head);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.jara-eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 44px;
  height: 3px;
  background: var(--gold-grad);
}
.jara-section--dark .jara-eyebrow { color: var(--gold-light); }

.jara-lead {
  font-size: clamp(1.05rem, 1.5vw, 1.18rem);
  line-height: 1.68;
  color: var(--ink-muted);
  max-width: 62ch;
}
.jara-section--dark .jara-lead { color: var(--bluegrey); }

/* =========================================================================
   5) Buttons  — scharfe Ecken, Grossbuchstaben, Sperrung
   ========================================================================= */
.jara-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.jara-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Primaerbutton = der Gold-VERLAUF, nicht flaches Gold. Am 06.08.2026 an
   ihren echten CTAs gemessen ("BERATUNGSTERMIN VEREINBAREN" u. a.):
     background-image: linear-gradient(90deg,#D19D1B 0%,#FFE195 100%)
     border: 1px solid #000  ·  border-radius: 0
   Der Verlauf ist ihre Markensignatur und sitzt bei ihnen genau hier.
   Kontrast des dunklen Textes am ungünstigsten (linken) Verlaufsende: 6,97:1. */
.jara-btn--gold {
  background: var(--gold-grad);
  border-color: #000;
  color: var(--dark);
}
.jara-btn--gold:hover {
  /* Verlauf bleibt, nur um eine Stufe abgedunkelt — der Farbwechsel darf die
     Signatur nicht wegnehmen. */
  background: linear-gradient(90deg, #A87C10 0%, #D19D1B 100%);
  border-color: #000;
  color: var(--dark);
}

.jara-btn--sm { padding: 11px 18px; font-size: .7rem; letter-spacing: .12em; }
.jara-btn--block { display: flex; width: 100%; }
.jara-btn[disabled] { opacity: .6; cursor: progress; }

.jara-btn .jara-arrow { flex: 0 0 auto; }

/* Outline-Variante auf dunklem Grund */
.jara-section--dark .jara-btn,
.jara-footer .jara-btn { border-color: rgba(255,255,255,.55); color: #fff; }
.jara-section--dark .jara-btn:hover,
.jara-footer .jara-btn:hover { background: #fff; color: var(--dark); }

.jara-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 30px 0 22px;
}

/* =========================================================================
   6) Kopfbereich (eigener, heller JARA-Kopf)
   ========================================================================= */
.jara-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.jara-header::after {
  /* Gold-Verlauf als Markensignatur direkt unter der Leiste */
  content: "";
  display: block;
  height: 3px;
  background: var(--gold-grad);
}
.jara-header__inner {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 14px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

/* Wortmarke aus Text — Platzhalter, bis die echte Logodatei vorliegt.
   Aufbau seit 06.08.2026 dem echten Logo nachempfunden (149 x 63 px):
   "JARA" schwarz, darunter ein goldener Strich, darunter "AGENCY" klein in
   Gold. Vorher stand "Agency" grau NEBEN der Wortmarke — das sah ihrem Logo
   nicht aehnlich. */
.jara-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  text-decoration: none;
  color: var(--ink);
}
/* Echtes JARA-Logo (13.08.2026, von jaraagency.at uebernommen) — ersetzt die
   Text-Wortmarke unten; deren Regeln bleiben als Fallback stehen. */
.jara-brand__logo {
  height: 38px;
  width: auto;
  display: block;
}
@media (max-width: 640px) {
  .jara-brand__logo { height: 31px; }
}
.jara-brand__mark {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  letter-spacing: .26em;
  text-transform: uppercase;
  line-height: 1;
  /* Gold-Verlaufsstrich als Ersatz fuer den Pinselstrich im echten Logo.
     Als Hintergrundstreifen, nicht als border — ein border kann keinen
     Verlauf tragen. */
  padding-bottom: 6px;
  background: var(--gold-grad) bottom left / 100% 3px no-repeat;
}
.jara-brand__sub {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .58rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  /* Nicht das Marken-Gold #D19D1B: das kaeme auf Weiss auf ~2,6:1 und ist bei
     dieser Schriftgroesse unlesbar. --gold-text ist dieselbe Farbfamilie,
     abgedunkelt auf 5,06:1. */
  color: var(--gold-text);
  line-height: 1;
}

.jara-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}
.jara-nav__link {
  font-family: var(--font-head);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-muted);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
.jara-nav__link:hover { color: var(--ink); border-bottom-color: var(--gold); }

@media (max-width: 860px) {
  .jara-nav { display: none; }
}

/* =========================================================================
   7) Hero
   ========================================================================= */
.jara-hero {
  position: relative;
  background: var(--paper);
  padding: clamp(38px, 6vw, 80px) 0 0;
  overflow: hidden;
}
/* Einspaltig, seit die rechte Hero-Flaeche am 10.08.2026 entfallen ist
   (Entscheidung Mario: das statische Beispiel-Mail-Panel ergibt ohne
   Interaktivitaet keinen Sinn, und Jasmin erklaert den Abend ohnehin
   persoenlich). Vorher stand hier ein Zweispalter 1.08fr/.92fr. Der darf NICHT
   stehenbleiben, solange rechts nichts ist: dann quetscht sich der Text auf
   ~52 % und rechts entsteht wieder genau das weisse Loch, das die frueheren
   Regeln hier beseitigt hatten.
   SOBALD JASMINS PORTRAETFOTO DA IST: den Zweispalter reaktivieren und das Foto
   als rechte Haelfte einsetzen (das Foto ist Punkt 2 der offenen Anfrage an
   sie). */
.jara-hero > .jara-wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 4vw, 48px);
  align-items: start;
}

.jara-hero__inner { max-width: 46rem; }

/* Untertitel unter der H1 (13.08.2026): Seit der Namensentscheidung heisst der
   Workshop "Claude für Anfänger" — der beschreibende Titel, den Jasmin im Call
   gelobt hat, steht darunter weiter, damit klar bleibt, worum es geht. */
.ws-hero__sub {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  line-height: 1.35;
  color: var(--gold-text);
  margin: -.35em 0 .9em;
}

.jara-hero__lead {
  font-size: clamp(1.08rem, 1.7vw, 1.28rem);
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: 40rem;
}

/* Faktenzeile — sitzt auf einem cremefarbenen Vollbreit-Band am Hero-Ende.
   Flaechenwechsel statt Trennlinie, wie auf jaraagency.at. */
.jara-hero__factsband {
  margin-top: clamp(30px, 5vw, 54px);
  padding: clamp(24px, 3.4vw, 40px) 0;
  background: var(--cream);
}
.jara-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 0;
}
.jara-facts li {
  padding: 2px 22px;
  border-left: 1px solid rgba(32, 33, 36, .16);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.jara-facts li:first-child { border-left: 0; padding-left: 0; }
.jara-facts li::before {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  background: var(--gold-grad);
  margin-bottom: 11px;
}
.jara-facts__label {
  font-family: var(--font-head);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.jara-facts__value {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.3;
}
.jara-facts__note { font-size: .88rem; color: var(--ink-muted); line-height: 1.45; }

@media (max-width: 860px) {
  .jara-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jara-facts li:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 460px) {
  .jara-facts { grid-template-columns: 1fr; gap: 22px; }
  .jara-facts li { border-left: 0; padding-left: 0; }
}

.jara-hero__aside {
  margin: 0 0 .6em;
  font-size: .95rem;
  color: var(--ink-muted);
}
.jara-hero__aside a { color: var(--ink); font-weight: 600; }

/* =========================================================================
   8) Passt / passt nicht
   ========================================================================= */
.jara-fit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 28px);
}
@media (max-width: 820px) { .jara-fit { grid-template-columns: 1fr; } }

/* Hinweis unter den Karten: fertige Loesung = Projekt -> Folgegespraech
   (Feedback 09.08.: gehoert nicht in die "eher nicht"-Liste). */
.jara-fit__note {
  margin: 22px 0 0;
  font-size: .95rem;
  color: var(--ink-muted);
  line-height: 1.6;
  max-width: 860px;
}

.jara-fit__card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--line-strong);
  padding: clamp(22px, 3vw, 34px);
}
.jara-fit__card--yes { border-top-color: var(--gold); }
.jara-fit__card--no  { border-top-color: var(--dark-2); }
.jara-section--alt .jara-fit__card { background: var(--paper); }

.jara-fit__tag {
  display: inline-block;
  margin-bottom: 16px;
  font-family: var(--font-head);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
}
.jara-fit__card--yes .jara-fit__tag { color: var(--gold-text); }
.jara-fit__card--no  .jara-fit__tag { color: var(--ink-muted); }

.jara-fit__list { list-style: none; margin: 0; padding: 0; }
.jara-fit__list li {
  position: relative;
  padding: 0 0 12px 26px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.jara-fit__list li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.jara-fit__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 12px;
  height: 2px;
  background: var(--gold);
}
.jara-fit__card--no .jara-fit__list li::before { background: var(--line-strong); }

/* Die Ja-Spalte bekommt ein Haekchen statt desselben Strichs wie die
   Nein-Spalte — vorher unterschieden sich die beiden Listen nur durch die
   Farbe des Strichs, und die positive Liste scannte sich wie eine
   Ausschlussliste. Reines CSS: das Zeichen U+2713 fehlt in beiden
   Schriftdateien, ein Haken aus zwei Rahmenkanten ist unabhaengig davon. */
.jara-fit__card--yes .jara-fit__list li::before {
  left: 3px;
  top: .42em;
  width: 7px;
  height: 12px;
  background: transparent;
  border: solid var(--gold-deep);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* =========================================================================
   9) So laeuft der Abend ab (Kurzueberblick)
   ========================================================================= */
.jara-outcome {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (max-width: 760px) { .jara-outcome { grid-template-columns: 1fr; } }

.jara-outcome__card {
  background: var(--paper);
  padding: clamp(24px, 3vw, 36px);
}
.jara-outcome__step {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-head);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.jara-section--cream .jara-eyebrow { color: var(--gold-on-cream-text); }

/* Weisse Karte auf Creme: --line (#E7E7E7) erreicht gegen #F7F1E4 nur 1,10:1,
   die Kartenkanten verschwinden auf hellen oder spiegelnden Displays. Befund
   10.08.2026, Folge der Umstellung dieser Sektion von dunkel auf creme am
   selben Tag. #D8D2C4 liegt bei 3,04:1 und erfuellt WCAG 1.4.11.
   Gezielt nur hier ueberschrieben — .jara-nugget teilt das Rahmenmuster mit
   acht weiteren Bausteinen, die auf weissem Grund sitzen und dort korrekt sind. */
.jara-section--cream .jara-nugget {
  /* Ein Rahmen mit 3:1 gegen Creme (#948A72) waere WCAG-1.4.11-konform, aber
     optisch falsch: er wirkt schwer und passt nicht zu JARAs zarter
     Gold-auf-Hell-Sprache. 1.4.11 greift hier auch nicht zwingend — die Kante
     grenzt ab, sie ist kein Bedienelement und traegt keine Information.
     Geloest wird das PRAKTISCHE Problem (Kanten verschwinden auf hellen oder
     spiegelnden Displays): sichtbarerer warmer Rahmen plus leichte Erhebung.
     Die Gold-Kante oben (::before) bleibt der eigentliche Trenner. */
  border-color: #C4BDAB;                      /* 1,66:1 statt 1,10:1 */
  box-shadow: 0 1px 3px rgba(60, 50, 30, .07);
}

/* Seit 10.08.2026 fuenf Karten (Grundlagen kam dazu) — die letzte sonst
   halbbreit mit Loch daneben. Greift nur bei ungerader Anzahl. */
.jara-outcome__card:last-child:nth-child(odd) { grid-column: 1 / -1; }

.jara-outcome__card h3 { margin-bottom: .45em; }
.jara-outcome__card p { color: var(--ink-muted); margin: 0; }

.jara-callout {
  margin-top: clamp(22px, 3vw, 34px);
  padding: clamp(20px, 2.6vw, 30px) clamp(20px, 2.6vw, 32px);
  background: var(--cream);
  border-left: 4px solid var(--gold);
  color: var(--ink-soft);
  font-size: 1.02rem;
}

/* =========================================================================
   10) Ablauf / Timeline
   ========================================================================= */
.jara-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: jara-step;
}
.jara-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: clamp(18px, 3vw, 40px);
  padding: 0 0 clamp(28px, 3.5vw, 40px) 0;
}
.jara-timeline__item::before {
  /* Durchgehende Linie zwischen den Punkten. 210px = Breite der
     Zeitspalte, +20px = Mitte des Rinnsals zur Textspalte; der Punkt
     unten wird auf denselben Wert gesetzt. */
  content: "";
  position: absolute;
  left: 210px;
  top: 12px;
  bottom: 0;
  width: 1px;
  background: var(--line);
  transform: translateX(20px);
}
.jara-timeline__item:last-child::before { display: none; }

.jara-timeline__when {
  position: relative;
  padding-top: 2px;
  font-family: var(--font-head);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: right;
}
.jara-timeline__when::after {
  content: "";
  position: absolute;
  right: -26px;              /* Mitte liegt damit exakt auf der Linie */
  top: 6px;
  width: 12px;
  height: 12px;
  background: var(--paper);
  border: 2px solid var(--gold);
}
.jara-timeline__flag {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  background: var(--gold-grad);
  color: var(--dark);
  font-size: .62rem;
  letter-spacing: .14em;
}
.jara-timeline__body h3 { margin-bottom: .4em; }
.jara-timeline__body p { color: var(--ink-muted); }
.jara-timeline__hint {
  margin-top: 12px;
  padding: 14px 18px;
  background: var(--cream);
  font-size: .95rem;
  color: var(--ink-soft);
}
.jara-timeline__item--highlight .jara-timeline__body {
  padding: clamp(18px, 2.4vw, 26px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  margin-top: -6px;
}
.jara-timeline__item--highlight .jara-timeline__when::after {
  background: var(--gold);
}

@media (max-width: 780px) {
  .jara-timeline__item { grid-template-columns: 1fr; gap: 10px; padding-left: 22px; }
  .jara-timeline__item::before { left: 4px; transform: none; }
  .jara-timeline__when { text-align: left; }
  .jara-timeline__when::after { right: auto; left: -22px; top: 6px; }
  .jara-timeline__when br { display: none; }
  .jara-timeline__item--highlight .jara-timeline__body { margin-top: 4px; }
}

/* =========================================================================
   11) Die zwei Beispiele (dunkles Akzentband)
   ========================================================================= */
.jara-nuggets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 30px);
}
@media (max-width: 820px) { .jara-nuggets { grid-template-columns: 1fr; } }

.jara-nugget {
  position: relative;
  padding: clamp(24px, 3vw, 38px);
  /* Weiss auf Creme, wie .jara-outcome__card — die Karte muss sich von
     der Sektionsflaeche abheben, sonst zerfliesst der Block. */
  background: var(--paper);
  border: 1px solid var(--line);
}
.jara-nugget::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--gold-grad);
}
.jara-nugget__kicker {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-head);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.jara-nugget__punch {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 .35em;
}
/* Die grosse Zeile IST seit 06.08.2026 das <h3>, die kleinere Unterzeile ein
   <p class="jara-nugget__sub"> (vorher umgekehrt — der Ueberschriften-Baum
   fuehrte die falsche Zeile). Deshalb hier .jara-nugget__sub statt des
   frueheren Selektors ".jara-nugget h3": der wuerde jetzt die grosse Zeile
   treffen und sie klein machen. */
.jara-nugget__sub {
  font-family: var(--font-head);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink-muted);
  letter-spacing: 0;
  margin: 0 0 1em;
}
.jara-nugget__text { color: var(--ink-soft); }
.jara-nugget__proof {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: .93rem;
  color: var(--ink-muted);
}
.jara-nugget__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-family: var(--font-head);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold-text);
  border-bottom: 1px solid rgba(138,106,18,.45);
  padding-bottom: 3px;
}
.jara-nugget__link:hover { color: var(--ink); border-bottom-color: var(--ink); }
.jara-nugget__note {
  margin-top: 16px;
}
.jara-nugget__note span {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--gold-text);
  font-family: var(--font-head);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.jara-demos-more {
  margin-top: clamp(24px, 3vw, 34px);
  color: var(--ink-muted);
  font-size: .98rem;
}

/* =========================================================================
   12) Referenten
   ========================================================================= */
.jara-people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 30px);
}
@media (max-width: 820px) { .jara-people { grid-template-columns: 1fr; } }

.jara-person {
  padding: clamp(22px, 3vw, 34px);
  background: var(--paper);
  border: 1px solid var(--line);
}
.jara-person__head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}
.jara-person__avatar {
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  background: var(--gold-grad);
  color: var(--dark);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: .06em;
}
.jara-person__avatar--photo { object-fit: cover; }
.jara-person__name { margin: 0 0 2px; font-size: 1.12rem; }
.jara-person__role {
  margin: 0;
  font-family: var(--font-head);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.jara-person__text { color: var(--ink-muted); }
.jara-person__link {
  display: inline-block;
  margin-top: 4px;
  font-size: .93rem;
  font-weight: 600;
}
.jara-person__tag {
  display: block;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--font-head);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-text);
}

/* =========================================================================
   13) Preis + Rechtsband
   ========================================================================= */
.jara-price-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  /* stretch statt start: beide Spalten enden auf derselben Hoehe. Die
     Restdifferenz landet dadurch INNERHALB der Preiskarte, wo der CTA sie
     als Fusszeile aufnimmt (siehe .jara-price), statt als leere Flaeche
     neben oder unter einer der Spalten. */
  align-items: stretch;
}
@media (max-width: 820px) { .jara-price-wrap { grid-template-columns: 1fr; } }
/* Seit 12.08.2026 steht die Preiskarte allein (Jasmins Kuerzungsrunde:
   beide Seitenkaesten gestrichen) — solo mittig statt volle Breite. */
.jara-price-wrap--solo {
  grid-template-columns: min(560px, 100%);
  justify-content: center;
}

.jara-price {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: clamp(28px, 3vw, 40px) clamp(24px, 3vw, 38px) clamp(24px, 3vw, 38px);
}
/* Der Fuss der Karte (Zahlungs-Zusatz + CTA) sitzt an der Unterkante — so ist
   die Karte auf beliebiger Hoehe abgeschlossen und der Knopf steht auf einer
   Linie mit dem Ende der rechten Spalte. */
.jara-price__reassure {
  margin-top: auto;
  padding-top: 18px;
  margin-bottom: 16px;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--ink-muted);
}
.jara-price::before {
  /* Gold-Verlauf nur an der Oberkante (border-image wuerde alle vier
     Kanten faerben und den hellen Rahmen zerstoeren). */
  content: "";
  position: absolute;
  left: -1px; right: -1px; top: -1px;
  height: 4px;
  background: var(--gold-grad);
}
.jara-price__name {
  display: block;
  font-family: var(--font-head);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 10px;
}
.jara-price__amount {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.03em;
  margin: 6px 0 4px;
}
.jara-price__amount small {
  display: block;
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: .92rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-muted);
}
.jara-price__list { list-style: none; margin: 22px 0 26px; padding: 0; }
.jara-price__list li {
  position: relative;
  padding: 0 0 12px 26px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-muted);
}
.jara-price__list li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
/* Ein System fuer die ganze Seite: goldenes Haekchen = enthalten/trifft zu,
   grauer Strich = nicht enthalten/trifft nicht zu. Die Leistungsliste im Preis
   ist eine Enthalten-Liste und hatte vorher denselben Strich wie die
   Ausschlusslisten. */
.jara-price__list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .42em;
  width: 7px;
  height: 12px;
  border: solid var(--gold-deep);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* Rechte Preis-Spalte. Bis 06.08.2026 stand hier unter dem einen Kasten eine
   leere Flaeche von ~508 x 446 px (durchgehend #F7F7F7, von 900 bis 1440 px).
   Jetzt drei gestapelte Kaesten mit gleichem Abstand. */
.jara-price-side {
  display: grid;
  gap: clamp(16px, 2vw, 22px);
  align-content: start;
}

.jara-price-note {
  margin: 0;
  padding: 16px 18px;
  background: var(--cream);
  font-size: .95rem;
  color: var(--ink-soft);
}

.jara-side-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  padding: clamp(18px, 2.2vw, 26px);
}
.jara-side-card--plain { border-left-color: var(--line-strong); }
.jara-side-card__label {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-head);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.jara-side-card--plain .jara-side-card__label { color: var(--ink-muted); }
.jara-side-card__list { list-style: none; margin: 0; padding: 0; }
.jara-side-card__list li {
  position: relative;
  padding: 0 0 11px 24px;
  margin-bottom: 11px;
  border-bottom: 1px solid var(--line);
  font-size: .93rem;
  line-height: 1.6;
  color: var(--ink-muted);
}
.jara-side-card__list li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.jara-side-card__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .38em;
  width: 7px;
  height: 12px;
  border: solid var(--gold-deep);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* "Nicht im Preis": Strich statt Haken, sonst liest sich die Liste wie eine
   Leistungsaufzaehlung. */
.jara-side-card__list--minus li::before {
  left: 0;
  top: .7em;
  width: 12px;
  height: 2px;
  border: 0;
  background: var(--line-strong);
  transform: none;
}

.jara-legal {
  margin-top: clamp(28px, 4vw, 48px);
  padding: clamp(22px, 3vw, 34px);
  background: var(--paper);
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
}
@media (max-width: 820px) { .jara-legal { grid-template-columns: 1fr; } }
.jara-legal__label {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-head);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
}
.jara-legal p { font-size: .93rem; line-height: 1.65; color: var(--ink-muted); }
.jara-legal__links { font-weight: 600; }

/* Kleingedrucktes (seit 11.08.2026): eigene Sektion am Seitenende fuer die
   Rechts- und Abwicklungstexte, die vorher als Textwand in Preis- und
   Anmelde-Sektion standen (Feedback Mario). Der .jara-legal-Kasten verliert
   hier Rahmen und Abstand und schrumpft — lesbar, aber eindeutig
   Kleingedrucktes.
   NACHGESCHAERFT 11.08.2026 (2. Feedback-Runde Mario): .8rem war "gleich
   gross wie der restliche Text und viel zu gross" -> .72rem; ausserdem der
   Abstand Titel->Inhalt und die Sektions-Polster verkleinert, damit der
   Block kompakt unter der Anmeldung sitzt statt wie eine eigene grosse
   Sektion zu wirken. */
.jara-fineprint {
  padding: clamp(22px, 3vw, 34px) 0 clamp(26px, 3.5vw, 40px);
  background: var(--paper);
  border-top: 1px solid var(--line);
}
/* Der Uebergang Anmeldung -> Kleingedrucktes: der volle Sektions-Polster
   (--sec, bis 104px) liess dort ein graues Loch stehen (Feedback Mario,
   11.08.2026) — am Ende der Seite darf der Rhythmus enger sein. */
#anmeldung.jara-section--alt { padding-bottom: clamp(36px, 5vw, 64px); }
/* Titel zentriert (3. Feedback-Runde Mario, 11.08.2026: "noch immer nicht
   gescheit zentriert") — er sitzt mittig ueber dem zweispaltigen Block. */
.jara-fineprint__title {
  margin: 0 0 14px;
  font-family: var(--font-head);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
}
.jara-fineprint .jara-legal {
  margin-top: 0;
  padding: 0;
  background: transparent;
  border: 0;
  gap: clamp(16px, 2.5vw, 36px);
}
/* .72rem war Mario immer noch zu gross -> .66rem (~10.5px gegen 17px
   Fliesstext). Kleiner geht kaum, ohne unleserlich zu werden. */
.jara-fineprint .jara-legal p { font-size: .66rem; line-height: 1.5; margin-bottom: .9em; }
.jara-fineprint .jara-legal__label { font-size: .56rem; margin-bottom: 7px; }

/* Ein-Zeilen-Verweis in der Preis-Sektion auf das Kleingedruckte. */
.jara-legalnote {
  margin: clamp(24px, 3vw, 36px) 0 0;
  font-size: .85rem;
  color: var(--ink-muted);
  text-align: center;
}

/* =========================================================================
   14) FAQ
   ========================================================================= */
.jara-faq { border-top: 1px solid var(--line); max-width: 62rem; }
.jara-faq__item { border-bottom: 1px solid var(--line); }
.jara-faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 44px 20px 0;
  position: relative;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink);
  line-height: 1.4;
}
.jara-faq__item summary::-webkit-details-marker { display: none; }
.jara-faq__item summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 14px;
  height: 2px;
  background: var(--gold-deep);
  transform: translateY(-50%);
}
.jara-faq__item summary::before {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 2px;
  height: 14px;
  background: var(--gold-deep);
  transform: translateY(-50%);
  transition: opacity .18s ease;
}
.jara-faq__item[open] summary::before { opacity: 0; }
.jara-faq__item summary:hover { color: var(--gold-deep); }
.jara-faq__body { padding: 0 0 22px; max-width: 62ch; }
.jara-faq__body p { color: var(--ink-muted); font-size: 1rem; }

/* =========================================================================
   15) Anmeldung: Ablaufkasten + Formular
   ========================================================================= */
.jara-signup {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 46px);
  align-items: start;
}
@media (max-width: 900px) { .jara-signup { grid-template-columns: 1fr; } }

/* Linke Spalte der Anmeldung: Ablaufkasten + Kurzuebersicht. Vorher stand
   unter dem Ablaufkasten eine leere Flaeche von ~465 x 339 px, waehrend das
   Formular rechts weiterlief. */
.jara-signup__side {
  display: grid;
  gap: clamp(18px, 2.4vw, 26px);
  align-content: start;
}

.jara-recap {
  background: var(--cream);
  padding: clamp(20px, 2.4vw, 28px);
}
.jara-recap__label {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-head);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-on-cream);
}
.jara-recap__list { margin: 0; }
.jara-recap__list > div {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 10px 14px;
  padding: 11px 0;
  border-top: 1px solid rgba(32, 33, 36, .13);
}
.jara-recap__list > div:first-child { border-top: 0; padding-top: 0; }
.jara-recap__list > div:last-child { padding-bottom: 0; }
.jara-recap__list dt {
  padding-top: 2px;
  font-family: var(--font-head);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.jara-recap__list dd {
  margin: 0;
  font-size: .93rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}
@media (max-width: 420px) {
  .jara-recap__list > div { grid-template-columns: 1fr; gap: 3px; }
}

.jara-terms {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
  padding: clamp(22px, 3vw, 32px);
}
.jara-terms__title { font-size: 1.05rem; margin-bottom: 1em; }
.jara-terms__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: jara-terms;
}
.jara-terms__list li {
  counter-increment: jara-terms;
  position: relative;
  padding: 0 0 16px 40px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
  font-size: .96rem;
  color: var(--ink-muted);
}
.jara-terms__list li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.jara-terms__list li::before {
  content: counter(jara-terms);
  position: absolute;
  left: 0;
  top: 1px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: var(--gold-grad);
  color: var(--dark);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .8rem;
}
.jara-terms__contact {
  margin-top: 18px;
  font-size: .93rem;
  color: var(--ink-muted);
}

/* --- Formular ---------------------------------------------------------- */
.jara-form {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: clamp(22px, 3vw, 34px);
}
.jara-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.jara-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 560px) { .jara-form__row { grid-template-columns: 1fr; } }

.jara-field { margin-bottom: 18px; }
.jara-field label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--font-head);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}
.jara-field input,
.jara-field select,
.jara-field textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  /* 16px Minimum: alles darunter zoomt iOS beim Antippen hinein. */
  font-size: 16px;
  line-height: 1.5;
  transition: border-color .16s ease, box-shadow .16s ease;
  -webkit-appearance: none;
  appearance: none;
}
.jara-field textarea { min-height: 108px; resize: vertical; }
.jara-field select {
  /* eigener Pfeil, weil appearance:none den Systempfeil entfernt */
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.jara-field input::placeholder,
.jara-field textarea::placeholder { color: #9A9CA4; }
.jara-field input:focus,
.jara-field select:focus,
.jara-field textarea:focus {
  outline: none;
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 2px rgba(209,157,27,.28);
}
.jara-field input[aria-invalid="true"],
.jara-field select[aria-invalid="true"],
.jara-field textarea[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px rgba(179,38,30,.16);
}
.jara-field__hint {
  margin: 7px 0 0;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* Zustimmung. Die Klasse .ws-check ist PFLICHT: ki-workshop.js sucht sie
   ueber checkBox.closest('.ws-check') und setzt darauf .is-invalid. */
.ws-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 6px 0 20px;
  padding: 16px;
  background: var(--paper-alt);
  border: 1px solid var(--line);
}
.ws-check input[type="checkbox"] {
  flex: 0 0 auto;
  /* 24 px = Mindest-Trefferflaeche nach WCAG 2.2 (2.5.8). Das Label ist
     ohnehin klickbar, aber die Box selbst war mit 20 px darunter. */
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--gold-deep);
}
.ws-check label {
  font-size: .93rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.ws-check.is-invalid {
  border-color: var(--danger);
  background: rgba(179,38,30,.06);
}

.jara-form__hint {
  margin: 14px 0 0;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* Statuszeile. ki-workshop.js setzt .is-error / .is-success und schreibt
   mehrzeiligen Text hinein — deshalb white-space: pre-line. */
.jara-status {
  margin-top: 18px;
  padding: 16px 18px;
  border-left: 4px solid var(--line-strong);
  background: var(--paper-alt);
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.65;
  white-space: pre-line;
}
.jara-status.is-success {
  border-left-color: var(--gold);
  background: var(--cream);
  color: var(--ink);
}
.jara-status.is-error {
  border-left-color: var(--danger);
  background: rgba(179,38,30,.06);
  color: #7A1C16;
}

/* =========================================================================
   16) Mobiler Sicherungs-CTA (ki-workshop.js blendet ihn ein/aus)
   ========================================================================= */
.ws-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 16px calc(15px + env(safe-area-inset-bottom, 0px));
  /* Gold-Kante als Hintergrundstreifen — border-image faerbt sonst alle Kanten. */
  background: linear-gradient(90deg, #D19D1B 0%, #FFE195 100%) top left / 100% 3px no-repeat, #fff;
  box-shadow: 0 -6px 24px rgba(27,27,34,.14);
}
.ws-sticky__info { display: flex; flex-direction: column; line-height: 1.25; }
.ws-sticky__info strong {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--ink);
}
.ws-sticky__info span { font-size: .8rem; color: var(--ink-muted); }
.ws-sticky__btn { flex: 0 0 auto; }

@media (min-width: 900px) {
  /* Auf dem Desktop nicht noetig — dort steht der CTA im Blickfeld. */
  .ws-sticky { display: none !important; }
}

/* =========================================================================
   17) Fuss — hier muss sichtbar bleiben, wer die Seite betreibt
   ========================================================================= */
.jara-footer {
  background: var(--dark-grad);
  color: var(--bluegrey);
  /* oben KEIN padding: die Gold-Kante (::before) muss an der Oberkante des
     Bandes sitzen, nicht mitten im Dunkel schweben. */
  padding: 0 0 28px;
}
.jara-footer::before {
  content: "";
  display: block;
  height: 3px;
  background: var(--gold-grad);
  margin-bottom: clamp(40px, 6vw, 64px);
}
.jara-footer a { color: #fff; }
.jara-footer a:hover { color: var(--gold-light); }

.jara-footer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px);
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
@media (max-width: 760px) { .jara-footer__grid { grid-template-columns: 1fr; } }

.jara-footer__label {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-head);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.jara-footer p { font-size: .93rem; line-height: 1.7; }
.jara-footer__logo { margin-bottom: 14px; }
.jara-footer__logo img { width: 150px; height: auto; }

.jara-footer__bottom {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: space-between;
  font-size: .85rem;
}
.jara-footer__bottom a { text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); }

/* =========================================================================
   18) Bewegung reduzieren
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}