/* TA Europe Corporate Design -- Token-Ebene, uebernommen aus dem Design System
   "TA Europe Design System" (claude.ai/design, Projekt 36c7f6dc-79cc-4b8e-b3c2-7e5a0efa782f).
   Uebernommen: tokens/colors.css, tokens/typography.css, tokens/spacing.css,
   tokens/shape.css, tokens/motion.css und die Typ-Hilfsklassen aus tokens/base.css.
   Nicht uebernommen: die Notenfarben fuer TDD-Berichte (--grade-*), die es hier
   nicht gibt.

   Benutzt wird die Datei von BEIDEN Seiten: von der oeffentlichen Buchungsseite
   (termin.html + termin.css) und von der internen Anwendung (index.html, dort
   zusammen mit farben.css + app.css). Frueher stand hier, sie gelte nur aussen
   und der Umbau der Innenansicht sei "eine eigene Aufgabe" -- die ist inzwischen
   erledigt: die Token tragen jetzt beide Formensprachen, und die schmale Fassung
   der Innenansicht (web/mobil.css) hebt --field-height-sm ueber genau diese
   Ebene an. Wer hier einen Wert aendert, aendert ihn innen wie aussen.

   Schrift: das Design System nennt IBM Plex Sans und laedt sie dort von Google
   Fonts. Hier liegen die Dateien unter marke/schrift/ im Projekt. Zwei Gruende:
   die Sicherheitsregel des Servers erlaubt keine fremden Quellen (siehe die
   Content-Security-Policy in server/lib/http.js), und die Seite geht an Kunden --
   ohne Selbsthosting meldet jeder Aufruf deren IP-Adresse an einen Dritten. Es ist
   eine variable Schrift (Achse 100-700), daher eine Datei je Zeichensatz statt
   eine je Schnitt.

   SUBSTITUTIONSHINWEIS aus dem Design System: IBM Plex ist ein Platzhalter. Sobald
   TA Europe eine eigene Hausschrift lizenziert, werden die Dateien in
   marke/schrift/ ersetzt und die @font-face-Bloecke hier angepasst -- sonst nichts. */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("/marke/schrift/ibm-plex-sans-latin.woff2") format("woff2");
  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+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Zweiter Zeichensatz fuer Namen wie Wozniak oder Rehor in korrekter Schreibung --
   Kunden- und Kontaktnamen kommen aus der Datenbank, nicht aus dem Katalog. */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("/marke/schrift/ibm-plex-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

:root {
  /* --- Marke, Kern --- */
  --ta-navy: #1b2742;
  --ta-white: #ffffff;
  --ta-black: #000000;

  /* --- Marke, zweite Reihe --- */
  --ta-blue-deep: #1f3872;
  --ta-blue-mid: #5f7fc7;
  --ta-blue-pale: #c5d1f0;
  --ta-crimson: #b01a45;
  --ta-rose: #e37d89;

  /* --- Navy-Abstufungen (Flaechen und Tiefe) --- */
  --navy-10: #eef0f5;
  --navy-20: #d8dde7;
  --navy-30: #aeb7c9;
  --navy-40: #7b87a2;
  --navy-50: #4e5c7c;
  --navy-60: #1b2742;
  --navy-70: #141d33;
  --navy-80: #0e1424;
  --navy-90: #080b14;

  /* --- Blau-Abstufungen (Akzente) --- */
  --blue-10: #edf1fb;
  --blue-20: #c5d1f0;
  --blue-40: #8fa6da;
  --blue-50: #5f7fc7;
  --blue-60: #3a5ca8;
  --blue-70: #1f3872;
  --blue-80: #16294f;

  /* --- Crimson-Abstufungen (Warnung, einzelner Akzent) --- */
  --crimson-10: #fbedf0;
  --crimson-30: #e37d89;
  --crimson-50: #c93a5f;
  --crimson-60: #b01a45;
  --crimson-70: #851334;

  /* --- Kuehle Neutraltoene, auf den Navy abgestimmt --- */
  --grey-05: #f7f8fa;
  --grey-10: #f1f3f7;
  --grey-20: #e3e6ed;
  --grey-30: #cdd2dc;
  --grey-40: #a8afbd;
  --grey-50: #79808f;
  --grey-60: #5a6070;
  --grey-70: #3e4453;
  --grey-80: #282d39;
  --grey-90: #16191f;

  /* --- Status. --support-success ist eine bewusste Ergaenzung des Design Systems:
         die Markenpalette hat kein Gruen, Statusanzeigen brauchen eines.
         --support-wartend ist die zweite, aus demselben Grund: "es liegt beim
         anderen" ist weder ein Fehler noch ein Erfolg, und die Palette hat kein
         Gelb. Bernstein und nicht Gelb, weil gelbe Schrift auf Weiss nicht lesbar
         ist (reines Gelb kommt auf 1,4:1). Dieser Ton kommt auf 5,9:1 -- so viel wie das
         Gruen daneben -- und wirkt trotzdem gelb. --- */
  --support-error: #b01a45;
  --support-warning: #e37d89;
  --support-info: #5f7fc7;
  --support-success: #1f6b4f;
  --support-wartend: #8a5a00;
  --support-error-bg: #fbedf0;
  --support-warning-bg: #fcf0f1;
  --support-info-bg: #edf1fb;
  --support-success-bg: #eaf3ef;
  --support-wartend-bg: var(--amber-10);

  /* --- Bernstein als Flaeche, drei Stufen. Die dritte Ergaenzung, aus demselben
         Grund wie --support-wartend: die Markenpalette hat kein Gelb, und eine
         Reihenfolge laesst sich nur mit einer Reihe zeigen -- ein Wert allein
         sagt nichts darueber, ob etwas weiter ist als etwas anderes.

         Nur als HINTERGRUND gedacht, nie als Schrift: das ist genau die Grenze,
         an der --support-wartend zu Bernstein werden musste. Alle drei tragen
         --text-primary mit mindestens 12:1, also auch die satteste Stufe.

         --amber-10 ist zahlengleich mit dem bisherigen --support-wartend-bg; das
         steht jetzt darauf, damit derselbe Ton nicht an zwei Stellen gepflegt
         wird. Aussen wie innen aendert sich dadurch nichts. --- */
  --amber-10: #fdf5e6;
  --amber-20: #fbedcf;
  --amber-30: #f8e3b4;

  /* --- Bedeutung: Text --- */
  --text-primary: var(--ta-navy);
  --text-secondary: var(--grey-60);
  --text-placeholder: var(--grey-40);
  --text-on-dark: var(--ta-white);
  --text-on-dark-secondary: var(--navy-30);
  --text-link: var(--ta-blue-deep);
  --text-link-hover: var(--ta-crimson);
  --text-error: var(--support-error);
  --text-disabled: var(--grey-40);

  /* --- Bedeutung: Flaechen --- */
  --surface-page: var(--ta-white);
  --surface-subtle: var(--grey-10);
  --surface-card: var(--ta-white);
  --surface-card-subtle: var(--grey-05);
  --surface-inverse: var(--ta-navy);
  --surface-inverse-alt: var(--navy-70);
  --surface-accent: var(--ta-blue-pale);
  --surface-hover: var(--grey-10);
  --surface-selected: var(--blue-10);
  --surface-hover-inverse: var(--navy-50);
  --surface-overlay: rgb(8 11 20 / 72%);

  /* --- Bedeutung: Raender --- */
  --border-subtle: var(--grey-20);
  --border-default: var(--grey-30);
  --border-strong: var(--ta-navy);
  --border-inverse: var(--navy-50);

  /* --- Bedeutung: Bedienelemente --- */
  --interactive-primary: var(--ta-navy);
  --interactive-primary-hover: var(--navy-50);
  --interactive-primary-active: var(--navy-80);
  --interactive-danger: var(--ta-crimson);
  --interactive-danger-hover: var(--crimson-70);
  --focus-ring: var(--ta-blue-mid);

  /* --- Schrift. --font-mono ohne IBM Plex Mono: die Datei liegt nicht im Projekt
         und wird hier auch nirgends gebraucht. --- */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-semibold: 600;

  /* --- Typoskala des Design Systems (Carbon-Stufen). Die dichte Innenansicht
         braucht Zwischenstufen, die in den benannten Typ-Saetzen unten nicht
         vorkommen (z.B. 24px fuer Kennzahlen). --- */
  --type-01: 12px;
  --type-02: 14px;
  --type-03: 16px;
  --type-04: 18px;
  --type-05: 20px;
  --type-06: 24px;
  --type-07: 28px;
  --type-08: 32px;
  --type-09: 36px;

  /* --- Typ-Saetze: Groesse, Zeilenhoehe, Laufweite --- */
  --label-01-size: 12px;
  --label-01-lh: 1.33333;
  --label-01-ls: 0.32px;
  --label-02-size: 14px;
  --label-02-lh: 1.28572;
  --label-02-ls: 0.16px;
  --body-compact-01-size: 14px;
  --body-compact-01-lh: 1.28572;
  --body-compact-01-ls: 0.16px;
  --body-01-size: 14px;
  --body-01-lh: 1.42857;
  --body-01-ls: 0.16px;
  --body-02-size: 16px;
  --body-02-lh: 1.5;
  --heading-01-size: 14px;
  --heading-01-lh: 1.42857;
  --heading-01-ls: 0.16px;
  --heading-02-size: 16px;
  --heading-02-lh: 1.5;
  --heading-03-size: 20px;
  --heading-03-lh: 1.4;
  --heading-04-size: 28px;
  --heading-04-lh: 1.28572;
  --heading-05-size: 32px;
  --heading-05-lh: 1.25;
  --heading-06-size: 42px;
  --heading-06-lh: 1.199;
  --heading-07-size: 54px;
  --heading-07-lh: 1.19;
  --text-eyebrow-ls: 0.96px;

  /* --- Abstaende --- */
  --spacing-01: 2px;
  --spacing-02: 4px;
  --spacing-03: 8px;
  --spacing-04: 12px;
  --spacing-05: 16px;
  --spacing-06: 24px;
  --spacing-07: 32px;
  --spacing-08: 40px;
  --spacing-09: 48px;
  --spacing-10: 64px;
  --spacing-11: 80px;
  --container-text: 720px;
  /* Produktrahmen */
  --header-height: 48px;
  --sidenav-width: 256px;
  --field-height-sm: 32px;
  --field-height-md: 40px;
  --field-height-lg: 48px;

  /* --- Form. Das System ist eckig: 0 ist die Vorgabe, 2px die einzige erlaubte
         Abrundung (Eingabefelder, Etiketten). --- */
  --radius-none: 0;
  --radius-sm: 2px;
  /* Pille: im System nur fuer Statuspunkte und Avatare. */
  --radius-pill: 999px;
  --border-width-sm: 1px;
  --border-width-md: 2px;
  --border-width-accent: 4px;
  --focus-ring-width: 2px;
  --focus-ring-offset: 1px;

  /* --- Erhebung: Karten auf Weiss tragen Raender, keine Schatten. Schatten sind
         fuer Dinge, die schweben (Menues, Dialoge, klebende Leisten). --- */
  --shadow-md: 0 2px 8px rgb(27 39 66 / 12%);
  --shadow-lg: 0 8px 24px rgb(27 39 66 / 16%);
  --shadow-overlay: 0 16px 48px rgb(8 11 20 / 28%);
  /* Ergaenzung: dieselben Werte wie --shadow-lg, nur nach oben -- fuer eine
     klebende Leiste am unteren Rand, unter der der Inhalt weiterlaeuft. */
  --shadow-oben: 0 -8px 24px rgb(27 39 66 / 16%);

  /* --- Bewegung --- */
  --duration-fast-02: 110ms;
  --ease-standard-productive: cubic-bezier(0.2, 0, 0.38, 0.9);
  --transition-hover: background-color var(--duration-fast-02) var(--ease-standard-productive),
    color var(--duration-fast-02) var(--ease-standard-productive),
    border-color var(--duration-fast-02) var(--ease-standard-productive);
}

/* Typ-Hilfsklassen aus tokens/base.css -- nur die hier gebrauchten. */
.ta-heading-04 {
  font-size: var(--heading-04-size);
  line-height: var(--heading-04-lh);
}
.ta-heading-03 {
  font-size: var(--heading-03-size);
  line-height: var(--heading-03-lh);
}
.ta-heading-02 {
  font-size: var(--heading-02-size);
  line-height: var(--heading-02-lh);
  font-weight: var(--weight-semibold);
}
.ta-body-02 {
  font-size: var(--body-02-size);
  line-height: var(--body-02-lh);
}
.ta-body-01 {
  font-size: var(--body-01-size);
  line-height: var(--body-01-lh);
  letter-spacing: var(--body-01-ls);
}
.ta-label-01 {
  font-size: var(--label-01-size);
  line-height: var(--label-01-lh);
  letter-spacing: var(--label-01-ls);
}
.ta-eyebrow {
  font-size: var(--label-01-size);
  line-height: 1.33;
  letter-spacing: var(--text-eyebrow-ls);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--ta-blue-deep);
}