/* Headings: Manrope (SIL OFL 1.1, self-hosted, vendor/VENDOR.md); body text keeps Tabler's system font stack. */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/manrope/manrope-latin-wght-normal.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; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/manrope/manrope-latin-ext-wght-normal.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; }

/* Feldmelder design tokens and the few components Tabler does not have.
   All colours of the product live here (light and dark); templates and JS use the tokens only.
   Tabler reads its colours from --tblr-* variables, which are mapped to the brand tokens below. */

:root {
  /* brand */
  --fm-green: #1F6F43;
  --fm-green-bright: #3FA36B;   /* primary on dark surfaces (contrast) */
  --fm-amber: #F59E0B;
  --brand-accent: var(--fm-amber);   /* amber = warning: alarm and warning badges only */
  --brand-sun: #F5B700;              /* sun yellow: headline marker, the sun in the scenes, sun line, focus ring (D-030, D-057, D-060) */
  --brand-sun-hover: #E0A800;        /* brand token; no hover state uses it since D-030 */
  --fm-danger: #D14343;
  --fm-orange: #E8590C;
  --fm-blue: #2F6FB3;
  --fm-violet: #7C3AED;
  --fm-white: #FFFFFF;
  /* neutral slate */
  --fm-slate-50: #F8FAFC;
  --fm-slate-100: #F1F5F9;
  --fm-slate-200: #E2E8F0;
  --fm-slate-300: #CBD5E1;
  --fm-slate-400: #94A3B8;
  --fm-slate-500: #64748B;
  --fm-slate-600: #475569;
  --fm-slate-700: #334155;
  --fm-slate-800: #1E293B;
  --fm-slate-900: #0F172A;
  --fm-slate-950: #020617;

  /* Tabler mapping */
  --tblr-primary: light-dark(var(--fm-green), var(--fm-green-bright));
  /* Tabler derives these with oklch(from var(--tblr-primary) ...); a light-dark() origin is invalid there, which
     made the hover background of every .btn-primary transparent (white label on white). Same values as Tabler's
     formula (OKLCH lightness - 0.06), precomputed per theme. */
  --tblr-primary-darken: light-dark(#015E33, #28905A);
  --tblr-primary-rgb: 31, 111, 67;
  --tblr-primary-fg: var(--fm-white);
  --tblr-green: var(--fm-green);
  --tblr-success: var(--fm-green);
  --tblr-success-rgb: 31, 111, 67;
  --tblr-warning: var(--fm-amber);
  --tblr-warning-rgb: 245, 158, 11;
  --tblr-yellow: var(--fm-amber);
  --tblr-danger: var(--fm-danger);
  --tblr-danger-rgb: 209, 67, 67;
  --tblr-red: var(--fm-danger);
  --tblr-orange: var(--fm-orange);
  --tblr-blue: var(--fm-blue);
  --tblr-gray-50: var(--fm-slate-50);
  --tblr-gray-100: var(--fm-slate-100);
  --tblr-gray-200: var(--fm-slate-200);
  --tblr-gray-300: var(--fm-slate-300);
  --tblr-gray-400: var(--fm-slate-400);
  --tblr-gray-500: var(--fm-slate-500);
  --tblr-gray-600: var(--fm-slate-600);
  --tblr-gray-700: var(--fm-slate-700);
  --tblr-gray-800: var(--fm-slate-800);
  --tblr-gray-900: var(--fm-slate-900);
  --tblr-gray-950: var(--fm-slate-950);

  /* semantic tokens used by templates and charts */
  --fm-sev-info: var(--fm-slate-500);
  --fm-sev-medium: var(--fm-amber);
  --fm-sev-high: var(--fm-orange);
  --fm-sev-critical: var(--fm-danger);
  --fm-ok: light-dark(var(--fm-green), var(--fm-green-bright));
  --fm-nodata: var(--fm-slate-400);
  --fm-chart-target: light-dark(var(--fm-slate-500), var(--fm-slate-400));
  --fm-chart-actual: light-dark(var(--fm-green), var(--fm-green-bright));
  --fm-chart-actual-b: var(--fm-blue);
  --fm-chart-wind: light-dark(var(--fm-slate-700), var(--fm-slate-300));
  --fm-chart-gust: var(--fm-amber);
  --fm-chart-event-weather: var(--fm-amber);   /* warning: stow for an official weather warning (DWD) */
  --fm-chart-event-wind: var(--fm-blue);       /* stow for measured wind */
  --fm-chart-event-snow: light-dark(var(--fm-slate-500), var(--fm-slate-300));   /* snow stow (D-057) */
  --fm-chart-sun: var(--brand-sun);
  --fm-chart-current: var(--fm-orange);
  --fm-chart-battery: light-dark(var(--fm-green), var(--fm-green-bright));
  --fm-chart-text: light-dark(var(--fm-slate-600), var(--fm-slate-400));
  --fm-chart-grid: light-dark(rgba(15, 23, 42, .08), rgba(241, 245, 249, .08));
  --fm-tenant: var(--fm-green); /* overridden per organisation by /branding.css */

  /* public site (base_public.html) */
  --fm-ink: light-dark(var(--fm-slate-900), var(--fm-slate-50));   /* the marked headline word: ink in light, light on dark */
  --fm-card-border: light-dark(var(--fm-slate-200), rgba(255, 255, 255, .08));
  --fm-shadow: light-dark(rgba(15, 23, 42, .06), rgba(0, 0, 0, .30));
  --fm-shadow-strong: light-dark(rgba(15, 23, 42, .10), rgba(0, 0, 0, .50));
  --fm-shadow-deep: light-dark(rgba(15, 23, 42, .18), rgba(0, 0, 0, .60));
  --fm-tile: light-dark(rgba(31, 111, 67, .12), rgba(63, 163, 107, .12));
  --fm-font-heading: "Manrope", var(--tblr-font-sans-serif);    /* headings of the public site (Brief 9) */
  /* Landing scenes (Brief 9, D-057): always daylight, independent of the UI theme; read by js/landing-scenes.js */
  --fm-logo-sun: var(--brand-sun);                    /* the logo's status dot (D-064) */
  --fm-scene-sky-top: #BBD8F5;  --fm-scene-sky-bottom: #EAF3FB;
  --fm-scene-dusk-top: #D9CBE3; --fm-scene-dusk-bottom: #F7D9A8;
  --fm-scene-storm-top: #5D6B7D; --fm-scene-storm-bottom: #9AA6B4;
  --fm-scene-snowsky-top: #C3CAD3; --fm-scene-snowsky-bottom: #E7EAEE;
  --fm-scene-cloud-light: #DDE5EE; --fm-scene-cloud-dark: #7A8797;
  --fm-scene-cloud-snow-a: #E6EAF0; --fm-scene-cloud-snow-b: #D4DAE2;
  --fm-scene-ground: #C7DDCE;   --fm-scene-ground-line: #B1CDBB;  --fm-scene-ground-far: #DCE8DF;
  --fm-scene-crop: #9CC487;     --fm-scene-crop-dark: #86B272;    --fm-scene-soil: #D9CDB0;
  --fm-scene-shadow: rgba(15, 23, 42, .30);
  --fm-scene-snow: #F8FAFC;     --fm-scene-snowblue: #3B82F6;
  --fm-scene-rain: rgba(71, 85, 105, .45);  --fm-scene-wind: rgba(255, 255, 255, .8);
  --fm-scene-arc: rgba(15, 23, 42, .14);
  --fm-scene-post: #9AA0A6;     --fm-scene-drive: #404045;  --fm-scene-tube: #8E9196;  --fm-scene-bracket: #6E6E6E;
  --fm-scene-purlin: #B9BDC2;   --fm-scene-panel: #213A73;  --fm-scene-clamp: #111111; --fm-scene-edge: rgba(15, 23, 42, .55);
  --fm-scene-card: rgba(255, 255, 255, .92); --fm-scene-card-line: rgba(15, 23, 42, .12);
  --fm-scene-ink: #0F172A;      --fm-scene-muted: #475569;  --fm-scene-label: #334155;
  --fm-band: light-dark(#17573A, #123D29);    /* deep green band of the product section (from --fm-green) */
  --fm-band-ink: #FFFFFF;
  --fm-cta-scrim: rgba(15, 23, 42, .64);              /* over the aerial loop behind the CTA (Brief 14) */
  --fm-trust-tint: light-dark(rgba(31, 111, 67, .06), rgba(63, 163, 107, .08));
  /* Brief 10: public header (solid, 95 % opaque, no blur), body text, browser frame of the portal shot */
  --fm-public-text: light-dark(var(--fm-slate-700), var(--fm-slate-300));
  /* Brief 12 (docs/design/direction.md, D-063): one type scale, one 4-px spacing scale, three radii, two elevations,
     one easing. Components on the public site take their values from here. */
  --fm-text-xs: .8125rem;  --fm-text-sm: .9375rem;  --fm-text-md: 1.0625rem;
  --fm-text-lg: 1.25rem;   --fm-text-xl: 1.375rem;  --fm-text-2xl: 2rem;
  --fm-measure: 68ch;                                   /* running text: 65-70 characters per line */
  --fm-space-1: .25rem; --fm-space-2: .5rem; --fm-space-3: .75rem; --fm-space-4: 1rem;
  --fm-space-5: 1.5rem; --fm-space-6: 2rem;  --fm-space-7: 3rem;   --fm-space-8: 4rem;
  --fm-section-y: 3.5rem;                               /* 56 px; 36 px on phones (Brief 10) */
  --fm-radius-sm: .375rem; --fm-radius-md: .5rem; --fm-radius-lg: .75rem;
  --fm-elev-hover: 0 .5rem 1.25rem var(--fm-shadow-strong);       /* feedback: a card under the pointer */
  --fm-elev-media: 0 1rem 2rem -1.25rem var(--fm-shadow-deep);     /* the two framed product pictures */
  --fm-ease-out: cubic-bezier(0.2, 0, 0, 1);
  --fm-dur-fast: 150ms; --fm-dur-base: 200ms;
  --fm-selection: light-dark(rgba(31, 111, 67, .18), rgba(63, 163, 107, .35));
  --fm-img-outline: light-dark(rgba(0, 0, 0, .1), rgba(255, 255, 255, .1));
  --fm-render-bg: light-dark(var(--fm-slate-50), var(--fm-slate-200));
  /* Landing page (Brief 17/18, D-068/D-069, css/landing.css): the poster palette – sun yellow as a field colour on the
     landing page only (the approved variant 11), poster ink and mist; aliases of the brand tokens; the overlay on the renders. */
  --lp-green: var(--fm-green); --lp-green-bright: var(--fm-green-bright); --lp-sun: var(--brand-sun); --lp-amber: var(--fm-amber);
  --lp-focus: var(--brand-sun); --lp-white: var(--fm-white); --lp-ink: var(--fm-slate-900); --lp-slate-100: var(--fm-slate-100); --lp-slate-700: var(--fm-slate-700);
  --lp-slate-800: var(--fm-slate-800);
  --lp-poster-ink: #111111;          /* the posters' black on sun yellow and white (contrast in runs/<ts>-brief18/) */
  --lp-poster-ink-hover: #2A2A2A;
  --lp-mist: #EDEDE8;                /* the app panel on the white poster */
  --lp-foot-muted: #CFCFCF;          /* secondary text in the ink footer */
  --lp-hud-card: rgba(255, 255, 255, .92); --lp-hud-line: rgba(15, 23, 42, .12); --lp-hud-ink: var(--fm-slate-900);
  --lp-hud-muted: var(--fm-slate-600); --lp-hud-snow: var(--fm-scene-snowblue); --lp-hud-shadow: rgba(15, 23, 42, .35);
  /* Brief 19 (D-070): the site shell on every public page, light and dark – a paper surface and its ink */
  --lp-paper: light-dark(var(--fm-white), var(--fm-slate-900));
  --lp-paper-2: light-dark(var(--fm-slate-50), var(--fm-slate-950));
  --lp-paper-ink: light-dark(var(--lp-poster-ink), var(--fm-slate-50));
  --lp-paper-muted: light-dark(var(--fm-slate-700), var(--fm-slate-300));
  --lp-paper-line: light-dark(var(--lp-poster-ink), var(--fm-slate-400));
}

/* Light theme surfaces and text (D-029): page #F8FAFC, surfaces #FFFFFF, alternate #F1F5F9, borders #E2E8F0,
   text #0F172A, secondary text #475569. Dark keeps Tabler's dark values. */
:root[data-bs-theme="light"] {
  --tblr-body-bg: var(--fm-slate-50);
  --tblr-body-bg-rgb: 248, 250, 252;
  --tblr-bg-surface: var(--fm-white);
  --tblr-bg-surface-secondary: var(--fm-slate-100);
  --tblr-body-color: var(--fm-slate-900);
  --tblr-body-color-rgb: 15, 23, 42;
  --tblr-emphasis-color: var(--fm-slate-900);
  --tblr-heading-color: var(--fm-slate-900);
  --tblr-secondary: var(--fm-slate-600);
  --tblr-secondary-rgb: 71, 85, 105;
  --tblr-secondary-color: var(--fm-slate-600);
  --tblr-border-color: var(--fm-slate-200);
  --tblr-card-border-color: var(--fm-slate-200);
}

/* ------------------------------------------------------------------ icons
   The sprite symbols carry no stroke-width, so it is set here: 2 in the app (as before), 1.75 on the public site. */
.icon { stroke-width: 2; }
.fm-public .icon { stroke-width: 1.75; }

/* ------------------------------------------------------------------ brand */
.fm-brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; letter-spacing: -.01em;
  font-size: 1.15rem; color: inherit; text-decoration: none; }
/* Logo (Brief 13, D-064): lockup from brand/feldmelder-logo.svg; 13097.4 x 1877.9 is the symbol's viewBox */
.fm-logo { display: block; height: 1.75rem; width: auto; aspect-ratio: 13097.4 / 1877.9; flex-shrink: 0; }
.fm-brand { color: var(--fm-ink); --fm-logo-mark: light-dark(var(--fm-green), var(--fm-green-bright)); --fm-logo-dot: var(--fm-logo-sun); }
.navbar-vertical .fm-brand { color: var(--fm-white); --fm-logo-mark: var(--fm-green-bright); }
.fm-brand .fm-sub { font-weight: 500; font-size: .8rem; opacity: .7; margin-left: .1rem; }
.tenant-marker { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%;
  background: var(--fm-tenant); margin-right: .35rem; }
.tenant-logo { max-height: 1.75rem; max-width: 8rem; }
/* The app sidebar is data-bs-theme="dark", but Tabler sets its dark surfaces on :root only, so the light-theme
   surface tokens (:root[data-bs-theme="light"], D-029) reached it: white sidebar, white labels. Own dark tokens: */
.navbar-vertical[data-bs-theme="dark"] {
  --tblr-navbar-bg: var(--fm-slate-900); --tblr-bg-surface: var(--fm-slate-900);
  --tblr-navbar-border-color: var(--fm-slate-800); --tblr-border-color: var(--fm-slate-800);
  --tblr-body-color: var(--fm-slate-200); --tblr-secondary: var(--fm-slate-400); --tblr-secondary-color: var(--fm-slate-400);
  background-color: var(--fm-slate-900); color: var(--fm-slate-200);
}

/* ------------------------------------------------------------------ severities and modes */
.badge-sev { color: var(--fm-white); font-weight: 600; }
.badge-sev-info { background: var(--fm-sev-info); }
.badge-sev-medium { background: var(--fm-sev-medium); color: var(--fm-slate-900); }
.badge-sev-high { background: var(--fm-sev-high); }
.badge-sev-critical { background: var(--fm-sev-critical); }
.plant-status-ok { --fm-status: var(--fm-ok); }
.plant-status-nodata { --fm-status: var(--fm-nodata); }
.plant-status-info { --fm-status: var(--fm-sev-info); }
.plant-status-medium { --fm-status: var(--fm-sev-medium); }
.plant-status-high { --fm-status: var(--fm-sev-high); }
.plant-status-critical { --fm-status: var(--fm-sev-critical); }
.card-status-top.plant-status { background: var(--fm-status); }
.text-status { color: var(--fm-status); }

/* ------------------------------------------------------------------ tracker grid */
.tracker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr)); gap: .5rem; }
.tracker-tile { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .6rem .4rem;
  border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface); color: inherit; text-decoration: none; text-align: center; }
a.tracker-tile:hover { border-color: var(--tblr-primary); text-decoration: none; }
.tracker-tile .t-label { font-weight: 600; }
.tracker-tile .t-val { font-size: .8rem; color: var(--tblr-secondary); font-variant-numeric: tabular-nums; }
.tracker-tile .t-fault { font-size: .75rem; color: var(--fm-sev-critical); }
.angle { width: 2.75rem; height: 2.75rem; }
.angle .ring { fill: none; stroke: var(--tblr-border-color); stroke-width: 2; }
.angle .panel { fill: var(--fm-mode, var(--fm-ok)); }
.angle .hub { fill: var(--tblr-body-color); }
.mode-auto { --fm-mode: var(--fm-ok); }
.mode-stow { --fm-mode: var(--fm-blue); }
.mode-manual { --fm-mode: var(--fm-violet); }
.mode-maintenance { --fm-mode: var(--fm-amber); }
.mode-fault { --fm-mode: var(--fm-danger); }
.mode-offline { --fm-mode: var(--fm-nodata); }
.tracker-tile.mode-fault, .tracker-tile.mode-offline { border-color: var(--fm-mode); }

/* ------------------------------------------------------------------ charts, map */
.chart-box { position: relative; height: 18rem; }
.chart-box.chart-sm { height: 12rem; }
.fleet-map { height: 22rem; border-radius: var(--tblr-border-radius); }
@media (max-width: 575.98px) {
  .chart-box { height: 14rem; }
  .fleet-map { height: 15rem; }
}

/* ------------------------------------------------------------------ misc */
.btn-link { color: var(--tblr-primary); }
/* Tabler's info blue reached only 2.8:1 as alert text on its own tint (measured 2026-10-30); brand blue in light */
:root[data-bs-theme="light"] .alert-info { --tblr-alert-variant-color: var(--fm-blue); }   /* Tabler: oklch(from var(--tblr-primary) ...), invalid with light-dark() */
.claim-code { font-family: var(--tblr-font-monospace); font-size: 1.6rem; letter-spacing: .12em; word-break: break-all; }
.secret { word-break: break-all; }
.qr { width: 12rem; height: 12rem; image-rendering: pixelated; background: var(--fm-white); padding: .5rem; border-radius: .25rem; }
pre.details { max-height: 20rem; overflow: auto; font-size: .8rem; }
.demo-clock { font-variant-numeric: tabular-nums; }
.table-mobile td { vertical-align: middle; }
.form-inline-compact { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.form-inline-compact .form-control, .form-inline-compact .form-select { width: auto; min-width: 8rem; }

/* ------------------------------------------------------------------ public site (base_public.html)
   .fm-public: every page on the public layout; .fm-marketing: landing, pricing, developers, legal
   (not the public plant view, which keeps the app density). */
.fm-public { overflow-wrap: break-word; }
.fm-public .container-xl { --tblr-gutter-x: calc(2 * var(--fm-margin)); }   /* the page margin (Brief 15), wider than row gutters */
.fm-public .page-wrapper { overflow-x: clip; }                    /* empty row gutters never scroll the page */
.fm-marketing { --tblr-body-font-size: 1.0625rem; --tblr-body-line-height: 1.6; }      /* body 17 px */
/* Brief 10: headings ink (slate 900), body text one step softer (slate 700); secondary text unchanged */
.fm-marketing { --tblr-body-color: var(--fm-public-text); }
.fm-marketing h1, .fm-marketing h2, .fm-marketing h3, .fm-marketing .fm-h2, .fm-marketing .card-title { color: var(--fm-ink); }
.fm-marketing .container-xl { max-width: var(--fm-wrap-w); }
.fm-marketing h1, .fm-marketing .h1 { font-size: var(--fm-text-2xl); font-weight: 800; letter-spacing: -.025em; line-height: 1.1;
  text-wrap: balance; }
.fm-marketing .fm-h2 { font-size: 1.625rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; text-wrap: balance; }   /* 26 px phone */
.fm-marketing h3, .fm-marketing .card-title { font-size: var(--fm-text-lg); font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
@media (min-width: 768px) {
  .fm-marketing h1, .fm-marketing .h1 { font-size: 2.25rem; }
  .fm-marketing .fm-h2 { font-size: 2rem; line-height: 2.5rem; }                  /* 32/40 px */
}
@media (min-width: 1200px) {
  .fm-marketing h1, .fm-marketing .h1 { font-size: 2.75rem; }
}
@media (max-width: 575.98px) {
  .fm-marketing p, .fm-marketing li { hyphens: auto; }    /* body text only; headings never split words */
}
/* Brief 9: Manrope for headings on every public page; body font unchanged */
.fm-public h1, .fm-public h2, .fm-public h3, .fm-public .h1, .fm-public .fm-h2, .fm-public .card-title { font-family: var(--fm-font-heading); }
.fm-box-render { margin: 0; } .fm-box-render img { display: block; width: 100%; height: auto; }
.fm-only-dark { display: none !important; }
[data-bs-theme="dark"] .fm-only-dark { display: block !important; }
[data-bs-theme="dark"] .fm-only-light { display: none !important; }
.fm-figcaption { font-size: var(--fm-text-xs); color: var(--tblr-secondary); margin-top: var(--fm-space-3); max-width: var(--fm-measure); }

.section { padding: 3.5rem 0; }                                                     /* 56 px, phone 36 px (Brief 10) */
@media (max-width: 767.98px) { .section { padding: 2.25rem 0; } }
html:has(body.fm-public) { scroll-padding-top: 4.5rem; }         /* anchors land below the sticky header */

.text-brand { color: var(--tblr-primary); }

.fm-dot.is-snow, .fm-dot.is-stow { background: var(--fm-scene-snowblue); }
.fm-alarm-d b { color: var(--fm-scene-ink); }
}
@media (max-width: 575.98px) { .fm-ab button { min-height: 2.75rem; padding: 0 var(--fm-space-3); } .fm-media-controls { justify-content: flex-start; } }

/* honest status note (pricing page) */
.fm-pilot { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .875rem; border-radius: 999px;
  font-size: .9375rem; font-weight: 500; background: var(--tblr-bg-surface); border: 1px solid var(--fm-card-border); }
.fm-pilot .icon { color: var(--tblr-primary); }

.fm-card { --tblr-card-border-color: var(--fm-card-border); box-shadow: none;
  transition: transform .15s ease, box-shadow .15s ease; }
@media (hover: hover) {                                  /* no latched hover after a tap on touch screens */
  .fm-card:hover { transform: translateY(-2px); box-shadow: var(--fm-elev-hover); }
}
/* Brief 10: buttons change background and border smoothly; focus rings in the sun colour with an ink inner ring,
   so the ring keeps 3:1 against light and dark surfaces (D-060) */
.fm-public .btn { transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease,
  scale var(--fm-dur-fast) var(--fm-ease-out); }
.fm-public :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.fm-public .btn:focus-visible { outline: 2px solid var(--brand-sun); outline-offset: 2px; box-shadow: 0 0 0 2px var(--fm-ink); }
@media (prefers-reduced-motion: reduce) {
  .fm-card, .fm-public .btn { transition: none; }
  .fm-card:hover { transform: none; }
}

.feature-icon { width: 3rem; height: 3rem; border-radius: .75rem; display: inline-flex; align-items: center;
  justify-content: center; background: var(--fm-tile); color: var(--tblr-primary); }
.fm-public .feature-icon .icon { --tblr-icon-size: 1.75rem; }                                 /* 28 px in tiles */

.btn-cta { --tblr-btn-color: var(--fm-white); --tblr-btn-bg: var(--fm-green); --tblr-btn-border-color: var(--fm-green);
  --tblr-btn-hover-color: var(--fm-white); --tblr-btn-hover-bg: var(--fm-green); --tblr-btn-hover-border-color: var(--fm-green);
  --tblr-btn-active-color: var(--fm-white); --tblr-btn-active-bg: var(--fm-green); --tblr-btn-active-border-color: var(--fm-green);
  transition: filter .15s ease; }
.btn-cta:hover, .btn-cta:focus-visible { filter: brightness(1.08); }            /* no shadow at rest (Brief 15) */
/* secondary CTA: green outline on the page background (no yellow on buttons, D-030) */
.btn-cta-outline { --tblr-btn-color: var(--tblr-primary); --tblr-btn-bg: var(--tblr-bg-surface); --tblr-btn-border-color: var(--tblr-primary);
  --tblr-btn-hover-color: var(--fm-white); --tblr-btn-hover-bg: var(--fm-green); --tblr-btn-hover-border-color: var(--fm-green);
  --tblr-btn-active-color: var(--fm-white); --tblr-btn-active-bg: var(--fm-green); --tblr-btn-active-border-color: var(--fm-green);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.btn .icon-end { margin: 0 -.25rem 0 .5rem; }

@media (min-width: 992px) { .fm-render { margin-right: -1rem; } }                       /* slightly larger than its column */

.price { font-size: 1.4rem; font-weight: 700; }
/* honeypot field of the public form (common/leads.py): off-screen, not display:none (simple bots skip those) */
.fm-lead-message { white-space: pre-wrap; }
/* read-only API overview on /entwickler: stacked rows that wrap on phones (no horizontal overflow) */
.fm-api-list li { padding: .5rem 0; border-bottom: 1px solid var(--tblr-border-color); overflow-wrap: anywhere; }
.fm-api-head { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }   /* enquiry text as written (superadmin list) */
.fm-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Brief 8 §1.3: phone tap targets – the menu button and the header icons get at least 44 x 44 px */
.navbar-toggler { min-width: 44px; min-height: 44px; }
@media (max-width: 991.98px) {   /* phones and tablets: chart range buttons */
  .card-header .btn-group-sm > .btn { min-height: 44px; min-width: 44px; }
}
@media (max-width: 767.98px) {
  .navbar .nav-link { min-height: 44px; min-width: 44px; justify-content: center; }
  table.alarms .form-inline-compact { display: grid; grid-template-columns: minmax(0, 1fr); }
  table.alarms .form-inline-compact .form-control { min-width: 0; width: 100%; }
}

/* Brief 8 phase 3: stow events on the plant timeline (bands drawn by charts.js; list under the chart) */
.event-swatch { display: inline-block; width: .9em; height: .9em; border-radius: .15em; vertical-align: -.1em; opacity: .55; }
.event-swatch.event-weather { background: var(--fm-chart-event-weather); }
.event-swatch.event-wind { background: var(--fm-chart-event-wind); }
.event-swatch.event-snow { background: var(--fm-chart-event-snow); }

/* ------------------------------------------------------------------ legal pages and error pages (Brief 11)
   same typography as the site, a readable measure, printable (header, footer and the PDF link are d-print-none) */
.fm-legal-body { max-width: 46rem; }
.fm-legal-body h2 { font-size: 1.25rem; font-weight: 700; margin: 2rem 0 .5rem; color: var(--fm-ink); }
.fm-legal-body p, .fm-legal-body li { line-height: 1.65; }
.fm-legal-body ul { padding-left: 1.25rem; }
.fm-legal-body li + li { margin-top: .375rem; }
.fm-legal-note { padding: .75rem 1rem; border-radius: .5rem; background: var(--fm-trust-tint);
  border: 1px solid var(--tblr-border-color); font-size: .9375rem; }
.fm-provider { font-weight: 600; }
.fm-sign { margin-top: 3rem; }
.fm-sign p { margin: 3rem 0 0; padding-top: .375rem; border-top: 1px solid var(--tblr-border-color); width: 60%; }
.fm-error-body { max-width: 36rem; padding: 2rem 0; }
.fm-error-code { font-family: var(--fm-font-heading); font-weight: 800; font-size: 3.5rem; line-height: 1;
  color: var(--tblr-primary); margin: 0 0 .75rem; }
@media print {
  .fm-public .page-wrapper { padding: 0; }
  .fm-legal.section { padding: 0; }
  .fm-legal-body { max-width: none; font-size: 10.5pt; }
  .fm-legal-body h2 { break-after: avoid; margin-top: 1.25rem; }
  .fm-legal-body a { color: inherit; text-decoration: none; }
}

/* ------------------------------------------------------------------ Brief 12: one system for the public pages (D-063)
   radii, card padding and resting surfaces from the tokens; Tabler cards and buttons on the public layout follow them */
.fm-marketing { --tblr-border-radius: var(--fm-radius-md); --tblr-border-radius-lg: var(--fm-radius-md);
  --tblr-card-border-radius: var(--fm-radius-md); --tblr-box-shadow-card: none; --fm-card-pad: var(--fm-space-6); }
.fm-marketing .card { box-shadow: none; }
.fm-marketing .card-body { padding: var(--fm-card-pad); }
.fm-marketing .btn, .fm-marketing .form-control, .fm-marketing .form-select { border-radius: var(--fm-radius-md); }
@media (max-width: 575.98px) { .fm-marketing { --fm-card-pad: var(--fm-space-5); } }

/* long German compounds in headings hyphenate on phones instead of breaking mid-word (audit 3.3) */
@media (max-width: 575.98px) { .fm-marketing h1, .fm-marketing h2 { hyphens: auto; } }

/* Sub-pages open the same way (audit 1.2, 2.2): title, optional lead and note, then 48 px to the content */
.fm-page-head { max-width: var(--fm-measure); margin: 0 0 var(--fm-space-7); }
.fm-page-head .h1 { margin: 0; }
.fm-page-head .fm-lead { margin: var(--fm-space-3) 0 0; font-size: var(--fm-text-lg); line-height: 1.5; color: var(--tblr-secondary);
  text-wrap: pretty; }
.fm-page-head .fm-page-note { margin: var(--fm-space-4) 0 0; }
.fm-legal-body .fm-page-head { margin-bottom: var(--fm-space-6); }
.fm-api-tag { font-size: var(--fm-text-sm); margin: var(--fm-space-4) 0 var(--fm-space-2); }
@media (max-width: 767.98px) { .fm-page-head { margin-bottom: var(--fm-space-6); } .fm-page-head .fm-lead { font-size: var(--fm-text-md); } }
.fm-marketing .empty-subtitle { max-width: var(--fm-measure); margin-inline: auto; }   /* audit 3.2 */

/* Footer (Brief 12): every target at least 24 x 24 px (WCAG 2.2 2.5.8), 44 px on phones; the footer sits at the
   bottom of short pages instead of floating mid-screen (audit 2.1, 5.2) */
.fm-public .page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.fm-public .page-wrapper { flex: 1 0 auto; display: flex; flex-direction: column; }
/* ------------------------------------------------------------------ polish (Brief 12, Krehel better-ui / Impeccable)
   press feedback, content-image outlines, themed browser surfaces; movement only without reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .fm-public .btn:not(:disabled):not(.disabled):active { scale: .96; }
}
.fm-public ::selection { background: var(--fm-selection); color: var(--fm-ink); }
.fm-public a { text-underline-offset: .2em; }
.fm-public .price { font-variant-numeric: tabular-nums; }
.fm-theme-switching, .fm-theme-switching * { transition: none !important; }

.fm-legal-body h2 { text-wrap: balance; }                               /* no short last lines (audit 3.3) */
.fm-print-logo { height: 12mm; width: auto; margin: 0 0 6mm; }          /* legal pages and the AVV PDF (print only) */

/* ------------------------------------------------------------------ Brief 15 system for the public sub-pages (D-066); the landing page has its own css/landing.css (D-069)
   One family (Manrope), square corners, nothing at rest has a shadow, the footer ends in the name. */
:root {
  --fm-wrap-w: 82rem;                                        /* 1312 px incl. margins */
  --fm-margin: 2rem;
  --fm-gap-section: 7.5rem;                                  /* 120 px between sections on desktop */
  --fm-size-section: clamp(1.875rem, 3vw + .75rem, 3.25rem);
}
@media (max-width: 767.98px) { :root { --fm-margin: 1.25rem; --fm-gap-section: 4rem; } }
.fm-public { --tblr-body-font-family: var(--fm-font-heading); }          /* body text in Manrope too: one family */
.fm-marketing { --tblr-border-radius: 0; --tblr-border-radius-lg: 0; --tblr-card-border-radius: 0; }
.fm-marketing .btn, .fm-marketing .form-control, .fm-marketing .form-select, .fm-pilot { border-radius: 0; }
.fm-marketing .fm-h2 { font-size: var(--fm-size-section); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; margin: 0;
  text-wrap: balance; }