/* Kesru · die Werte der Websites kesru.com und kesru.de (Aufgabe 450 Teil 6 für 446). Farben, Ränder, Rundung,
   Schrift und Unterstreichung kommen nur von hier: Jede Seite nennt die Datei als erste in ihrer Liste der Stile
   (alt/dokument.ts setzt sie in den <style>, @import griffe dort nicht) und nimmt nur var(--…).
   web/public/assets/werte.css und de/web/public/assets/werte.css sind gleich.
   Es sind die Werte der App aus web/app/globals.css mit denselben Namen, dort mit Messwerten belegt
   (belege/aufgabe-446.json): Text mit mindestens 4,5:1 (WCAG 2.2, 1.4.3), Ränder der Bedienelemente mit 3:1
   (1.4.11), der Fokus wie in der App. Die Website bleibt hell, denn AIR, Reception und Retell schalten ihre
   Websites nicht mit dem System um (483). Dunkle Bänder wie Kopf und Fuß tragen die Klasse auf-nacht, darin
   gelten die Werte des dunklen Themas der App, eine helle Karte darin trägt auf-hell. Signalgrün ist die Farbe
   der Marke. Die einzige Schrift ist Satoshi (Regel 5).
   Aufgabe 554: Die dunklen Flächen sind nicht mehr fast schwarz, sondern das Navy #00122e von Retell, der
   einzigen der drei Größten mit dunklen Flächen auf der Website. Retell färbt damit auch seine Hauptknöpfe auf
   Hell, darum ist --primary hier --nacht. Die Schrift bleibt hsl(240 3% 6%). Belege: belege/aufgabe-554.json */

/* Satoshi in zwei Teilen ohne Überschneidung wie in unterseite.css: die kleine Datei für Latein-1 und
   Satzzeichen, die volle nur für ihre übrigen Zeichen.
   Aufgabe 1097: font-display optional statt swap. Lighthouse maß auf Text- und Hilfeseiten bis CLS 0,225, Ursache
   „Web font loaded“ (satoshi-latin.woff2). web.dev (web.dev/articles/preload-optional-fonts, abgerufen 06.11.2026):
   „Combining <link rel="preload"> with font-display: optional is the most effective way to guarantee no layout jank
   when rendering custom fonts.“ Die Seiten laden satoshi-latin.woff2 schon per preload (alt/dokument.ts). */
@font-face {
  font-family: "Satoshi";
  src: url("/assets/schrift/satoshi-variable.woff2") format("woff2");
  font-weight: 300 900;
  font-display: optional;
  unicode-range: U+0100-0123, U+0126-012B, U+012E-0130, U+0134-0137, U+0139-0148, U+014A-014D, U+0150-0151, U+0154-016B, U+016E-017E, U+0192,
    U+01FA-01FF, U+0218-021B, U+0237, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0300-0303, U+0306-0307, U+030A-030C, U+0312, U+0326-0327, U+0335,
    U+0337-0338, U+03A9, U+03C0, U+1E80-1E85, U+1EF2-1EF3, U+2070, U+2074-2079, U+2080-2089, U+2116-2117, U+212E, U+215B-215E, U+2194-2199,
    U+2202, U+2205-2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25A0-25A1, U+25B2-25B3, U+25CA-25CB, U+25CF,
    U+262E, U+F8FF, U+FB00-FB04;
}
@font-face {
  font-family: "Satoshi";
  src: url("/assets/schrift/satoshi-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-display: optional;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2190-2193, U+2212, U+2215, U+2713, U+FEFF, U+FFFD;
}
/* Ersatz, bis Satoshi geladen ist: Arial mit den Maßen von Satoshi, damit nichts springt. Satoshi ist eine variable
   Schrift und wird mit der Stärke breiter, Arial hat nur Normal und Fett. Darum je Stärkebereich ein eigenes size-adjust,
   gemessen an der Stärke, die die Seiten darin nehmen (in Klammern), als Breite von Satoshi geteilt durch die von Arial
   über einen englischen und einen deutschen Absatz (Aufgabe 651, live am 01.11.2026). Die Überhänge sind die von Satoshi
   (1,01, 0,24 und 0,10 Geviert) geteilt durch size-adjust. Breiten der Bausteine stehen in em, nie in ch: ch ist die
   Breite der 0 der gerade geladenen Schrift, mit dem Ersatz war ein h1 mit 17ch 528 statt 693 px breit und brach in eine
   Zeile mehr um (CLS 0,09 auf der Startseite, 0,21 auf /pricing). Mit Satoshi ist 1ch bei 700 0,705em, bei 420 0,685em. */
@font-face {  /* (300) */
  font-family: "Satoshi Ersatz";
  src: local("Arial"), local("Liberation Sans"), local("Arimo");
  font-weight: 300 359;
  size-adjust: 95.61%;
  ascent-override: 105.64%;
  descent-override: 25.10%;
  line-gap-override: 10.46%;
}
@font-face {  /* (420) */
  font-family: "Satoshi Ersatz";
  src: local("Arial"), local("Liberation Sans"), local("Arimo");
  font-weight: 360 479;
  size-adjust: 98.63%;
  ascent-override: 102.40%;
  descent-override: 24.33%;
  line-gap-override: 10.14%;
}
@font-face {  /* (500) */
  font-family: "Satoshi Ersatz";
  src: local("Arial"), local("Liberation Sans"), local("Arimo");
  font-weight: 480 549;
  size-adjust: 100.80%;
  ascent-override: 100.20%;
  descent-override: 23.81%;
  line-gap-override: 9.92%;
}
@font-face {  /* (560) */
  font-family: "Satoshi Ersatz";
  src: local("Arial Bold"), local("Liberation Sans Bold"), local("Arimo Bold");
  font-weight: 550 599;
  size-adjust: 95.05%;
  ascent-override: 106.26%;
  descent-override: 25.25%;
  line-gap-override: 10.52%;
}
@font-face {  /* (640) */
  font-family: "Satoshi Ersatz";
  src: local("Arial Bold"), local("Liberation Sans Bold"), local("Arimo Bold");
  font-weight: 600 669;
  size-adjust: 96.21%;
  ascent-override: 104.98%;
  descent-override: 24.95%;
  line-gap-override: 10.39%;
}
@font-face {  /* (700) */
  font-family: "Satoshi Ersatz";
  src: local("Arial Bold"), local("Liberation Sans Bold"), local("Arimo Bold");
  font-weight: 670 900;
  size-adjust: 97.06%;
  ascent-override: 104.06%;
  descent-override: 24.73%;
  line-gap-override: 10.30%;
}

/* Was in hellen und dunklen Bändern gleich bleibt */
:root {
  --signal: #3DDC84;                    /* Signalgrün der Marke, Text darauf --signal-foreground mit 10,7:1 */
  --signal-foreground: hsl(240 3% 6%);
  --signal-hover: color-mix(in srgb, var(--signal) 80%, transparent);  /* wie der Hauptknopf der App */
  --signal-deep: #15803D;               /* Signalgrün für Schrift und Zeichen auf Hell, 5,0:1 auf Weiß */

  --shadow-card: 0 1px 2px 0 rgb(0 0 0 / .05);  /* Schatten der Karten der App (shadow-xs) */

  /* Fokus wie die Knöpfe der App: Ring 2 px in --ring mit 2 px Abstand (Aufgabe 1230, WCAG 2.2 2.4.13 „at least
     as large as the area of a 2 CSS pixel thick perimeter“, 1.4.11 mindestens 3:1). Felder mit 1 px Rand zeigen den
     Rand in --foreground und dazu --focus-width-rand, zusammen ebenfalls 2 px. */
  --focus-width: 2px;
  --focus-width-rand: calc(var(--focus-width) - 1px);
  --focus-offset: 2px;

  /* Unterstreichung wie .link in der App: in Ruhe 1 px, beim Hover 2 px, in der Farbe des Texts */
  --link-underline: 1px;
  --link-underline-hover: 2px;
  --link-offset: 3px;

  /* Rundung wie in der App */
  --radius-check: 6px;                  /* Checkbox */
  --radius-field: 10px;                 /* Feld, Auswahl */
  --radius-card: 16px;                  /* Karte, Kasten */
  --radius-dialog: 24px;                /* Fenster, große Fläche */
  --radius-pill: 9999px;                /* Knöpfe der Website, Abzeichen */

  --font-sans: "Satoshi", "Satoshi Ersatz", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Das dunkle Thema der App für dunkle Bänder (.auf-nacht), die Fläche im Navy von Retell (Aufgabe 554) */
  --nacht: #00122e;
  --nacht-foreground: #ffffff;          /* 18,6:1 */
  --nacht-muted: #ffffff0b;
  --nacht-muted-foreground: #ffffffa4;  /* #a4aab4 mit 8,0:1, auf --nacht-muted 7,6:1 */
  --nacht-border: #ffffff13;
  --nacht-input: #ffffff66;             /* #667182 mit 3,8:1, wie --input der App seit Aufgabe 554 */
  --nacht-input-hover: #ffffff8f;       /* #8f97a3 mit 6,3:1 */
  --nacht-ring: #ffffff;
}

/* Helle Fläche: die Seite und eine helle Karte in einem dunklen Band */
:root, .auf-hell {
  --background: #ffffff;
  --foreground: hsl(240 3% 6%);
  --card: #ffffff;
  --muted: #0000000b;                   /* leise Fläche, auf Weiß #f4f4f4 */
  --muted-foreground: #0000009c;        /* Nebentext, auf Weiß #636363 mit 6,0:1, auf --muted 5,8:1 */
  --subtle: #0000008f;                  /* Platzhalter, 4,95:1 auf Weiß, sonst nur für Gesperrtes */
  --accent: #0000000b;                  /* Hover von Zweitknopf und Zeilen */
  --accent-active: #0000001a;

  /* Ränder: zart für Karten und Trennlinien, kräftig für Bedienelemente (Feld, Auswahl und ihr Pfeil,
     Checkbox, Radio, Zweitknopf) */
  --border: #00000013;
  --input: #00000073;                   /* auf Weiß #8c8c8c mit 3,4:1, auf --muted 3,3:1 */
  --input-hover: #000000a6;             /* #595959 mit 7,0:1 */
  --input-disabled: #0000001a;

  --primary: var(--nacht);              /* Hauptknopf in Navy wie bei Retell, Weiß darauf 18,6:1 */
  --primary-foreground: #ffffff;
  --primary-hover: color-mix(in srgb, var(--nacht) 80%, transparent);   /* auf Weiß #334158, Weiß darauf 10,3:1 */
  --primary-active: color-mix(in srgb, var(--nacht) 70%, transparent);  /* auf Weiß #4c596c, Weiß darauf 7,1:1 */
  --disabled: hsl(0 0% 64%);            /* gesperrter Hauptknopf, Schrift darauf --disabled-foreground */
  --disabled-foreground: hsl(0 0% 89%);

  /* Zustände wie --destructive, --added und --removed der App */
  --destructive: hsl(0 74% 42%);        /* Fehlertext und Pflichtzeichen, 6,4:1 auf Weiß */
  --destructive-muted: #f5dddd;         /* Fehlermeldung, --destructive darauf 5,0:1 */
  --success: #166534;                   /* Erfolgstext und Haken, 7,1:1 auf Weiß */
  --success-muted: #ddf6e6;             /* Erfolgsmeldung, --success darauf 6,3:1 */

  --ring: hsl(240 3% 6%);
}
.auf-hell { background: var(--background); color: var(--foreground); }

/* Dunkles Band: dieselben Namen tragen die Werte des dunklen Themas der App */
.auf-nacht {
  --background: var(--nacht);
  --foreground: var(--nacht-foreground);
  --card: var(--nacht);
  --muted: var(--nacht-muted);
  --muted-foreground: var(--nacht-muted-foreground);
  --subtle: #ffffff87;
  --accent: var(--nacht-muted);
  --accent-active: #ffffff1a;
  --border: var(--nacht-border);
  --input: var(--nacht-input);
  --input-hover: var(--nacht-input-hover);
  --input-disabled: #ffffff1a;
  --primary: #ffffff;
  --primary-foreground: hsl(240 3% 6%);
  --primary-hover: #ffffffcc;
  --primary-active: #ffffffb3;
  --disabled: #72747e;                  /* gray-400 und gray-100 der App im dunklen Thema */
  --disabled-foreground: #30323a;
  --destructive: hsl(0 94% 82%);        /* 9,9:1, auf --destructive-muted 7,6:1 */
  --destructive-muted: #262840;         /* --destructive und --success zu 15 % auf --nacht wie in der App */
  --success: #86efac;                   /* 13,3:1, auf --success-muted 10,4:1 */
  --success-muted: #052d35;
  --ring: var(--nacht-ring);
  background: var(--nacht);
  color: var(--nacht-foreground);
}

/* Links im Text wie .link in der App: in der Farbe des Texts, in Ruhe unterstrichen, beim Hover dicker, der Fokus
   wie die Knöpfe */
.link {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: var(--link-underline);
  text-underline-offset: var(--link-offset);
  text-decoration-color: currentColor;
  border-radius: 2px;
  cursor: pointer;
}
.link:hover { text-decoration-thickness: var(--link-underline-hover); }
.link:focus-visible { outline: var(--focus-width) solid var(--ring); outline-offset: var(--focus-offset); }

/* Umbruch (Aufgabe 553, belege/aufgabe-553.json): Fließtext und Listen mit pretty wie bei ElevenLabs Reception, damit
   kein Absatz mit nur einem Wort in der letzten Zeile endet. Überschriften und die kurzen Werte der Faktenlisten (dd)
   ausgewogen mit balance wie dort die kurzen Texte. Nur der Stil des Umbruchs, so bleibt nowrap, wo es steht, und
   Regeln der Seiten mit Klasse gehen vor. */
body, p, li { text-wrap-style: pretty; }
dd, h1, h2, h3, h4, h5, h6 { text-wrap-style: balance; }
/* Die letzten zwei Wörter eines Absatzes in einer Zeile (alt/zusammen.ts, Aufgabe 553): Chrome lässt mit pretty lange
   Wörter und Wörter mit Bindestrich am Ende allein, so endet kein Absatz mit einem Wort allein in der letzten Zeile.
   inline-block hält die zwei Wörter zusammen, solange sie in eine Zeile passen, sonst brechen sie in sich um: Nichts
   läuft über, und kein Raster wird breiter. Lange Wortpaare passen erst ab 375 px in ihre Spalte und bleiben erst dort
   zusammen. */
.zusammen { display: inline-block; }
@media (min-width: 375px) { .zusammen-ab-375 { display: inline-block; } }