/* ============================================================
   ZEORI · Schriftfassung Inter und Covered By Your Grace

     Titel        Inter ExtraBold 800, Sperrung .035em
     Zwischentitel Inter Bold 700
     Fliesstext   Inter Light 300
     Hervorhebung, Navigation, Knoepfe   Inter Medium 500
     Augenbrauen, Registernamen, Kartenlabels,
     Kennzahl-Untertitel, Laufband       Covered By Your Grace 400

   EINBINDEN als letztes Blatt:
     zeori.css, zeori-motion.css, zeori-farben.css, zeori-schrift.css
   Weglassen genuegt, um zu Archivo und IBM Plex zurueckzukehren.

   WIE DIE GEWICHTE ZUGEORDNET SIND
   zeori.css schreibt an 93 Stellen font-weight 400, 600 oder 800.
   Diese 93 Stellen bleiben unangetastet. Stattdessen sind die
   @font-face-Blocke so deklariert, dass das gewuenschte Ergebnis
   herauskommt: bei den Titeln zeigt Gewicht 600 auf Inter 700,
   beim Text zeigt Gewicht 400 auf Inter 300 und Gewicht 600 auf
   Inter 500. Darum zwei Familiennamen, ZI-T fuer Titel und ZI-X
   fuer alles andere. Sonst muesste Gewicht 600 gleichzeitig auf
   Inter 700 und Inter 500 zeigen, was nicht geht.

   WELCHE ROLLEN DIE HANDSCHRIFT TRAEGT
   Die alte Monospace stand an 64 Stellen. Handschrift bekommen nur
   die Wortlabels: Augenbraue, Registername und alle Kartenlabels
   (.drei .dl, .wege .wl, .stufe .marke2, .akk .aeb, .fpaare .fn,
   .lb-marke, .lb-tag, .lb-trenner span, .abschluss .dauer), dazu
   der Kennzahl-Untertitel und das Laufband.
   NICHT dazu gehoeren die reinen Ordnungszahlen (.reg .nr,
   .zelle .mnr, .kette .knr, .akk .anr) und alles in den
   Demo-Fenstern, das dort Benutzeroberflaeche darstellt. Die uebrigen,
   darunter
   Navigation, Knoepfe, Formular und die Demo-Fenster, laufen in
   Inter Medium. Eine Handschrift auf einer Knopfbeschriftung
   oder in einem Formularfeld waere unleserlich.

   ZWEI BEKANNTE LUECKEN
   1. Covered By Your Grace hat kein Prozentzeichen. Auf den fuenf
      Handschrift-Rollen steht heute keine Prozentangabe, geprueft.
      Kommt spaeter eine dazu, faellt das Zeichen auf eine
      Ersatzschrift zurueck.
   2. Inter hat kein Pfeilzeichen. Der Pfeil der Textlinks kommt
      aus .tl::after{content:'\2192'} und faellt darum auf die
      Systemschrift zurueck. Bei einem Pfeil faellt das kaum auf.
   ============================================================ */

/* --- 1 · Titelschrift, Gewicht 800 und 600 ------------------- */
@font-face{font-family:'ZI-T';src:url(fonts/zeori-inter-800.woff2) format('woff2');
  font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'ZI-T';src:url(fonts/zeori-inter-700.woff2) format('woff2');
  font-weight:600;font-style:normal;font-display:swap}

/* --- 2 · Text und Beschriftung, Gewicht 400 und 600 ---------- */
@font-face{font-family:'ZI-X';src:url(fonts/zeori-inter-300.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'ZI-X';src:url(fonts/zeori-inter-500.woff2) format('woff2');
  font-weight:600;font-style:normal;font-display:swap}

/* --- 3 · Handschrift, in beiden benutzten Gewichten ---------- */
@font-face{font-family:'ZH';src:url(fonts/zeori-hand-400.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'ZH';src:url(fonts/zeori-hand-400.woff2) format('woff2');
  font-weight:600;font-style:normal;font-display:swap}

/* --- 4 · Die drei Variablen umhaengen ------------------------ */
:root{
  --d:'ZI-T',system-ui,sans-serif;
  --s:'ZI-X','Segoe UI',system-ui,sans-serif;
  --m:'ZI-X','Segoe UI',system-ui,sans-serif;
}

/* --- 5 · Sperrung der Titel ---------------------------------
   Archivo lief eng, darum standen hier negative Werte. Inter
   laeuft von Haus aus enger, die Titel bekommen Luft.          */
h1,h2,h3,h4{letter-spacing:.025em}
h1{letter-spacing:.035em}
h2{letter-spacing:.03em}
.abschluss h2{letter-spacing:.03em}
.aussage{letter-spacing:.02em}
.zwei h3,.zelle--kern h3,.karte h3{letter-spacing:.025em}
/* Zahlen laufen in derselben Schrift und folgen derselben Logik */
.kzn b,.reg .nr,.folge .fz,.lueckezahl{letter-spacing:.02em}
.wkz b,.folge strong,.kette b{letter-spacing:.02em}

/* --- 6 · Die fuenf Handschrift-Rollen ------------------------
   Versalien und weite Sperrung muessen weg. Eine Handschrift
   lebt von Ober- und Unterlaengen und vom Zusammenhang der
   Buchstaben, in Grossbuchstaben zerfaellt beides.             */
.eb,
.drei .dl,
.wege .wl,
.stufe .marke2,
.akk .aeb,
.fpaare .fn,
.lb-trenner span,
.abschluss .dauer,
.kzn span{
  font-family:'ZH',cursive;
  font-weight:400;
  letter-spacing:.01em;
  text-transform:none;
}

.eb{font-size:29px;line-height:1.25;margin-bottom:.95rem}
.drei .dl,.wege .wl,.stufe .marke2,.akk .aeb,.fpaare .fn,
.lb-trenner span,.abschluss .dauer{font-size:25px;line-height:1.25}
.kzn span{font-size:25px;line-height:1.3;margin-top:.75rem;max-width:22em}

/* Keine Verkleinerung auf dem Handy: die Groessen 29, 24 und 25 sind
   am Beispiel abgenommen worden und gelten auf jedem Geraet. */

/* --- 7 · Beschriftungen im Diagramm --------------------------
   Die vier <text>-Elemente im Produktivitaets-Diagramm tragen
   die Schrift als SVG-Attribut, nicht ueber die Variablen.
   Ohne diese Regel fielen sie auf eine System-Monospace zurueck,
   also auf genau die Anmutung, die weg sollte. CSS gewinnt gegen
   Praesentationsattribute, darum genuegt eine Regel.           */
.fig svg text,figure svg text,.diagramm svg text{
  font-family:'ZI-X','Segoe UI',system-ui,sans-serif}

/* --- 8 · Abschnittsnummerierung -----------------------------
   Die Register am Bandrand, also 01 Wissensverlust, 02 Drei
   Faelle, und dieselbe Marke-plus-Etikett-Paarung im Produktbaum.
   Sie stehen direkt neben einer grossen Zahl und tragen die
   Gliederung der Seite. In Handschrift war das zu viel Gewicht
   an einer Stelle, die nur ordnen soll. Darum klein und fein in
   Inter Medium, gesperrt und in Versalien.                     */
.reg .nm,
.lb-marke,.lb-tag{
  font-family:'ZI-X','Segoe UI',system-ui,sans-serif;
  font-weight:600;
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.reg .nm{line-height:1.5;margin-top:.55rem}

/* --- 9 · Das Laufband ---------------------------------------
   Kein Handschriftband mehr, sondern die Titelschrift im
   kleinen Grad mit viel Abstand pro Buchstabe. Die waagrechte
   Bewegung selbst steckt in zeori.css und bleibt unberuehrt.  */
.lauf span{
  font-family:'ZI-T',system-ui,sans-serif;
  font-weight:600;
  font-size:16px;
  letter-spacing:.18em;
  text-transform:none;
  line-height:1.4;
}

/* --- 10 · Telefonfeld ----------------------------------------
   Vorwahl und Nummer stehen nebeneinander. Die Auswahl bekommt
   nur so viel Platz, wie die laengste Vorwahl braucht.        */
.telzeile{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.5rem;align-items:stretch}
.telzeile select{min-width:6.6rem;
  /* Genau wie .form input in zeori.css, damit beide Felder gleich sitzen */
  border:1px solid rgba(42,31,10,.35);border-radius:3px;padding:.85rem .6rem .85rem 1rem;
  background-color:rgba(255,255,255,.72);color:#241A06;font-size:17px;
  font-family:'ZI-X','Segoe UI',system-ui,sans-serif;font-weight:400;
  /* Auswahlfelder erben die Zeilenhoehe nicht, sie stehen auf normal.
     Ohne diese Zeile ist das Feld acht Pixel niedriger als die Eingabe. */
  line-height:1.6;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#241A06 50%),linear-gradient(135deg,#241A06 50%,transparent 50%);
  background-position:calc(100% - 15px) 55%,calc(100% - 10px) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2rem}
.telzeile select:focus-visible{outline:2px solid var(--gold,#E0A344);outline-offset:2px}
.telhinweis{font-family:'ZI-X','Segoe UI',system-ui,sans-serif;font-weight:400;
  font-size:13px;line-height:1.45;opacity:.7;margin-top:.15rem}
@media(max-width:400px){
  .telzeile{grid-template-columns:minmax(0,1fr);gap:.45rem}
}

/* --- Anliegen-Auswahl im Formular ---------------------------
   Gleiche Gestalt wie die Vorwahl-Auswahl, ueber die volle Breite.
   Ohne line-height stuende das Feld acht Pixel niedriger als die
   Eingabefelder daneben, Auswahlfelder erben sie nicht.        */
#kanliegen{
  border:1px solid rgba(42,31,10,.35);border-radius:3px;
  padding:.85rem 2rem .85rem 1rem;
  background-color:rgba(255,255,255,.72);color:#241A06;font-size:17px;
  font-family:'ZI-X','Segoe UI',system-ui,sans-serif;font-weight:400;line-height:1.6;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
  appearance:none;-webkit-appearance:none;width:100%;
  background-image:linear-gradient(45deg,transparent 50%,#241A06 50%),linear-gradient(135deg,#241A06 50%,transparent 50%);
  background-position:calc(100% - 15px) 55%,calc(100% - 10px) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
#kanliegen:focus-visible{outline:2px solid var(--gold,#E0A344);outline-offset:2px}




/* ============================================================
   Demoabschnitt A · Die Suchzeile

   Fragen aus dem Alltag tippen sich selbst. Es wird nichts ueber
   das Produkt behauptet und nichts erfunden: es steht nur die
   Frage da, die der Leser aus seinem Betrieb kennt.
   ============================================================ */
.demo-a{text-align:center}
.demo-a .eb,.demo-a h2,.demo-a .lead,.demo-a .demo-spruch{margin-left:auto;margin-right:auto}
.demo-a h2{max-width:22ch;margin-top:clamp(2.2rem,5vw,3.2rem)}
.demo-a .lead{max-width:46ch}
.demo-a .knreihe{justify-content:center}

.suchzeile{display:flex;align-items:center;gap:1rem;
  border:1px solid var(--lin-d);border-radius:3px;background:#1A272A;
  padding:clamp(1rem,2.6vw,1.5rem) clamp(1.1rem,3vw,1.7rem);
  box-shadow:0 26px 70px -34px rgba(0,0,0,.85);max-width:52rem;margin:0 auto;text-align:left}
.suchzeile svg{flex:none;opacity:.5}
.tippfeld{flex:1 1 auto;min-width:0;font-size:clamp(16px,3.2vw,26px);line-height:1.35;
  color:#F4F7F7;white-space:nowrap;overflow:hidden}
.strich{display:inline-block;width:2px;height:1.05em;background:var(--ak);vertical-align:-.14em;
  margin-left:2px;animation:zblink 1.05s steps(1) infinite}
@keyframes zblink{0%,49%{opacity:1}50%,100%{opacity:0}}
.unterzeile{font-size:14px;opacity:.55;margin:1rem auto 0;max-width:46ch}
.demo-spruch{font-family:'ZH',cursive;font-weight:400;font-size:25px;line-height:1.3;
  letter-spacing:.01em;color:var(--ak);margin:1.5rem auto 1.7rem;max-width:34ch}
.demo-spruch:empty{display:none}
.demo-fuss{font-size:14px;opacity:.65;margin:1.1rem 0 0}

/* ============================================================
   Abschnitt B · Der Gruppenchat

   Fuenf Nachrichten, die nacheinander eintreffen, sobald der
   Abschnitt im Bild ist. Dazwischen tippt jemand und schreibt
   dann doch nichts. Der Verlauf traegt aria-hidden, er ist
   Anschauung und kein Inhalt.
   ============================================================ */
.demo-b{max-width:38rem}
.chat{display:flex;flex-direction:column;gap:.6rem;margin:1.8rem 0 0}
.blase{background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:14px 14px 14px 3px;
  padding:.7rem .95rem;max-width:84%;font-size:15.5px;line-height:1.45;
  box-shadow:0 8px 20px -14px rgba(0,0,0,.4);
  opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease}
.blase.da{opacity:1;transform:none}
.blase b{display:block;font-family:'ZI-X','Segoe UI',system-ui,sans-serif;font-weight:600;
  font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--a-kupfer,#2A4149);
  margin-bottom:.2rem;opacity:.75}
.blase.ich{align-self:flex-end;border-radius:14px 14px 3px 14px;background:#E9EDE9}
.blase.tippt{display:flex;gap:5px;align-items:center;padding:.9rem 1rem;max-width:none;width:auto;align-self:flex-start}
.blase.tippt i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.3;animation:zhuepf 1.25s infinite}
.blase.tippt i:nth-child(2){animation-delay:.16s}
.blase.tippt i:nth-child(3){animation-delay:.32s}
@keyframes zhuepf{0%,60%,100%{transform:translateY(0);opacity:.28}30%{transform:translateY(-5px);opacity:.8}}
.chat-fuss{font-size:15px;opacity:.75;margin:1.6rem 0 0;max-width:44ch}

@media(prefers-reduced-motion:reduce){
  .strich{animation:none;opacity:1}
  .blase{opacity:1;transform:none}
  .blase.tippt i{animation:none}
}


/* Die Knopfreihe unter dem Chat bekommt Luft nach oben. */
.demo-b .knreihe{margin-top:1.5rem}


/* ============================================================
   Workflow-Ansicht

   Nachbau der Ansicht aus der App und zugleich bedienbar:
   der Weg laesst sich umschalten, Schritte lassen sich anklicken,
   der Ablauf laesst sich durchspielen.

   Die Knoten sind Schaltflaechen, keine Kaesten. Damit sind sie
   mit der Tastatur erreichbar und werden angesagt. Der Block
   traegt deshalb kein aria-hidden mehr.

   Die Verbindungen sind CSS-Linien, kein SVG: ein SVG haette
   feste Koordinaten und wuerde beim Umbrechen verrutschen.
   ============================================================ */
.wf{
  --wf-lin:#3c4a4e;
  --wf-aktiv:#C98A2E;
  background:#F7F5F0;
  background-image:radial-gradient(1.2px 1.2px at 50% 50%,rgba(34,51,55,.2),transparent 60%);
  background-size:22px 22px;
  border:1px solid rgba(0,0,0,.1);border-radius:4px;
  padding:clamp(1.6rem,4vw,2.8rem) clamp(1rem,3vw,2rem);
  margin:1.8rem 0 1.4rem;min-width:0}
.wf-fluss{display:flex;flex-direction:column;align-items:center;gap:2.1rem;
  max-width:42rem;margin:0 auto;position:relative}

/* --- Der Knoten --- */
.wf-knoten{width:min(25rem,100%);min-width:0;display:block;text-align:left;
  background:#fff;border:1px solid var(--wf-farbe,#cfd4d5);border-radius:3px;
  box-shadow:0 10px 24px -18px rgba(0,0,0,.5);position:relative;padding:0;cursor:pointer;
  font:inherit;color:inherit;
  transition:box-shadow .25s ease,transform .25s ease,opacity .35s ease}
.wf-knoten:hover{box-shadow:0 14px 30px -18px rgba(0,0,0,.6);transform:translateY(-1px)}
.wf-knoten:focus-visible{outline:2px solid var(--wf-aktiv);outline-offset:3px}
.wf-knoten[aria-pressed="true"]{box-shadow:0 0 0 2px var(--wf-aktiv),0 14px 30px -18px rgba(0,0,0,.6)}
.wf-gruen {--wf-farbe:#2E6B4E}
.wf-gold  {--wf-farbe:#C98A2E}
.wf-dunkel{--wf-farbe:#5a6467}
.wf-kopf{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;
  border-bottom:1px solid rgba(0,0,0,.09);background:#fbfbfa;
  font-family:'ZI-X','Segoe UI',system-ui,sans-serif;font-weight:600;
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--wf-farbe)}
.wf-kopf i{font-style:normal;opacity:.55;letter-spacing:.11em}
.wf-punkt{width:8px;height:8px;background:var(--wf-farbe);flex:none}
.wf-leib{display:block;padding:.8rem .8rem .85rem;min-width:0}
.wf-titel{display:block;font-family:'ZI-X','Segoe UI',system-ui,sans-serif;font-weight:400;
  font-size:15px;line-height:1.35;color:#1d2b31}

/* --- Angehaengte Eintraege --- */
.wf-anhang{display:flex;align-items:center;gap:.5rem;margin-top:.6rem;
  border:1px solid rgba(0,0,0,.12);border-radius:2px;padding:.4rem .55rem;
  font-family:'ZI-X','Segoe UI',system-ui,sans-serif;font-size:12.5px;color:#3d4548;
  min-width:0;overflow:hidden}
.wf-anhang b{width:15px;height:15px;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:8.5px;font-weight:600;color:#fff;background:var(--an-farbe,#5a6467);border-radius:1px}
.wf-anhang i{font-style:normal;font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--an-farbe,#5a6467);flex:none}
.wf-an-t{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.wf-an-wissen{--an-farbe:#C98A2E}
.wf-an-liste,.wf-an-person{--an-farbe:#2f6a86}

/* --- Gerade Verbindungen mit Anschlusspunkt --- */
.wf-fluss > .wf-knoten:not(:last-child)::after{content:'';position:absolute;left:50%;bottom:-2.1rem;
  width:2px;height:2.1rem;background:var(--wf-lin);transform:translateX(-1px)}
.wf-fluss > .wf-knoten::before{content:'';position:absolute;left:50%;top:-4px;width:7px;height:7px;
  background:var(--wf-lin);transform:translateX(-50%)}
.wf-fluss > .wf-knoten:first-child::before{display:none}

/* --- Die Verzweigung ---------------------------------------
   Der Ja-Weg laeuft mittig durch, der Nein-Weg macht einen
   Umweg nach links. Der Umweg ist breit und flach angelegt,
   sonst schliesst sich die Figur optisch zu einem leeren
   Kasten und liest sich wie ein Knoten ohne Inhalt.          */
.wf-zweig{width:100%;position:relative;min-height:11rem;
  display:flex;justify-content:flex-start;padding-top:3.4rem}
.wf-neben{width:min(22rem,54%);min-width:0}
.wf-neben .wf-knoten{width:100%}
.wf-linie{position:absolute;pointer-events:none;transition:opacity .35s ease,background-color .35s ease,border-color .35s ease}
/* Ja: mittig durch */
.wf-l-ja{left:50%;top:-2.1rem;bottom:-2.1rem;width:2px;background:var(--wf-lin);transform:translateX(-1px)}
/* Nein hin: von der Mitte nach links, dann hinunter zum Knoten */
.wf-l-hin{left:calc(min(22rem,54%) / 2);right:50%;top:-2.1rem;height:5.5rem;
  border-left:2px solid var(--wf-lin);border-top:2px solid var(--wf-lin);border-radius:0 0 0 14px}
/* Nein zurueck: hinunter und wieder nach rechts in den Strang */
.wf-l-zurueck{left:calc(min(22rem,54%) / 2);right:50%;bottom:-2.1rem;height:3.4rem;
  border-left:2px solid var(--wf-lin);border-bottom:2px solid var(--wf-lin);border-radius:0 0 14px 0}

/* --- Die Marken an der Verzweigung --- */
.wf-marke{position:absolute;z-index:2;
  font-family:'ZI-X','Segoe UI',system-ui,sans-serif;font-weight:600;font-size:9.5px;
  letter-spacing:.13em;text-transform:uppercase;color:#6f7679;background:#F7F5F0;padding:.1rem .4rem}
.wf-m-nein{left:calc(min(22rem,54%) / 2 + .6rem);top:1.9rem}
.wf-m-ja{left:calc(50% + .6rem);top:1.9rem}

/* --- Die Zeile unter dem Schema --- */
.wf-fuss{margin:2.2rem auto 0;max-width:42rem}
.wf-hinweis{font-family:'ZI-X','Segoe UI',system-ui,sans-serif;font-size:13px;color:#6f7679}

@media(max-width:640px){
  /* Zu schmal fuer den Umweg. Der Nein-Knoten wird ein leicht
     eingerueckter Schritt in derselben Kette.                  */
  .wf-fluss{gap:1.8rem}
  .wf-zweig{padding-top:2.4rem;min-height:0;display:block}
  .wf-neben{width:100%;padding-left:1rem;border-left:2px solid rgba(60,74,78,.3)}
  .wf-l-ja,.wf-l-hin,.wf-l-zurueck{display:none}
  .wf-m-nein{left:1rem;top:0} .wf-m-ja{display:none}
  .wf-zweig::after{content:'';position:absolute;left:50%;bottom:-2.1rem;width:2px;height:2.1rem;
    background:var(--wf-lin);transform:translateX(-1px)}
  .wf-neben .wf-knoten::before{content:'';position:absolute;left:50%;top:-4px;width:7px;height:7px;
    background:var(--wf-lin);transform:translateX(-50%)}
}
@media(prefers-reduced-motion:reduce){
  .wf-knoten,.wf-linie{transition:none}
  .wf-knoten:hover{transform:none}
}/* --- Die Zeile unter dem Schema --- */
.wf-fuss{margin:2.2rem auto 0;max-width:42rem}
.wf-hinweis{font-family:'ZI-X','Segoe UI',system-ui,sans-serif;font-size:13px;color:#6f7679}

@media(max-width:640px){
  /* Zu schmal fuer den Umweg. Der Nein-Knoten wird ein leicht
     eingerueckter Schritt in derselben Kette.                  */
  .wf-fluss{gap:1.8rem}
  .wf-zweig{padding-top:2.4rem;min-height:0;display:block}
  .wf-neben{width:100%;padding-left:1rem;border-left:2px solid rgba(60,74,78,.3)}
  .wf-l-ja,.wf-l-hin,.wf-l-zurueck{display:none}
  .wf-m-nein{left:1rem;top:0} .wf-m-ja{display:none}
  .wf-zweig::after{content:'';position:absolute;left:50%;bottom:-2.1rem;width:2px;height:2.1rem;
    background:var(--wf-lin);transform:translateX(-1px)}
  .wf-neben .wf-knoten::before{content:'';position:absolute;left:50%;top:-4px;width:7px;height:7px;
    background:var(--wf-lin);transform:translateX(-50%)}
}
@media(prefers-reduced-motion:reduce){
  .wf-knoten,.wf-linie{transition:none}
  .wf-knoten:hover{transform:none}
}