/* Tokens (scoped to .fl so they never touch GeneratePress variables like --accent).
   Generated from drafts/design-md/05-engineered-hardware__azure-amber/DESIGN.md by design-draft/tokens_css.py — do not edit. */
.fl {
  --surface: #ffffff;
  --surface-dim: #d2d2dc;
  --surface-bright: #ffffff;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f5f5f8;
  --surface-container: #eeeef3;
  --surface-container-high: #e6e6ee;
  --surface-container-highest: #dadae5;
  --on-surface: #232323;
  --on-surface-variant: #5a5d68;
  --inverse-surface: #1e2126;
  --inverse-on-surface: #f5f5f8;
  --outline: #7d8091;
  --outline-variant: #dadae5;
  --surface-tint: #0070be;
  --primary: #0070be;
  --on-primary: #ffffff;
  --primary-container: #0070be;
  --on-primary-container: #ffffff;
  --inverse-primary: #a0caff;
  --secondary: #0078ca;
  --on-secondary: #ffffff;
  --secondary-container: #0070be;
  --on-secondary-container: #ffffff;
  --tertiary: #8a6200;
  --on-tertiary: #ffffff;
  --tertiary-container: #ffdea1;
  --on-tertiary-container: #261900;
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #93000a;
  --primary-fixed: #d2e4ff;
  --primary-fixed-dim: #a0caff;
  --on-primary-fixed: #001c37;
  --on-primary-fixed-variant: #00497e;
  --secondary-fixed: #dbe9ff;
  --secondary-fixed-dim: #aacfff;
  --on-secondary-fixed: #001c37;
  --on-secondary-fixed-variant: #00497e;
  --tertiary-fixed: #ffe5b6;
  --tertiary-fixed-dim: #ffc331;
  --on-tertiary-fixed: #261900;
  --on-tertiary-fixed-variant: #5c4300;
  --background: #ffffff;
  --on-background: #232323;
  --surface-variant: #dadae5;
  --surface-base: #ffffff;
  --surface-muted: #f5f5f8;
  --status-success: #1f7a4d;
  --status-warning: #9a4d12;
  --status-error: #ba1a1a;
  --text-heading: #232323;
  --text-body: #4a4e57;
  --accent-azure: #0087e3;
  --accent-signal: #0087e3;
  --tint-azure: #e8f3fc;
  --tint-signal: #e8f3fc;
  --cta: #ffbe00;
  --cta-hover: #ffcb33;
  --on-cta: #232323;
  --type-display-lg-size: 52px;
  --type-display-lg-weight: 600;
  --type-display-lg-line: 60px;
  --type-display-lg-tracking: -0.015em;
  --type-headline-lg-size: 36px;
  --type-headline-lg-weight: 600;
  --type-headline-lg-line: 44px;
  --type-headline-lg-tracking: -0.01em;
  --type-headline-md-size: 24px;
  --type-headline-md-weight: 600;
  --type-headline-md-line: 32px;
  --type-headline-md-tracking: -0.005em;
  --type-headline-sm-size: 20px;
  --type-headline-sm-weight: 600;
  --type-headline-sm-line: 28px;
  --type-body-size: 16px;
  --type-body-weight: 400;
  --type-body-line: 26px;
  --type-label-uppercase-size: 13px;
  --type-label-uppercase-weight: 500;
  --type-label-uppercase-line: 16px;
  --type-label-uppercase-tracking: 0.06em;
  --type-button-size: 16px;
  --type-button-weight: 500;
  --type-button-line: 20px;
  --type-button-tracking: 0.01em;
  --type-body-lg-size: 18px;
  --type-body-lg-weight: 400;
  --type-body-lg-line: 28px;
  --type-body-sm-size: 14px;
  --type-body-sm-weight: 400;
  --type-body-sm-line: 20px;
  --type-spec-value-size: 18px;
  --type-spec-value-weight: 500;
  --type-spec-value-line: 24px;
  --type-numeral-size: 44px;
  --type-numeral-weight: 600;
  --type-numeral-line: 44px;
  --type-numeral-tracking: -0.02em;
  --type-marker-size: 15px;
  --type-marker-weight: 600;
  --type-marker-line: 16px;
  --space-base: 8px;
  --space-xs: 4px;
  --space-sm: 12px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --container-max: 1280px;
  --gutter: 24px;
  --space-section-gap: 96px;
  --space-container-narrow: 760px;
  --space-panel-pad: 48px;
  --space-margin-desktop: 40px;
  --space-margin-mobile: 16px;
  --radius-sm: 4px;
  --radius: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  --radius-button: 20px;
  --radius-input: 8px;
  --radius-card: 12px;
  --font-heading: 'Rubik', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-body: 'Rubik', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-label: 'Rubik', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  /* Implementation tokens */
  --fs-h1: clamp(34px, 2.4vw + 22px, 52px);
  --fs-h2: clamp(28px, 1.2vw + 22px, 36px);
  --fs-h3: 24px / 32px;
  --fs-h4: 20px / 28px;
  --fs-body: 16px / 26px;
  --fs-label: 13px / 16px;
  --fs-numeral: clamp(32px, 2.6vw + 12px, 44px);
  --fs-spec: 18px / 24px;
  --fs-button: 16px / 20px;
  --radius-panel: 16px;
  --shadow-card: 0 1px 2px rgba(30,33,38,0.06), 0 8px 20px -10px rgba(30,33,38,0.14);
  --shadow-hover: 0 2px 4px rgba(30,33,38,0.06), 0 18px 36px -14px rgba(30,33,38,0.22);
  --shadow-float: 0 24px 56px -18px rgba(30,33,38,0.28);
  --shadow-dark: 0 18px 40px -18px rgba(0,0,0,0.55);
  --shadow-floor: radial-gradient(closest-side, rgba(30,33,38,0.22), rgba(30,33,38,0));
  --focus-ring: 3px solid #0087e3;
  --container-narrow: 760px;
  --section-gap: 96px;
  --panel-pad: 48px;
  --ease: ease-out;
}
@media (max-width: 767px) {
  .fl {
    --type-display-lg-size: 34px;
    --type-display-lg-weight: 600;
    --type-display-lg-line: 40px;
    --type-display-lg-tracking: -0.01em;
  }
}

/* =====================================================================
   Fundament der 4logistic-Blöcke (Bezel & Amber)
   Aus drafts/templates/engineered-hardware__azure-amber/styles.css, Teil
   „Basis". Alle Klassen tragen das Präfix fl-, damit nichts mit
   GeneratePress kollidiert (GP benutzt selbst .container, .site-header …).
   ===================================================================== */

/* Basis innerhalb der Blöcke – GeneratePress setzt eigene Ränder und Farben */
.fl, .fl *, .fl *::before, .fl *::after { box-sizing: border-box; }
.fl {
  font-family: var(--font-body); font-size: var(--type-body-size); line-height: var(--type-body-line); font-weight: 400;
  color: var(--text-body); hyphens: auto; overflow-wrap: break-word; -webkit-font-smoothing: antialiased;
}
.fl :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset) { margin: 0; }
.fl :where(ul, ol) { list-style: none; padding: 0; }
.fl img { display: block; max-width: 100%; height: auto; }
.fl a { color: var(--primary); }
.fl :focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.entry-content > .fl { margin-top: 0; margin-bottom: 0; }
/* DESIGN.md: weisse Seite (78 % Weiss). GP setzt bei separate-containers Grau dahinter. */
.fl-blocks-page .site-content .content-area .inside-article { padding: 0; background: #ffffff; }
.fl-blocks-page .site-content { padding: 0; }
.fl-blocks-page .site-main { margin: 0; }
.fl-blocks-page .entry-content { margin-top: 0; }
.fl-blocks-page main.site-main, .fl-blocks-page .fl.fl-section { overflow-x: clip; }

.fl-container {
  width: 100%; max-width: calc(var(--container-max) + 2 * var(--space-margin-desktop));
  margin: 0 auto; padding: 0 var(--space-margin-desktop);
}
.fl-h2 {
  font-family: var(--font-heading); font-size: var(--fs-h2); line-height: var(--type-headline-lg-line);
  font-weight: 600; letter-spacing: var(--type-headline-lg-tracking); color: var(--text-heading);
}
.fl-h3 {
  font-family: var(--font-heading); font-size: var(--type-headline-sm-size); line-height: var(--type-headline-sm-line);
  font-weight: 600; color: var(--text-heading);
}
.fl-text { max-width: var(--container-narrow); }
.fl-lead { font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-line); color: var(--text-heading); }
.fl-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-md); }
.fl-icon { width: 24px; height: 24px; flex: none; }
.fl-icon-wrap { display: contents; }

/* KV7 Eyebrow mit Amber-Tick */
.fl-eb {
  display: flex; align-items: center; gap: 10px; margin: 0 0 var(--space-sm) !important;
  font-family: var(--font-label); font-size: var(--type-label-uppercase-size); line-height: var(--type-label-uppercase-line);
  font-weight: 500; letter-spacing: var(--type-label-uppercase-tracking); text-transform: uppercase; hyphens: manual;
  color: var(--on-surface-variant);
}
.fl-eb::before { content: ""; width: 16px; height: 6px; flex: none; border-radius: var(--radius-sm); background: var(--accent-signal); }
.fl-eb--dark { color: var(--outline-variant); }

/* KV2 Index-Ziffer */
.fl-idx {
  display: block; font-family: var(--font-heading); font-size: var(--fs-numeral); line-height: 1;
  font-weight: 600; letter-spacing: var(--type-numeral-tracking); color: var(--text-heading); font-variant-numeric: tabular-nums;
}
.fl-idx::before { content: ""; display: block; width: 24px; height: 6px; border-radius: var(--radius-sm); background: var(--accent-signal); margin-bottom: 8px; }
.fl-idx--dark { color: var(--accent-signal); }

/* KV9 Icon-Kacheln */
.fl-it { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: var(--radius); background: var(--tint-azure); color: var(--primary); }
.fl-it .fl-icon { fill: none; }
.fl-it--s { width: 32px; height: 32px; }
.fl-it--s .fl-icon { width: 20px; height: 20px; }

/* Buttons – GeneratePress stylt a:hover mit (0,1,1): Farben festnageln */
.fl .fl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px;
  border-radius: var(--radius-button); border: 1.5px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
  font-family: var(--font-body); font-size: var(--type-button-size); line-height: var(--type-button-line); font-weight: 500; letter-spacing: var(--type-button-tracking);
  transition: background .16s ease-out, color .16s ease-out, border-color .16s ease-out;
}
.fl .fl-btn .fl-icon { width: 20px; height: 20px; transition: transform .16s ease-out; }
.fl .fl-btn--pri, .fl .fl-btn--pri:visited, .fl .fl-btn--pri:focus, .fl .fl-btn--pri:active { background: var(--cta); color: var(--on-cta); border-color: var(--cta); }
.fl .fl-btn--pri:hover { background: var(--cta-hover); border-color: var(--cta-hover); color: var(--on-cta); }
.fl .fl-btn--pri:hover .fl-icon { transform: translateX(3px); }
.fl .fl-btn--sec, .fl .fl-btn--sec:visited, .fl .fl-btn--sec:focus, .fl .fl-btn--sec:active { background: var(--surface-base); color: var(--primary); border-color: var(--primary); }
.fl .fl-btn--sec:hover { background: var(--tint-azure); color: var(--primary); }
.fl .fl-btn--lg { min-height: 56px; }
.fl .fl-btn--nolink { cursor: default; }
.fl .fl-btn:active { transform: translateY(1px); }
.fl .fl-ib { width: 48px; height: 48px; display: inline-grid; place-items: center; padding: 0; border-radius: var(--radius-button); background: var(--surface-base); border: 1px solid var(--outline-variant); color: var(--text-heading); cursor: pointer; transition: background .16s ease-out; }
.fl .fl-ib .fl-icon { width: 20px; height: 20px; }
.fl .fl-ib:hover { background: var(--tint-azure); border: 1.5px solid var(--primary); color: var(--primary); }

/* KV4 Bezel-Panel */
.fl-panel { background: var(--surface-muted); border-radius: var(--radius-xl); padding: var(--panel-pad); }
.fl-panel--azure { background: var(--tint-azure); }

/* KV5 Bodenschatten */
.fl-floor { position: absolute; left: 18%; width: 64%; height: 24px; top: calc(82% - 12px); background: var(--shadow-floor); pointer-events: none; z-index: 0; }

/* KV1 Marker */
.fl-mk {
  position: absolute; z-index: 4; transform: translate(-50%, -50%); width: 32px; height: 32px; padding: 0; border: 0;
  border-radius: var(--radius-full); display: grid; place-items: center; background: var(--primary); color: var(--on-primary);
  font-family: var(--font-label); font-size: var(--type-marker-size); line-height: var(--type-marker-line); font-weight: 600; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px rgba(0, 112, 190, 0.45); transition: transform .18s ease-out, box-shadow .18s ease-out;
}
button.fl-mk { cursor: pointer; }
.fl-mk.is-active { transform: translate(-50%, -50%) scale(1.12); box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px rgba(0, 112, 190, 0.7); }
.fl-mk:focus-visible { outline: var(--focus-ring); outline-offset: 5px; }
.fl-mk.fl-mk--s { position: static; transform: none; width: 28px; height: 28px; flex: none; }

/* Brotkrumen */
.fl-crumb ol { display: flex; flex-wrap: wrap; align-items: center; font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); }
.fl-crumb li { display: inline-flex; align-items: center; min-height: 32px; }
.fl-crumb li + li::before {
  content: ""; width: 7px; height: 7px; margin: 0 12px 0 8px; border-top: 1.5px solid var(--outline); border-right: 1.5px solid var(--outline); transform: rotate(45deg);
}
.fl-crumb a { color: var(--primary); text-decoration: none; }
.fl-crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fl-crumb [aria-current] { color: var(--text-heading); font-weight: 500; }

/* Spec-Readout (KV3) – Beschriftung */
.fl-ro-l { font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); color: var(--on-surface-variant); }

/* Checkliste mit Azure-Kachel */
.fl-chk { display: grid; gap: 8px; }
.fl-chk li { position: relative; padding-left: 36px; min-height: 24px; color: var(--text-body); }
.fl-chk li::before { content: ""; position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: var(--radius-sm); background: var(--tint-azure); }
.fl-chk li::after { content: ""; position: absolute; left: 8px; top: 5px; width: 7px; height: 12px; border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: rotate(45deg); }

/* Produktkarte mit Pad (KV5) */
.fl .fl-pc { height: 100%; display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--surface-base); border: 1px solid var(--outline-variant); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 12px; transition: box-shadow .24s ease-out, transform .24s ease-out; }
.fl a.fl-pc:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); color: inherit; }
.fl-pc-pad { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-card); background: var(--surface-muted); overflow: hidden; }
.fl-pc-pad img { position: absolute; inset: 8% 14% 14%; width: 72%; height: 78%; object-fit: contain; mix-blend-mode: multiply; z-index: 1; transition: transform .24s ease-out; }
.fl a.fl-pc:hover .fl-pc-pad img { transform: scale(1.03); }
.fl-pc-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 8px 6px; flex: 1; }
.fl-pc-brand { font-family: var(--font-label); font-size: var(--type-label-uppercase-size); line-height: var(--type-label-uppercase-line); font-weight: 500; letter-spacing: var(--type-label-uppercase-tracking); text-transform: uppercase; color: var(--on-surface-variant); hyphens: manual; }
.fl-pc-name { font-family: var(--font-heading); font-size: var(--type-headline-sm-size); line-height: var(--type-headline-sm-line); font-weight: 600; color: var(--text-heading); transition: color .16s ease-out; }
.fl a.fl-pc:hover .fl-pc-name { color: var(--primary); }
.fl-pc-text { font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); color: var(--text-body); }
.fl-pc-conf { display: grid; gap: 2px; padding-top: 10px; border-top: 1px solid var(--outline-variant); }
.fl-pc-conf-v { font-family: var(--font-label); font-size: var(--type-label-uppercase-size); line-height: 18px; font-weight: 500; letter-spacing: var(--type-label-uppercase-tracking); text-transform: uppercase; color: var(--text-heading); hyphens: manual; }
.fl-pc-more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; min-height: 32px; font-weight: 500; color: var(--primary); }
.fl-pc-more .fl-icon { width: 18px; height: 18px; transition: transform .16s ease-out; }
.fl a.fl-pc:hover .fl-pc-more .fl-icon { transform: translateX(3px); }

/* Editor-Hinweis */
.fl-editor-notice { padding: 16px; border: 1.5px dashed var(--outline-variant, #dadae5); border-radius: 8px; font-size: 14px; }

/* =====================================================================
   Layout-Utilities (Layout-Panel). 'auto' setzt keine Klasse.
   .fl-section.fl-pt-* (0,2,0) schlägt die Blockregel (0,1,0).
   ===================================================================== */
.fl-section.fl-pt-none { padding-top: 0; }
.fl-section.fl-pt-xs { padding-top: 16px; }
.fl-section.fl-pt-s { padding-top: 32px; }
.fl-section.fl-pt-m { padding-top: 64px; }
.fl-section.fl-pt-l { padding-top: 96px; }
.fl-section.fl-pt-xl { padding-top: 128px; }
.fl-section.fl-pb-none { padding-bottom: 0; }
.fl-section.fl-pb-xs { padding-bottom: 16px; }
.fl-section.fl-pb-s { padding-bottom: 32px; }
.fl-section.fl-pb-m { padding-bottom: 64px; }
.fl-section.fl-pb-l { padding-bottom: 96px; }
.fl-section.fl-pb-xl { padding-bottom: 128px; }
.fl-section.fl-bg-none { background: transparent; }
.fl-section.fl-bg-white { background: var(--surface-base); }
.fl-section.fl-bg-muted { background: var(--surface-muted); }
.fl-section.fl-bg-azure { background: var(--tint-azure); }
.fl-section.fl-bg-dark { background: var(--inverse-surface); color: var(--inverse-on-surface); }
.fl-section.fl-width-narrow .fl-container { max-width: calc(1040px + 2 * var(--space-margin-desktop)); }
.fl-section.fl-width-full .fl-container { max-width: none; }

@media (max-width: 767px) {
  .fl-container { padding: 0 var(--space-margin-mobile); }
  .fl-panel { padding: var(--space-md); }
  .fl-h2 { line-height: 36px; }
  .fl .fl-btn { white-space: normal; text-align: center; }
  .fl-actions .fl-btn { flex: 1 1 100%; }
  .fl-section.fl-pt-l, .fl-section.fl-pt-xl { padding-top: 64px; }
  .fl-section.fl-pb-l, .fl-section.fl-pb-xl { padding-bottom: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .fl *, .fl *::before, .fl *::after { transition-duration: .01ms !important; animation: none !important; }
  .fl a.fl-pc:hover, .fl a.fl-pc:hover .fl-pc-pad img, .fl .fl-btn:active { transform: none; }
  .fl-mk.is-active { transform: translate(-50%, -50%); }
}