@font-face{font-family:"Space Grotesk";src:url("/fonts/SpaceGrotesk-300-700.f80326e2.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/Inter-100-900.818e7d7c.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/IBMPlexMono-400.3ce9d425.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/IBMPlexMono-500.1e27e383.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/IBMPlexMono-600.6f3abd68.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/IBMPlexMono-700.5418228a.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"tabler-icons-outline";font-style:normal;font-weight:400;font-display:block;src:url("/fonts/tabler-icons.e35f1e03.woff2") format("woff2")}
.ti{font-family:"tabler-icons-outline" !important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.ti-adjustments:before{content:"\ea03"}
.ti-arrow-down:before{content:"\ea16"}
.ti-arrow-left:before{content:"\ea19"}
.ti-arrow-right:before{content:"\ea1f"}
.ti-arrows-shuffle:before{content:"\f000"}
.ti-bolt:before{content:"\ea38"}
.ti-brand-linkedin:before{content:"\ec8c"}
.ti-browser:before{content:"\ebb7"}
.ti-building-store:before{content:"\ea4e"}
.ti-bulb:before{content:"\ea51"}
.ti-calendar-check:before{content:"\f824"}
.ti-calendar-heart:before{content:"\f82a"}
.ti-chart-arrows:before{content:"\ee2a"}
.ti-chart-bar:before{content:"\ea59"}
.ti-check:before{content:"\ea5e"}
.ti-chevron-down:before{content:"\ea5f"}
.ti-chevron-right:before{content:"\ea61"}
.ti-chevron-up:before{content:"\ea62"}
.ti-circle-check:before{content:"\ea67"}
.ti-clock:before{content:"\ea70"}
.ti-database:before{content:"\ea88"}
.ti-device-desktop-analytics:before{content:"\ee77"}
.ti-file-invoice:before{content:"\eb67"}
.ti-filter:before{content:"\eaa5"}
.ti-hammer:before{content:"\ef91"}
.ti-heart-handshake:before{content:"\f0f3"}
.ti-help-circle:before{content:"\f91d"}
.ti-inbox:before{content:"\eac4"}
.ti-leaf:before{content:"\ed4f"}
.ti-loader-2:before{content:"\f226"}
.ti-mail:before{content:"\eae5"}
.ti-map-2:before{content:"\eae7"}
.ti-map-question:before{content:"\fbd0"}
.ti-message-chatbot:before{content:"\f38a"}
.ti-microphone:before{content:"\eaf0"}
.ti-phone-call:before{content:"\eb05"}
.ti-phone-check:before{content:"\ec05"}
.ti-point:before{content:"\eb0c"}
.ti-robot:before{content:"\f00b"}
.ti-scale:before{content:"\ebc2"}
.ti-school:before{content:"\ecf7"}
.ti-search:before{content:"\eb1c"}
.ti-seeding:before{content:"\ed51"}
.ti-settings:before{content:"\eb20"}
.ti-sparkles:before{content:"\f6d7"}
.ti-target-arrow:before{content:"\f51a"}
.ti-tools:before{content:"\ebca"}
.ti-trending-up:before{content:"\eb43"}
.ti-users-group:before{content:"\fa21"}
.ti-writing:before{content:"\ef08"}
/* LIKEDIGIT — Farbwelt ("Signalklar") — see BRANDING.md §3 */
:root {
  /* ---- Base brand palette ---- */
  --ld-elektroblau: #1C4FFF;   /* Primary: logo, links, secondary buttons, focus, structure. NOT a large fill. */
  --ld-sonnengelb:  #FFC42E;   /* Sole CTA color. Max ONE yellow button per screen. Never a large surface. */
  --ld-tiefsee:     #0A1F35;   /* Primary text; darkest value in system. */
  --ld-dunst:       #DFE8FA;   /* Card / panel / sidebar surface; badge/tag background. */
  --ld-papier:      #F5F8FC;   /* Page background — deliberately never pure white. */
  --ld-white:       #FFFFFF;

  /* ---- Derived interaction values ---- */
  --ld-sonnengelb-hover: #F0AC00; /* Sonnengelb, HSL lightness -12% */
  --ld-elektroblau-45:   #93ACFD; /* Elektroblau at 45% opacity over Papier (disabled secondary) */

  /* ---- Semantic status (deliberately outside brand palette; no amber/orange) ---- */
  --ld-success: #0F7A42; /* Erfolg-Grün */
  --ld-warning: #BF3D24; /* Warnung-Koralle */
  --ld-error:   #A82727; /* Fehler-Rot */
  --ld-info:    #1C4FFF; /* reuses Elektroblau */

  /* ---- Form field border washes (Tiefsee wash — no new brand hue) ---- */
  --ld-field-border:       #BAC2CA; /* Tiefsee 25% on Papier — default */
  --ld-field-border-hover: #97A1AC; /* Tiefsee 40% on Papier — hover */

  /* ---- Semantic aliases (light mode default) ---- */
  --surface-page:      var(--ld-papier);
  --surface-card:      var(--ld-dunst);
  --surface-card-alt:  var(--ld-papier);
  --surface-highlight: var(--ld-elektroblau);
  --surface-badge:     var(--ld-dunst);

  --text-primary:   var(--ld-tiefsee);
  --text-on-cta:    var(--ld-tiefsee);
  --text-on-dark:   var(--ld-white);
  --text-link:      var(--ld-elektroblau);
  --text-badge:     var(--ld-elektroblau);
  --text-placeholder: rgba(10,31,53,0.45);
  --text-muted:     rgba(10,31,53,0.65);

  --border-field:       var(--ld-field-border);
  --border-field-hover: var(--ld-field-border-hover);
  --border-focus:       var(--ld-elektroblau);

  --cta-bg:       var(--ld-sonnengelb);
  --cta-bg-hover: var(--ld-sonnengelb-hover);
  --cta-text:     var(--ld-tiefsee);

  --focus-ring: var(--ld-elektroblau); /* on Tiefsee surfaces use --focus-ring-dark */
  --focus-ring-dark: var(--ld-white);
}

/* ---- Dark Mode: Tiefsee becomes the background (see BRANDING.md §3.6) ---- */
:root[data-theme="dark"], .ld-dark {
  --ld-dark-surface: #103357;
  --ld-elektroblau-dark: #7896FF;
  --ld-success-dark: #16B05F;
  --ld-warning-dark: #E37E6B;
  --ld-error-dark:   #E17D7D;
  --ld-field-border-dark:       #496480; /* Papier 25% on Dark-Surface */
  --ld-field-border-dark-hover: #607891; /* Papier 35% on Dark-Surface */

  --surface-page:      var(--ld-tiefsee);
  --surface-card:      var(--ld-dark-surface);
  --surface-card-alt:  var(--ld-dark-surface);
  --surface-highlight: var(--ld-elektroblau-dark);
  --surface-badge:     var(--ld-dark-surface);

  --text-primary:   var(--ld-papier);
  --text-on-dark:   var(--ld-papier);
  --text-link:      var(--ld-elektroblau-dark);
  --text-badge:     var(--ld-elektroblau-dark);
  --text-placeholder: rgba(245,248,252,0.45);
  --text-muted:     rgba(223,232,250,0.75);

  --border-field:       var(--ld-field-border-dark);
  --border-field-hover: var(--ld-field-border-dark-hover);
  --border-focus:       var(--ld-elektroblau-dark);

  --success: var(--ld-success-dark);
  --warning: var(--ld-warning-dark);
  --error:   var(--ld-error-dark);

  --focus-ring: var(--ld-elektroblau-dark);
}

/* LIKEDIGIT — Typografie ("Signalklar") — see BRANDING.md §4 */
:root {
  /* Families */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif; /* Headlines, kicker, logo type */
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;      /* Body, buttons, navigation */
  --font-mono:    "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace; /* Numbers, labels, AI/tech details */

  /* Weights */
  --fw-display-medium: 500; /* @kind font */
  --fw-display-bold:   700; /* @kind font */
  --fw-body-regular:   400; /* @kind font */
  --fw-body-medium:    500; /* @kind font */
  --fw-body-semibold:  600; /* @kind font */
  --fw-mono:           500; /* @kind font */

  /* Type scale — Major Third (1.25), base 16px: 16→20→25→31→39→49→61 */
  --fs-body:    16px;
  --fs-caption: 14px; /* Labels / meta — outside the 1.25 scale (practical legibility floor) */
  --fs-h6: 20px;
  --fs-h5: 25px;
  --fs-h4: 31px;
  --fs-h3: 39px;
  --fs-h2: 48px;
  --fs-h1: 61px;

  /* Line-heights */
  --lh-body: 1.5; /* @kind font */
  --lh-h1: 1.2; /* @kind font */
  --lh-h2: 1.25; /* @kind font */
  --lh-h3: 1.25; /* @kind font */
  --lh-h4: 1.3; /* @kind font */
  --lh-h5: 1.35; /* @kind font */
  --lh-h6: 1.4; /* @kind font */
}

/* LIKEDIGIT — Spacing, Grid & Radius — see BRANDING.md §5.1, §6.3-6.4 */
:root {
  /* Spacing scale — base 8px, 4px micro-step, 12px half-step. No freehand values. */
  --sp-4:   4px;
  --sp-8:   8px;
  --sp-12:  12px;
  --sp-16:  16px;
  --sp-24:  24px;
  --sp-32:  32px;
  --sp-48:  48px;
  --sp-64:  64px;
  --sp-96:  96px;
  --sp-128: 128px;

  /* Grid / container */
  --container-max: 1200px;
  --gutter-desktop: 24px;
  --gutter-mobile: 16px;
  --page-pad-desktop: 32px;
  --page-pad-tablet: 24px;
  --page-pad-mobile: 16px;

  /* Radius scale */
  --radius-control: 4px;  /* checkbox */
  --radius-button:  6px;  /* buttons, inputs */
  --radius-card:    12px; /* cards, panels */
  --radius-pill:    999px;/* badges, tags */
  --radius-circle:  50%;  /* radio, avatar */

  /* Elevation (subtle only — no glow/3D per brand) */
  --shadow-card:       0 4px 12px rgba(0,0,0,0.06);
  --shadow-card-hover: 0 8px 20px rgba(0,0,0,0.10);

  /* Focus */
  --focus-width: 2px;
  --focus-offset: 2px;

  /* Motion */
  --ease: ease; /* @kind other */
  --dur-fast: 150ms; /* @kind other */
}

/* LIKEDIGIT — base element defaults derived from the type & color tokens */
:root {
  color-scheme: light;
}
:root[data-theme="dark"] { color-scheme: dark; }

body {
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--text-primary); margin: 0; text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: var(--fw-display-bold); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-display-bold); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-display-bold); line-height: var(--lh-h3); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-display-bold); line-height: var(--lh-h4); }
h5 { font-size: var(--fs-h5); font-weight: var(--fw-display-medium); line-height: var(--lh-h5); }
h6 { font-size: var(--fs-h6); font-weight: var(--fw-display-medium); line-height: var(--lh-h6); }

p { margin: 0; text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; color: color-mix(in srgb, var(--text-link) 78%, black); }

code, kbd, samp { font-family: var(--font-mono); }

:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
/* On Tiefsee / dark surfaces, switch the ring to white */
.on-tiefsee :focus-visible, .ld-dark :focus-visible { outline-color: var(--focus-ring-dark); }

::selection { background: var(--ld-elektroblau); color: var(--ld-white); }