/* =========================================================================
   demo-jara.css
   Stylesheet der Klick-Demo "E-Mail-Assistent" in der Fassung im Design der
   JARA AGENCY. Gegenstueck: /demos/email-assistent/ (Nevolox-Look, dunkel).

   BEWUSST EIGENSTAENDIG:
   - laedt NICHT demos/_kit/demo-kit.css (das ist das dunkle Nevolox-Theme;
     jede Regel dort muesste hier wieder ueberschrieben werden),
   - importiert NICHT /ki-workshop-jara.css. Grund: diese Datei traegt 44 kB
     Landingpage-Regeln, und die Landingpage soll nach Jasmins Entscheidung
     verschwinden koennen, ohne dass die Demo mitstirbt.
   Die Tokens unten sind aus /ki-workshop-jara.css uebernommen (dort am
   06.08.2026 von jaraagency.at ausgelesen) — identische Werte, damit beide
   Seiten wirklich gleich aussehen.

   CSP: nevolox.at laeuft unter style-src 'self' / script-src 'self'.
   Deshalb liegt hier ALLES, was gestaltet — im HTML gibt es kein
   style-Element, kein style-Attribut und keinen Inline-Handler.
   (Diese Zeile bewusst ohne die wortwoertlichen Muster, damit ein
   Pruef-grep null Treffer liefert.)

   ZEICHENVORRAT: die beiden woff2-Subsets haben 231/232 Glyphen. Nachgemessen
   (10.08.2026, fontTools): -> (U+2192), Haken (U+2713), ~= (U+2248) und der
   Play-Pfeil (U+25B6) FEHLEN in beiden. Deshalb sind alle Pfeile im HTML
   inline-SVG und der Haken am Start-Knopf besteht aus zwei Rahmenkanten.
   ========================================================================= */

/* =========================================================================
   1) Schriften — selbst gehostet, keine Google-Requests.
   Die URLs sind ROOT-ABSOLUT. Relative Pfade (fonts/...) waeren aus diesem
   Unterordner heraus ein 404, und die Seite faellt dann still auf
   Systemschriften zurueck — genau der Fehler, der schon einmal passiert ist.
   ========================================================================= */
@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) Tokens
   ========================================================================= */
:root {
  --gold:          #D19D1B;
  --gold-light:    #FFE195;
  --gold-deep:     #A87C10;
  --gold-text:     #8A6A12;   /* Gold, das auf Weiss lesbar bleibt (5,06:1) */
  --gold-on-cream: #7E6011;   /* dasselbe Gold auf Creme (5,23:1) */
  --gold-grad:     linear-gradient(90deg, #D19D1B 0%, #FFE195 100%);
  --gold-grad-v:   linear-gradient(180deg, #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;
  --line-strong: #C9CACF;
  --cream:       #F7F1E4;
  --bluegrey:    #BBBDC8;

  --danger:      #B3261E;

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

  --wrap: 1180px;
  --pad:  clamp(16px, 4vw, 32px);
  --sec:  clamp(38px, 5.5vw, 68px);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Der Kopf ist sticky — ohne das verschwindet #arbeit beim Sprung. */
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.66;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Sicherung gegen horizontales Scrollen auf schmalen Schirmen. */
  overflow-x: hidden;
}

h1, h2, h3 {
  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(1.9rem, 4.6vw, 3.1rem); line-height: 1.06; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.4rem, 2.8vw, 2.05rem); line-height: 1.1; letter-spacing: -0.02em; }
h3 { font-size: clamp(1rem, 1.4vw, 1.15rem); }

/* Zweiteilige Ueberschrift (fetter Auftakt, leichter Nachsatz) — dasselbe
   Mittel wie auf ki-workshop-jara.html. Keine color-Angabe: der Span erbt. */
.ea-soft { font-weight: 400; }

p { margin: 0 0 1em; }
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, b { font-weight: 700; color: var(--ink); }
img { max-width: 100%; height: auto; display: block; }

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

.is-hidden { display: none !important; }

/* Sprunglink. Versteckt ueber transform statt left:-9999px — ein negativ
   positioniertes Element kann in die Breitenberechnung einfliessen, und genau
   das soll hier nicht passieren. */
.ea-skip {
  position: fixed;
  left: 8px; top: 8px;
  z-index: 200;
  background: var(--dark);
  color: #fff;
  padding: 12px 18px;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform .15s ease;
}
.ea-skip:focus { transform: none; }

.ea-wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.ea-section { padding: var(--sec) 0; background: var(--paper); }
.ea-section--alt   { background: var(--paper-alt); }
.ea-section--cream { background: var(--cream); }

/* Sektionskopf */
.ea-head { max-width: 54rem; margin-bottom: clamp(22px, 3vw, 34px); }

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

.ea-lead {
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  line-height: 1.66;
  color: var(--ink-muted);
  max-width: 62ch;
}

/* Kleingedruckte Herkunftszeile unter dem Vorspann — hier steht, wer die
   Seite betreibt, damit der JARA-Look niemanden in die Irre fuehrt. */
.ea-origin {
  margin: 18px 0 0;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 62ch;
}
.ea-origin a { font-weight: 600; }

/* =========================================================================
   4) Knoepfe — scharfe Ecken, Grossbuchstaben, Sperrung
   ========================================================================= */
.ea-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;
  /* darf auf schmalen Schirmen umbrechen statt ueberzulaufen */
  max-width: 100%;
  white-space: normal;
  text-align: center;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.ea-btn:hover { background: var(--ink); color: #fff; }

/* Primaerknopf = der Gold-VERLAUF mit schwarzem Rand, wie an JARAs echten
   CTAs gemessen. Kontrast des dunklen Textes am linken Verlaufsende: 6,97:1. */
.ea-btn--gold {
  background: var(--gold-grad);
  border-color: #000;
  color: var(--dark);
}
.ea-btn--gold:hover {
  background: linear-gradient(90deg, #A87C10 0%, #D19D1B 100%);
  border-color: #000;
  color: var(--dark);
}
.ea-btn[disabled] { opacity: .65; cursor: progress; }

.ea-btn__ico { flex: 0 0 auto; display: block; }

/* Haken am Ende des Durchgangs. U+2713 fehlt in beiden Schriftdateien —
   zwei Rahmenkanten sind davon unabhaengig. */
.ea-btn__check {
  display: none;
  flex: 0 0 auto;
  width: 7px; height: 12px;
  margin-right: 2px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.ea-btn.is-finished .ea-btn__ico   { display: none; }
.ea-btn.is-finished .ea-btn__check { display: block; }
/* Abgeschlossen ist ein Zustand, keine Handlung mehr — der Knopf hoert auf,
   sich wie ein Aufruf zu verhalten. Weiter geht es ueber "Nochmal". */
.ea-btn.is-finished { cursor: default; }
.ea-btn--gold.is-finished:hover { background: var(--gold-grad); }

.ea-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 26px 0 0;
}

/* =========================================================================
   5) Kopf
   ========================================================================= */
.ea-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);
}
.ea-header::after {
  content: "";
  display: block;
  height: 3px;
  background: var(--gold-grad);
}
.ea-header__inner {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 12px var(--pad);
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Wortmarke aus Text — Platzhalter, bis die echte Logodatei vorliegt.
   Aufbau wie auf ki-workshop-jara.html: "JARA" schwarz, Gold-Verlaufsstrich,
   "AGENCY" klein in Gold darunter. */
.ea-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  flex: 0 0 auto;
  text-decoration: none;
  color: var(--ink);
}
.ea-brand__mark {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  letter-spacing: .26em;
  text-transform: uppercase;
  line-height: 1;
  padding-bottom: 6px;
  /* Verlaufsstrich als Hintergrundstreifen — ein border kann keinen
     Verlauf tragen. */
  background: var(--gold-grad) bottom left / 100% 3px no-repeat;
}
.ea-brand__sub {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .55rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold-text);
  line-height: 1;
}

.ea-header__module {
  min-width: 0;
  padding-left: 16px;
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ea-header__module b {
  font-family: var(--font-head);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}
.ea-header__module span { font-size: .78rem; color: var(--ink-muted); line-height: 1.35; }

.ea-header__back {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-muted);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
.ea-header__back:hover { color: var(--ink); border-bottom-color: var(--gold); }

@media (max-width: 720px) {
  /* Untertitel raus, bevor die Leiste umbricht. */
  .ea-header__module span { display: none; }
}
@media (max-width: 520px) {
  .ea-header__module { display: none; }
}

/* =========================================================================
   6) Vorspann
   ========================================================================= */
.ea-intro { padding: clamp(30px, 5vw, 58px) 0 clamp(26px, 4vw, 46px); }
.ea-intro__inner { max-width: 46rem; min-width: 0; }

/* Zweispaltig erst ab 1040 px: darunter wuerde die Textspalte zu schmal fuer
   eine 3rem-Headline. Die Creme-Flaeche rutscht dann unter den Text. */
.ea-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 4vw, 44px);
  align-items: start;
}
@media (min-width: 1040px) {
  .ea-intro__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .ea-intro__panel { margin-top: 6px; }
}

.ea-intro__panel {
  position: relative;
  padding: clamp(22px, 2.6vw, 30px);
  background: var(--cream);
}
.ea-intro__panel::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--gold-grad);
}
.ea-intro__panel-label {
  display: block;
  margin-bottom: 16px;
  font-family: var(--font-head);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-on-cream);
}
.ea-intro__panel-note {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(32, 33, 36, .17);
  font-size: .9rem;
  line-height: 1.6;
  color: var(--ink-muted);
}
.ea-sources { list-style: none; margin: 0; padding: 0; }

/* =========================================================================
   7) SIGNATUR — die Goldschiene
   Der Verlauf ist bei JARA die Markensignatur. Hier traegt er die einzige
   Information, die sich waehrend des Durchgangs aendert: wie weit er ist.
   Waagrecht durch die vier Schritte, danach senkrecht durch den Posteingang
   (siehe .item::before) — eine Linie, zwei Stellen.
   Jeder Schritt besitzt sein eigenes Segment; die Segmente stossen ohne
   Luecke aneinander, deshalb liest das Nacheinander als eine durchlaufende
   Linie.
   ========================================================================= */
.ea-rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ea-rail__step { display: flex; flex-direction: column; min-width: 0; }
.ea-rail__bar {
  display: block;
  position: relative;
  width: 100%;
  height: 3px;
  background: rgba(32, 33, 36, .16);
}
.ea-rail__bar::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: 0;
  background: var(--gold-grad);
  transition: width .42s linear;
}
.ea-rail__step.is-lit .ea-rail__bar::after { width: 100%; }

.ea-rail__body { padding: 14px clamp(14px, 2vw, 30px) 0 0; }
.ea-rail__n {
  display: block;
  font-family: var(--font-head);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--gold-on-cream);
  margin-bottom: 6px;
}
.ea-rail__t {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(.95rem, 1.3vw, 1.08rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  /* Platz fuer zwei Zeilen reservieren: "Betriebsdaten heranziehen" bricht
     unter ~1100 px um, und ohne diese Reserve sitzen die vier Notizen
     darunter auf verschiedenen Hoehen. */
  min-height: 2.5em;
}
.ea-rail__note {
  display: block;
  margin-top: 5px;
  font-size: .87rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

@media (max-width: 720px) {
  /* Vier Spalten passen auf 390 px nicht. Die Schiene kippt senkrecht und
     behaelt dabei genau ihre Aussage. */
  .ea-rail { grid-template-columns: 1fr; }
  .ea-rail__step { flex-direction: row; gap: 16px; }
  .ea-rail__bar { width: 3px; height: auto; align-self: stretch; min-height: 46px; }
  .ea-rail__bar::after { width: 100%; height: 0; transition: height .42s linear; }
  .ea-rail__step.is-lit .ea-rail__bar::after { height: 100%; }
  .ea-rail__body { padding: 0 0 20px; }
  .ea-rail__step:last-child .ea-rail__body { padding-bottom: 0; }
  /* senkrecht braucht es die Zeilenreserve nicht */
  .ea-rail__t { min-height: 0; }
}

/* =========================================================================
   8) Arbeitsflaeche: Posteingang + Ergebnis
   ========================================================================= */
.ea-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
  align-items: start;
}
@media (max-width: 900px) { .ea-grid { grid-template-columns: 1fr; } }

.ea-panel {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  min-width: 0;
}
.ea-panel::before {
  /* Gold-Verlauf nur an der Oberkante (border-image faerbte alle Kanten). */
  content: "";
  position: absolute;
  left: -1px; right: -1px; top: -1px;
  height: 4px;
  background: var(--gold-grad);
}
.ea-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--line);
}
.ea-panel__title {
  font-family: var(--font-head);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
}
.ea-panel__meta {
  font-family: var(--font-head);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.ea-panel--sticky { position: sticky; top: 92px; }
@media (max-width: 900px) { .ea-panel--sticky { position: static; } }

/* ---------- Mail-Zeilen ---------- */
.item {
  position: relative;
  padding: 18px 22px 18px 24px;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.item:last-child { border-bottom: 0; }

/* Der senkrechte Teil der Goldschiene. Waechst pro erledigter Mail; weil die
   Zeilen ohne Abstand aneinander liegen, ergeben mehrere erledigte Mails eine
   durchgehende Linie den Posteingang hinunter. */
.item::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 3px;
  height: 0;
  background: var(--gold-grad-v);
  transition: height .5s ease;
}
.item.is-done::before { height: 100%; }

.item__row { display: flex; gap: 14px; align-items: flex-start; }
.ea-ava {
  flex: 0 0 40px;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  color: var(--ink-muted);
  font-family: var(--font-head);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
}
.item__head { min-width: 0; flex: 1 1 auto; }
.item__title {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  font-family: var(--font-head);
  font-size: .92rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.item__title .t {
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .08em;
  color: var(--ink-muted);
  flex: 0 0 auto;
}
.item__sub {
  margin-top: 3px;
  font-size: .93rem;
  font-weight: 600;
  color: var(--ink-soft);
  line-height: 1.45;
}
.item__snippet {
  margin-top: 5px;
  font-size: .87rem;
  color: var(--ink-muted);
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Ergebniszeile — klappt auf, sobald die Mail durch ist */
.item__result {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  overflow: hidden;
  padding-left: 54px;
  transition: max-height .5s ease, opacity .4s ease, margin-top .4s ease;
}
.item.is-done .item__result { max-height: 5000px; opacity: 1; margin-top: 14px; }
@media (max-width: 620px) { .item__result { padding-left: 0; } }

.ea-resline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
}
.ea-resline__action { font-size: .89rem; color: var(--ink-soft); line-height: 1.45; }

/* ---------- Einordnung: drei Stufen, keine sechs Farben ----------
   Die Stufe sagt, wie viel Aufmerksamkeit die Mail braucht — das ist die
   Information, die zaehlt. Deshalb: heller Rahmen = etwas zu tun,
   graue Flaeche = ohne Zutun erledigt, dunkle Flaeche = sofort.       */
.ea-tag {
  flex: 0 0 auto;
  padding: 5px 11px;
  font-family: var(--font-head);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ea-tag--act    { background: var(--paper); border: 1px solid var(--ink); color: var(--ink); }
.ea-tag--auto   { background: var(--paper-alt); border: 1px solid var(--line); color: var(--ink-muted); }
.ea-tag--urgent { background: var(--dark); border: 1px solid var(--dark); color: #fff; }

.detail-toggle {
  margin-left: auto;
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 8px 14px;
  font-family: var(--font-head);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  max-width: 100%;
  white-space: normal;
  text-align: left;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.detail-toggle:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- Herkunftsblatt (aufklappbar) ----------
   Das Blatt fuehrt fuer EINE Mail genau die vier Schritte der Goldschiene
   durch: gelesen, erkannt, Daten geholt, entworfen. Deshalb sind die vier
   Bloecke numeriert, und die Nummern kommen aus einem CSS-Zaehler — sie
   koennen also nicht von der tatsaechlichen Reihenfolge abweichen.
   Eine zweispaltige Anordnung war zuerst da und ist wieder raus: die
   Posteingang-Spalte ist rund 570 px breit, zweispaltig blieben fuer den
   Mailtext ~230 px, und der brach nach jedem zweiten Wort um.          */
.detail {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  transition: max-height .45s ease, opacity .35s ease, margin-top .35s ease;
}
.detail.is-open { max-height: 3400px; opacity: 1; margin-top: 14px; }

.ea-sheet {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 22px);
  padding: clamp(18px, 2.2vw, 24px);
  /* Nur die Creme-Flaeche, KEINE goldene Kante: die haette hier direkt neben
     der Goldschiene am linken Rand der Mail-Zeile gestanden — zwei
     parallele Goldlinien 80 px auseinander. Gold bleibt der Schiene und den
     Oberkanten der Flaechen vorbehalten. */
  background: var(--cream);
  counter-reset: eastep;
}
.ea-sheet__group { min-width: 0; display: flex; flex-direction: column; gap: clamp(16px, 2vw, 22px); }

.ea-label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-head);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-on-cream);
  counter-increment: eastep;
}
/* Die Nummer kommt aus dem Zaehler, nicht aus dem Markup — sie kann damit
   nicht von der wirklichen Reihenfolge im Blatt abweichen.
   KEINE eigene Farbe: --gold-deep kaeme auf der Creme-Flaeche nur auf 3,36:1
   und verfehlt bei 10 px die AA-Grenze. Die Nummer erbt --gold-on-cream
   (5,23:1) von der Beschriftung. */
.ea-label::before {
  content: counter(eastep, decimal-leading-zero) " · ";
}

.ea-mailtext,
.ea-draft {
  white-space: pre-line;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 15px 16px;
  font-size: .89rem;
  line-height: 1.62;
  color: var(--ink-soft);
}
.ea-note { font-size: .9rem; line-height: 1.6; color: var(--ink-muted); }

.ea-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ea-chip {
  padding: 4px 10px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  font-family: var(--font-head);
  font-size: .72rem;
  font-weight: 600;
  color: var(--ink-muted);
  line-height: 1.4;
}
.ea-chip--key { background: var(--dark); border-color: var(--dark); color: #fff; font-weight: 700; }

.ea-src {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid rgba(32, 33, 36, .13);
  font-size: .89rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.ea-src:first-of-type { padding-top: 0; }
.ea-src:last-child { border-bottom: 0; padding-bottom: 0; }
.ea-src__ic {
  flex: 0 0 28px;
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--gold-deep);
}
.ea-src__ic svg { display: block; width: 15px; height: 15px; }

/* =========================================================================
   9) Ergebnis-Spalte
   ========================================================================= */
.ea-stats { padding: 6px 22px 18px; }
.ea-stat {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.ea-stat:last-child { border-bottom: 0; padding-bottom: 4px; }
.ea-stat__num {
  flex: 0 0 auto;
  min-width: 1.9ch;
  text-align: right;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.95rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ea-stat__lbl { font-size: .92rem; line-height: 1.45; color: var(--ink-muted); }

/* Das dunkle Band ist die Pointe und der einzige dunkle Fleck auf der Seite —
   bei JARA ist genau das die Rolle des dunklen Verlaufs. */
.ea-result { display: none; }
.ea-result.show {
  display: block;
  position: relative;
  padding: 22px 22px 24px;
  background: var(--dark-grad);
  color: var(--bluegrey);
  animation: eaRise .5s ease both;
}
.ea-result.show::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--gold-grad);
}
.ea-result__lbl {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-head);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.ea-result__big {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.4vw, 1.95rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #FFFFFF;
}
.ea-result__sub {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.16);
  font-size: .89rem;
  line-height: 1.6;
}

@keyframes eaRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.ea-hint {
  margin: 0;
  padding: 16px 22px 20px;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--ink-muted);
  border-top: 1px solid var(--line);
}

/* =========================================================================
   10) Fuss — hier muss sichtbar bleiben, wer die Seite betreibt
   ========================================================================= */
.ea-footer {
  background: var(--dark-grad);
  color: var(--bluegrey);
  /* oben kein padding: die Gold-Kante sitzt auf der Oberkante des Bandes */
  padding: 0 0 26px;
}
.ea-footer::before {
  content: "";
  display: block;
  height: 3px;
  background: var(--gold-grad);
  margin-bottom: clamp(32px, 5vw, 52px);
}
.ea-footer a { color: #fff; }
.ea-footer a:hover { color: var(--gold-light); }

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

.ea-footer__label {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-head);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.ea-footer p { font-size: .91rem; line-height: 1.7; }
.ea-footer__logo { display: inline-block; margin-bottom: 14px; }
/* width/height muessen dem echten Seitenverhaeltnis der SVG entsprechen
   (viewBox 3000 x 691 = 4,34 : 1), sonst springt der Fuss beim Laden. */
.ea-footer__logo img { width: 150px; height: auto; }

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

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