/* 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 bisher NUR von der oeffentlichen Buchungsseite
   (termin.html + termin.css). Die interne Anwendung laeuft weiter ueber
   farben.css + app.css -- deren Umbau ist eine eigene Aufgabe und haette hier nur
   eine Mischform aus zwei Formensprachen erzeugt.

   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-error: #b01a45;
  --support-warning: #e37d89;
  --support-info: #5f7fc7;
  --support-success: #1f6b4f;
  --support-error-bg: #fbedf0;
  --support-warning-bg: #fcf0f1;
  --support-info-bg: #edf1fb;
  --support-success-bg: #eaf3ef;

  /* --- 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);
}