/*!
 * ProNet Systems GmbH – style.css
 * ---------------------------------------------------------------------------
 * The one and only stylesheet of www.pronet-systems.de (no build step, no @import,
 * no external resources except the self-hosted fonts and images below).
 *
 * Binding contract: spec/03-component-contract.md (class names, hooks, tokens,
 * section order § 9.2). Values come from analysis/01–08 (tested code), with the
 * reconciliation of analysis/08 (B-1 … B-24, C-1 … C-87).
 *
 * Conventions
 *   - rem = 16 px (browser default), body text = 17 px (1.0625rem).
 *   - Component classes are rs-BEM (rs-block__element--modifier); the header
 *     family (.site-top, .topbar, .site-header, .nav, .mega, .mnav) keeps the
 *     tested names of analysis/02 without prefix.
 *   - State classes (js/no-js, is-open, is-active, …) and data attributes are
 *     set by main.js (implementer C) or server-side (implementer A).
 *   - Media queries use the literal breakpoints of contract § 1.3
 *     (75em/74.99em nav, 1024, 1023, 768, 767, 600, 560, 480 px).
 *   - Colours only through tokens. Primary Blue is never small text on light
 *     backgrounds (2.44:1) – use --rs-secondary-ink (5.58:1).
 *   - Red (danger) only for error states (form validation, toasts) – no red
 *     buttons, CTAs or emergency UI (ProNet decision E5).
 *
 * Sections (contract § 9.2)
 *   01 Tokens · 02 Fonts · 03 Base · 04 Layout · 05 Context · 06 Motion
 *   07 Utilities & Icons · 08 Header & Navigation · 09 Breadcrumb
 *   10 Shapes, tones, backgrounds · 11 Typography components
 *   12 Buttons & links · 13 Lists & data · 14 Cards & tiles · 15 Media
 *   16 Disclosure · 17 Forms · 18 Wizard & tools · 19 Overlays · 20 Footer
 *   21 Heroes & section shells · 22 Page modules · 23 Behaviour layer
 *   24 Print · 25 Reduced motion
 * ------------------------------------------------------------------------- */

/* ===== 01 Tokens ===== */
/* 01 § 11 (canonical) + contract § 1.6 additions/replacements + 08 B-2 aliases.
   Order: 01 block → additions → aliases → media-query overrides. */
:root {
  color-scheme: light;

  /* ── Brand palette (ProNet, analysis/04-design-marke.md § 5.8, brand/palette.json) ── */
  /* === B2: Palette ProNet === Token-Namen der Vorlage bleiben, Werte ProNet (Variante B, D-06) */
  --rs-primary: #73B0EE;            /* Akzentblau – Akzente/Links/Fokus auf Dunkel, Fläche nur mit dunkler Schrift (6,96:1 auf #1E222B) */
  --rs-secondary: #1779B0;          /* Mittelblau – Linien, Grafik, große Schrift, Rahmen (hell 4,77:1 / dunkel 3,33:1) */
  --rs-charcoal: #1E222B;           /* Schiefer – dunkle UI-Basis (aus Web-Schiefer #3B4251) */
  --rs-grey: #F5F5F5;               /* Light Grey – section backgrounds */
  --rs-white: #FFFFFF;
  --rs-light: var(--rs-grey);

  /* RGB channels for alpha mixing: rgb(var(--rs-primary-rgb) / .15) */
  --rs-primary-rgb: 115 176 238;
  --rs-secondary-rgb: 23 121 176;
  --rs-charcoal-rgb: 30 34 43;
  --rs-deep-rgb: 24 28 35;
  --rs-muted-rgb: 102 102 102;
  --rs-white-rgb: 255 255 255;
  --rs-black-rgb: 0 0 0;

  /* ── Blue scale ───────────────────────────────────────────────── */
  --rs-primary-25: #F2F8FE;         /* row hover on white */
  --rs-primary-50: #EBF3FD;         /* soft icon tile, light badge */
  --rs-primary-100: #CCE1F9;        /* soft tile border */
  --rs-primary-200: #A2C8F1;        /* accent text hover on dark (9,15:1) */
  --rs-primary-300: #8BBAEC;        /* primary fill hover (ink 9,07:1) */
  --rs-primary-pressed: #5DA0E3;    /* primary :active (ink 6,68:1) */
  --rs-secondary-ink: #005091;      /* TEXT-SAFE BLUE = Logo-Blau: small text/links on light (8,21:1) */
  --rs-secondary-700: #014279;      /* icons in soft tiles, FAQ border (9,13:1 on #EBF3FD) */
  --rs-secondary-800: #023664;      /* link hover on light (12,25:1) */
  --rs-on-primary: #11141A;         /* ink on Primary (8,06:1) – never white on Primary */

  /* Variante B (04-design-marke § 5.6): CTA-Fläche auf hellen Flächen = Web-Blau mit weißer Schrift */
  --rs-fill: #006699;               /* Weiß darauf 6,25:1 */
  --rs-fill-hover: #1779B0;         /* 4,77:1 */
  --rs-fill-pressed: #005B89;       /* 7,35:1 */
  --rs-on-fill: #FFFFFF;
  --rs-fill-rgb: 0 102 153;
  /* Kontext-Tokens der Haupt-CTA: hell = Web-Blau, dunkel (Abschnitt 05) = Akzentblau mit dunkler Schrift */
  --rs-cta-bg: var(--rs-fill);
  --rs-cta-bg-h: var(--rs-fill-hover);
  --rs-cta-bg-a: var(--rs-fill-pressed);
  --rs-cta-fg: var(--rs-on-fill);
  --rs-cta-shadow: 0 6px 18px rgb(var(--rs-fill-rgb) / .18);
  /* === Ende B2: Palette ProNet === */

  /* ── Charcoal scale (Schiefer-Skala, 04-design-marke § 5.4) ───── */
  --rs-charcoal-950: #11141A;       /* video background, darkest */
  --rs-charcoal-900: #181C23;       /* "deep": split hero, process, CTA panel, mega side column */
  --rs-charcoal-850: #1C2029;       /* top bar, compact sticky bar */
  --rs-charcoal-800: var(--rs-charcoal);
  --rs-charcoal-700: #292E3A;       /* dark cards, form card */
  --rs-charcoal-650: #2F3542;       /* dark card hover */
  --rs-charcoal-600: #323845;       /* dark input */
  --rs-charcoal-550: #373E4C;       /* dark input focus */
  --rs-charcoal-500: #3E4554;       /* subtle dark border – DO NOT override (C-16) */
  --rs-line-dark: #444B5C;          /* dark card border */
  --rs-charcoal-400: #6C7587;       /* neutral outline button border (3,44:1) */
  --rs-charcoal-350: #7A8295;       /* input border on dark (3,05:1 on #323845) */

  /* ── Light neutrals ───────────────────────────────────────────── */
  --rs-grey-50: #FAFAFA;
  --rs-grey-100: var(--rs-grey);
  --rs-grey-200: #EDEDED;           /* vulnerability card, FAQ hover */
  --rs-grey-300: #E3E7EA;           /* menu borders, separators */
  --rs-grey-400: #D9DEE2;           /* light card borders */
  --rs-grey-450: #CED4D9;           /* light button border */
  --rs-grey-600: #868F96;           /* light input border (3.29:1) */

  /* ── Text ─────────────────────────────────────────────────────── */
  --rs-text: var(--rs-charcoal);    /* 15,92:1 on white */
  --rs-text-soft: #3B4251;          /* 10,08:1 – Überschriftenfarbe der bisherigen Website */
  --rs-text-muted: #666666;         /* 5,74:1 on white, 5,27:1 on #F5F5F5 – Fließtextfarbe der bisherigen Website */
  --rs-text-on-dark: #FFFFFF;
  --rs-text-on-dark-strong: #E5E8EA;
  --rs-text-on-dark-soft: #D0D5D8;
  --rs-text-on-dark-body: #C9CED2;  /* 9.97:1 on charcoal */
  --rs-text-on-dark-subtle: #AEB4B7;
  --rs-text-on-dark-muted: #9AA1A6; /* 6.04:1 on charcoal, 5.16:1 on #2A2F34 */
  --rs-placeholder-dark: #A3AAAF;   /* 4.97:1 on #33393F */
  --rs-text-legal: #9FA7AC;

  /* ── Lines & alphas ───────────────────────────────────────────── */
  --rs-border-light: rgb(var(--rs-muted-rgb) / .28);
  --rs-border-light-soft: rgb(var(--rs-muted-rgb) / .24);
  --rs-rule-light: rgb(var(--rs-black-rgb) / .1);
  --rs-white-a05: rgb(var(--rs-white-rgb) / .05);
  --rs-white-a07: rgb(var(--rs-white-rgb) / .07);
  --rs-white-a08: rgb(var(--rs-white-rgb) / .08);
  --rs-white-a11: rgb(var(--rs-white-rgb) / .11);
  --rs-white-a12: rgb(var(--rs-white-rgb) / .12);
  --rs-white-a13: rgb(var(--rs-white-rgb) / .13);
  --rs-white-a14: rgb(var(--rs-white-rgb) / .14);
  --rs-white-a15: rgb(var(--rs-white-rgb) / .15);
  --rs-white-a55: rgb(var(--rs-white-rgb) / .55);
  --rs-white-a78: rgb(var(--rs-white-rgb) / .78);
  --rs-primary-a06: rgb(var(--rs-primary-rgb) / .06);
  --rs-primary-a08: rgb(var(--rs-primary-rgb) / .08);
  --rs-primary-a10: rgb(var(--rs-primary-rgb) / .10);
  --rs-primary-a12: rgb(var(--rs-primary-rgb) / .12);
  --rs-primary-a13: rgb(var(--rs-primary-rgb) / .13);
  --rs-primary-a14: rgb(var(--rs-primary-rgb) / .14);
  --rs-primary-a15: rgb(var(--rs-primary-rgb) / .15);
  --rs-primary-a16: rgb(var(--rs-primary-rgb) / .16);
  --rs-primary-a18: rgb(var(--rs-primary-rgb) / .18);
  --rs-primary-a20: rgb(var(--rs-primary-rgb) / .20);
  --rs-primary-a22: rgb(var(--rs-primary-rgb) / .22);
  --rs-primary-a24: rgb(var(--rs-primary-rgb) / .24);
  --rs-primary-a30: rgb(var(--rs-primary-rgb) / .30);
  --rs-primary-a32: rgb(var(--rs-primary-rgb) / .32);
  --rs-primary-a35: rgb(var(--rs-primary-rgb) / .35);
  --rs-primary-a36: rgb(var(--rs-primary-rgb) / .36);
  --rs-primary-a38: rgb(var(--rs-primary-rgb) / .38);
  --rs-primary-a40: rgb(var(--rs-primary-rgb) / .40);
  --rs-primary-a45: rgb(var(--rs-primary-rgb) / .45);
  --rs-primary-a48: rgb(var(--rs-primary-rgb) / .48);
  --rs-primary-a55: rgb(var(--rs-primary-rgb) / .55);
  --rs-secondary-a40: rgb(var(--rs-secondary-rgb) / .40);
  --rs-white-a30: rgb(var(--rs-white-rgb) / .30);   /* language switch separator (contract § 4.2) */

  /* ── Status ───────────────────────────────────────────────────── */
  --rs-success: #2E7D32;            --rs-success-on-dark: #81C995;
  --rs-warning: #B45309;            --rs-warning-on-dark: #F5C26B;
  --rs-star: #F6B500;

  /* ── Context (light default; .rs-on-dark and dark components override, section 05) ── */
  --rs-ctx-bg: var(--rs-white);
  --rs-ctx-text: var(--rs-text);
  --rs-ctx-text-soft: var(--rs-text-soft);
  --rs-ctx-text-muted: var(--rs-text-muted);
  --rs-ctx-heading: var(--rs-text);
  --rs-ctx-accent: var(--rs-secondary-ink);
  --rs-ctx-accent-hover: var(--rs-secondary-800);
  --rs-ctx-link: var(--rs-secondary-ink);
  --rs-ctx-link-hover: var(--rs-secondary-800);
  --rs-ctx-border: var(--rs-grey-400);
  --rs-ctx-rule: var(--rs-rule-light);
  --rs-ctx-rule-accent: var(--rs-secondary-a40);
  --rs-ctx-dot-bg: var(--rs-secondary-ink);
  --rs-ctx-dot-fg: var(--rs-white);
  --rs-ctx-dot-halo: none;
  --rs-ctx-quote-bg: var(--rs-grey);
  --rs-focus: var(--rs-secondary-ink);

  /* form controls (light defaults; dark values in section 05) */
  --rs-input-bg: var(--rs-white);
  --rs-input-bg-focus: var(--rs-white);
  --rs-input-fg: var(--rs-text);
  --rs-input-border: var(--rs-grey-600);         /* 3.29:1 – WCAG 1.4.11 */
  --rs-input-placeholder: var(--rs-text-muted);  /* 5.41:1 */
  --rs-label-c: var(--rs-text);
  --rs-error-c: var(--rs-danger);
  --rs-success-c: var(--rs-success);

  /* ── Typography ───────────────────────────────────────────────── */
  --rs-font: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --rs-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --rs-fw-regular: 400;
  --rs-fw-bold: 700;
  --rs-fw-black: 900;

  --rs-fs-display: clamp(1.5625rem, 0.9606rem + 2.4691vw, 2.8125rem); /* 25 → 45px */
  --rs-fs-tagline: clamp(1.25rem, 0.8889rem + 1.4815vw, 2rem);        /* 20 → 32px */
  --rs-fs-h1: clamp(2rem, 1.3333rem + 1.3889vw, 2.375rem);            /* 32 → 38px */
  --rs-fs-h2: clamp(1.5rem, 0.6111rem + 1.8519vw, 2rem);              /* 24 → 32px */
  --rs-fs-h3: clamp(1.25rem, 0.8056rem + 0.9259vw, 1.5rem);           /* 20 → 24px */
  --rs-fs-h4: clamp(1.125rem, 0.6806rem + 0.9259vw, 1.375rem);        /* 18 → 22px */
  --rs-fs-h5: clamp(1rem, 0.7778rem + 0.463vw, 1.125rem);             /* 16 → 18px */
  --rs-fs-h6: 0.9375rem;                                               /* 15px */
  --rs-fs-hero-lead: clamp(1.125rem, 1.0648rem + 0.2469vw, 1.25rem);  /* 18 → 20px */
  --rs-fs-summary: clamp(1.0625rem, 1.8vw, 1.25rem);                  /* 17 → 20px */
  --rs-fs-stat: clamp(1.5rem, 3vw, 2rem);                             /* 24 → 32px */
  --rs-fs-lg: 1.25rem;            /* 20px */
  --rs-fs-card-title: 1.25rem;    /* 20px */
  --rs-fs-lead: 1.125rem;         /* 18px */
  --rs-fs-intro: 1.0625rem;       /* 17px */
  --rs-fs-body: 1.0625rem;        /* 17px */
  --rs-fs-btn: 1rem;              /* 16px */
  --rs-fs-ui: 0.9375rem;          /* 15px */
  --rs-fs-small: 0.875rem;        /* 14px */
  --rs-fs-meta: 0.8125rem;        /* 13px */
  --rs-fs-label: 0.75rem;         /* 12px */
  --rs-fs-micro: 0.6875rem;       /* 11px – minimum on the RS site */

  --rs-lh-display: 1.1;
  --rs-lh-heading: 1.2;
  --rs-lh-snug: 1.3;
  --rs-lh-h4: 1.4;
  --rs-lh-ui: 1.45;
  --rs-lh-body: 1.6;
  --rs-lh-copy: 1.65;
  --rs-lh-relaxed: 1.7;
  --rs-lh-footer: 1.75;

  --rs-ls-tagline: 3px;
  --rs-ls-eyebrow: 0.16em;
  --rs-ls-label: 0.14em;
  --rs-ls-kicker: 0.12em;
  --rs-ls-badge: 0.06em;
  --rs-ls-caps: 0.05em;
  --rs-ls-tight: -0.02em;
  --rs-ls-display: -0.035em;

  /* ── Spacing ──────────────────────────────────────────────────── */
  --rs-space-1: 0.25rem;
  --rs-space-2: 0.5rem;
  --rs-space-3: 0.75rem;
  --rs-space-4: 1rem;
  --rs-space-5: 1.25rem;
  --rs-space-6: 1.5rem;
  --rs-space-7: 1.75rem;
  --rs-space-8: 2rem;
  --rs-space-10: 2.5rem;
  --rs-space-11: 2.75rem;
  --rs-space-12: 3rem;
  --rs-space-14: 3.5rem;
  --rs-space-16: 4rem;
  --rs-space-20: 5rem;
  --rs-space-24: 6rem;
  --rs-space-28: 7rem;

  --rs-section-pad-y: 7rem;          /* section rhythm: 7rem → 6rem (≤1024) → 4rem (≤767) */
  --rs-section-pad-x: 40px;          /* 40px → 30px → 20px */
  --rs-section-y: clamp(4rem, 2.5556rem + 5.9259vw, 7rem);          /* fluid 64 → 112px */
  --rs-module-pad: clamp(3.5rem, 7vw, 6rem) 1.5rem;                 /* .sector-* */
  --rs-gutter: clamp(1rem, 0.2778rem + 2.963vw, 2.5rem);            /* 16 → 40px */
  --rs-gap-xs: 0.75rem;
  --rs-gap-sm: 1rem;
  --rs-gap: 1.25rem;
  --rs-gap-lg: 1.5rem;
  --rs-gap-split: clamp(2.5rem, 5vw, 4rem);
  --rs-gap-split-fluid: clamp(2rem, 6vw, 5rem);
  --rs-gap-split-xl: 5rem;

  /* ── Containers (01) ──────────────────────────────────────────── */
  --rs-container: 1200px;
  --rs-container-wide: 1240px;
  --rs-container-module: 1180px;
  --rs-container-cta: 880px;
  --rs-container-trust: 780px;
  --rs-container-narrow: 760px;
  --rs-measure: 46rem;

  /* ── Radii ────────────────────────────────────────────────────── */
  --rs-radius-xs: 5px;
  --rs-radius-sm: 6px;
  --rs-radius-7: 7px;
  --rs-radius-md: 8px;
  --rs-radius-9: 9px;
  --rs-radius-lg: 10px;
  --rs-radius-icon: 11px;
  --rs-radius-xl: 12px;
  --rs-radius-2xl: 14px;
  --rs-radius-notch: 15px;
  --rs-radius-3xl: 18px;
  --rs-radius-pill: 999px;

  /* ── Shadows ──────────────────────────────────────────────────── */
  --rs-shadow-xs: 0 2px 5px rgb(var(--rs-black-rgb) / .1);
  --rs-shadow-notch: 5px 5px 10px 0 rgb(var(--rs-black-rgb) / .1);
  --rs-shadow-card: 0 8px 24px rgb(var(--rs-charcoal-rgb) / .07);
  --rs-shadow-card-hover: 0 14px 32px rgb(var(--rs-charcoal-rgb) / .13);
  --rs-shadow-card-faint: 0 8px 24px rgb(var(--rs-charcoal-rgb) / .04);
  --rs-shadow-card-soft: 0 12px 30px rgb(var(--rs-charcoal-rgb) / .06);
  --rs-shadow-dark: 0 12px 30px rgb(var(--rs-black-rgb) / .18);
  --rs-shadow-dark-hover: 0 22px 46px rgb(var(--rs-black-rgb) / .3);
  --rs-shadow-dark-focus: 0 18px 42px rgb(var(--rs-black-rgb) / .25), 0 0 0 3px var(--rs-primary-a24);
  --rs-shadow-dark-soft: 0 12px 28px rgb(var(--rs-charcoal-rgb) / .18);
  --rs-shadow-highlight: 0 14px 30px rgb(var(--rs-charcoal-rgb) / .2);
  --rs-shadow-lifted: 0 14px 34px rgb(var(--rs-black-rgb) / .2);
  --rs-shadow-trust: 0 16px 34px rgb(var(--rs-black-rgb) / .22);
  --rs-shadow-panel: 0 18px 42px rgb(var(--rs-black-rgb) / .38);
  --rs-shadow-embed: 0 18px 42px rgb(var(--rs-black-rgb) / .28);
  --rs-shadow-cta: 0 20px 46px rgb(var(--rs-black-rgb) / .32);
  --rs-shadow-video: 0 24px 60px rgb(var(--rs-black-rgb) / .4);
  --rs-shadow-portal: 0 24px 60px -28px rgb(var(--rs-black-rgb) / .28);
  --rs-shadow-megamenu: 0 24px 65px rgb(var(--rs-deep-rgb) / .18);
  --rs-shadow-overlay: 0 2px 4px rgb(var(--rs-black-rgb) / .06), 0 8px 16px rgb(var(--rs-black-rgb) / .1);
  --rs-shadow-btn: 0 6px 18px var(--rs-primary-a20);
  --rs-shadow-btn-sm: 0 4px 12px var(--rs-primary-a16);
  --rs-halo: 0 0 0 5px var(--rs-primary-a12);
  --rs-ring: 0 0 0 3px var(--rs-primary-a38);
  --rs-ring-input: 0 0 0 3px var(--rs-primary-a35);
  --rs-ring-on-dark: 0 0 0 3px var(--rs-white-a55);

  /* ── Motion ───────────────────────────────────────────────────── */
  --rs-dur-instant: 100ms;          /* link/button colour */
  --rs-dur-fast: 140ms;             /* mega-menu items, tabs */
  --rs-dur-form: 150ms;             /* inputs, submit, buttons */
  --rs-dur-btn: 160ms;
  --rs-dur-card: 180ms;             /* cards, footer links, round arrow */
  --rs-dur-base: 200ms;             /* TOC, sub-menus, drawer */
  --rs-dur-accordion: 250ms;
  --rs-dur-overlay: 300ms;          /* mega-menu fadeInDown */
  --rs-dur-slow: 500ms;
  --rs-dur-slower: 600ms;
  --rs-ease: ease;
  --rs-ease-in-out: ease-in-out;
  --rs-ease-slide: cubic-bezier(.16, .68, .43, .99);
  --rs-ease-swing: cubic-bezier(.37, 0, .63, 1);   /* ≈ jQuery "swing" */

  /* ── Z-index (01; page-level layers below in the contract block) ── */
  --rs-z-below: -1;
  --rs-z-base: 1;
  --rs-z-raised: 2;
  --rs-z-overlap: 3;
  --rs-z-header-wrap: 10;
  --rs-z-dropdown: 100;
  --rs-z-topbar: 1100;
  --rs-z-megamenu: 1200;
  --rs-z-mobile-nav: 1300;

  /* viewport width without scrollbar – main.js overwrites with clientWidth (02) */
  --vw: 100vw;

  /* ── Danger (ProNet: only error states – validation, toasts; E5) ── */
  --rs-danger: #C62828;             /* white on it 5.62:1 */
  --rs-danger-hover: #B71C1C;       /* white on it 6.6:1 */
  --rs-danger-pressed: #A31515;
  --rs-danger-soft: rgb(198 40 40 / .12);
  --rs-danger-border: rgb(198 40 40 / .45);
  --rs-danger-on-dark: #F28B82;     /* red text on charcoal */
  --rs-on-danger: #FFFFFF;
  --rs-danger-focus: #FFFFFF;       /* light focus ring: 3px white + 5px charcoal halo */
  --rs-danger-rgb: 198 40 40;
  /* spec/02 names as aliases (check scripts look for them) */
  --c-danger: var(--rs-danger);
  --c-danger-hover: var(--rs-danger-hover);
  --c-danger-soft: var(--rs-danger-soft);

  /* ── 08 B-2 additions ─────────────────────────────────────────── */
  --rs-warning-rgb: 180 83 9;
  --rs-dur-faq: 400ms;
  --rs-dur-reveal: 600ms;
  --rs-delay-zoom: 200ms;
  --rs-ease-out: cubic-bezier(.2, .7, .2, 1);
  --rs-ease-tooltip: cubic-bezier(.64, .09, .08, 1);
  --rs-ease-material: cubic-bezier(.4, 0, .2, 1);
  --rs-shift: 1rem;

  /* ── Layout (replaces 01 values) ──────────────────────────────── */
  --rs-topbar-h: 3.625rem;          /* start value; main.js writes the measured value (0 ≤ 768 px) */
  --rs-stuck-h: 0px;                /* height of the compact sticky bar, see overrides */
  --rs-header-h: 112px;             /* desktop header row (design preview); < 1200 px: 68 px */
  --rs-scroll-offset: calc(var(--rs-topbar-h) + var(--rs-stuck-h) + 1.5rem);
  --rs-logo-h: clamp(32px, calc(2.5vw + 2px), 44px);
  --rs-logo-h-compact: clamp(28px, 7.2vw, 36px);
  --rs-hero-pt: 13em;

  /* ── Z-index (contract § 1.5) ─────────────────────────────────── */
  --rs-z-backtotop: 900;
  --rs-z-consent: 990;
  --rs-z-langhint: 995;
  --rs-z-header: 1000;
  --rs-z-toast: 1250;
  --rs-z-skip: 10000;

  /* ── Wedge / tone colours (shapes, contract § 1.10) ───────────── */
  --rs-tone-white: var(--rs-white);
  --rs-tone-grey: var(--rs-grey);
  --rs-tone-dark: var(--rs-charcoal);
  --rs-tone-deep: var(--rs-charcoal-900);
}

/* Aliases (08 B-2) – code ported from analysis 02 (header) and 06 (behaviours)
   runs unchanged on the 01 token set. */
:root {
  --rs-blue: var(--rs-primary);
  --rs-blue-2: var(--rs-secondary);
  --rs-blue-hover: var(--rs-primary-300);
  --rs-blue-tint: var(--rs-primary-50);
  --rs-line: var(--rs-grey-300);
  --rs-muted: var(--rs-text-muted);
  --rs-on-dark-1: #EDF1F4;          /* header/mega/drawer text tones = design preview values */
  --rs-on-dark-2: var(--rs-text-on-dark-soft);
  --rs-on-dark-3: #C6CDD3;
  --rs-on-dark-4: #AEB6BD;
  --rs-on-dark-5: #98A1A8;
  --rs-panel-shadow: var(--rs-shadow-megamenu);
  --rs-dur-drawer: var(--rs-dur-base);
  --rs-ease-drawer: var(--rs-ease-slide);
  --rs-dur-link: var(--rs-dur-instant);
  --rs-dur-menu: var(--rs-dur-fast);
  --rs-dur-field: var(--rs-dur-form);
  --rs-dur-button: var(--rs-dur-btn);
  --rs-dur-ui: var(--rs-dur-base);
  --rs-dur-zoom: var(--rs-dur-slow);
  --rs-ease-offside: var(--rs-ease-slide);
  --rs-hover-light: var(--rs-primary-25);
  --rs-soft: var(--rs-primary-50);
  --rs-error-on-dark: var(--rs-danger-on-dark);
  --rs-error-on-light: var(--rs-danger);
}

/* Media-query overrides (contract § 1.6 – the 01 § 11 overrides are dropped) */
@media (max-width: 74.99em) { :root { --rs-hero-pt: 10em; --rs-stuck-h: 68px; --rs-header-h: 68px; } }   /* no top bar, compact 68 px header row */
@media (max-width: 1024px)  { :root { --rs-section-pad-y: 6rem; --rs-section-pad-x: 30px; } }
@media (max-width: 768px)   { :root { --rs-topbar-h: 0px; --rs-hero-pt: 10em; --rs-module-pad: 3.5rem 1.1rem; } }
@media (max-width: 767px)   { :root { --rs-section-pad-y: 4rem; --rs-section-pad-x: 20px; } }

/* ===== 02 Fonts ===== */
/* Self-hosted Lato (SIL OFL 1.1, assets/fonts/LICENSE-Lato-OFL.txt), 08 B-3.
   400 / 700 / 900, latin + latin-ext (latin-ext loads on demand via unicode-range).
   B2 (Budget 05-seo.md § 11: höchstens 3 WOFF2 ≤ 75 kB): keine Kursive mehr – <em> erscheint als vom Browser
   geneigte Lato 400, damit auch Seiten mit Hervorhebungen bei den drei vorab geladenen Dateien bleiben.
   Preloads (head-meta.php): latin 400, 700, 900. */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/lato-latin-400-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: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/lato-latin-ext-400-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;
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/lato-latin-700-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: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/lato-latin-ext-700-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;
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/lato-latin-900-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: "Lato";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/lato-latin-ext-900-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;
}

/* ===== 03 Base ===== */
/* Element defaults (01 § 4.5/§ 5, C-25 list margins),
   running-text links (01 § 9.2), global focus fallback (06 block 1). */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: 100%;                       /* 1rem = 16px, as on the reference */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--rs-scroll-offset);   /* anchors land below the fixed bars */
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  background-color: var(--rs-white);
  color: var(--rs-text);
  font-family: var(--rs-font);
  font-size: var(--rs-fs-body);
  font-weight: var(--rs-fw-regular);
  line-height: var(--rs-lh-body);
  overflow-wrap: break-word;             /* long German compounds/URLs never force a horizontal scrollbar */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* the hidden attribute always wins (JS toggles it; no-JS fallbacks override with !important) */
[hidden] { display: none !important; }

/* <main tabindex="-1"> receives focus from the skip link – no outline around the whole page */
main[tabindex="-1"]:focus { outline: none; }

/* headings */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 1.25rem;
  color: var(--rs-ctx-heading);
  font-family: inherit;
  overflow-wrap: break-word;
  hyphens: auto;                         /* <html lang="de|en"> drives the hyphenation dictionary */
}
h1 { font-size: var(--rs-fs-h1); font-weight: var(--rs-fw-black); line-height: var(--rs-lh-heading); }
h2 { font-size: var(--rs-fs-h2); font-weight: var(--rs-fw-black); line-height: var(--rs-lh-snug); }
h3 { font-size: var(--rs-fs-h3); font-weight: var(--rs-fw-regular); line-height: var(--rs-lh-snug); }  /* reference: 500 → renders 400 */
h4 { font-size: var(--rs-fs-h4); font-weight: var(--rs-fw-black); line-height: var(--rs-lh-h4); }
h5 { font-size: var(--rs-fs-h5); font-weight: var(--rs-fw-black); line-height: var(--rs-lh-body); }
h6 { font-size: var(--rs-fs-h6); font-weight: var(--rs-fw-regular); line-height: var(--rs-lh-body); }

/* block spacing (GP: p 0 0 1.5em) */
p, dl, address, figure, blockquote, pre, table { margin: 0 0 1.5em; }
/* GP list model (C-25): margin 0 0 1.5em 3em, padding 0; nested lists 1.5em.
   Every component list resets this explicitly. */
ul, ol { margin: 0 0 1.5em 3em; padding: 0; }
li > ul, li > ol { margin: 0 0 0 1.5em; }
dd { margin: 0; }

strong, b { font-weight: var(--rs-fw-bold); }
em, i { font-style: italic; }            /* B2: synthetische Neigung (keine Kursiv-Datei, Budget § 11) */
small { font-size: var(--rs-fs-meta); }
address { font-style: normal; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -.5em; }
sub { bottom: -.25em; }

img, svg, video, canvas { max-width: 100%; height: auto; }
img, video, canvas { display: block; }
svg { flex-shrink: 0; }
iframe { border: 0; }

button, input, select, textarea { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
fieldset { min-width: 0; }
summary { cursor: pointer; }

code, kbd, samp, pre { font-family: var(--rs-font-mono); font-size: .92em; }
code { padding: .1em .3em; border-radius: 4px; background: rgb(var(--rs-charcoal-rgb) / .07); }
pre { overflow-x: auto; padding: 1rem 1.25rem; border-radius: var(--rs-radius-sm); background: var(--rs-charcoal-950); color: var(--rs-text-on-dark-strong); line-height: 1.55; }
pre code { padding: 0; border-radius: 0; background: none; color: inherit; font-size: inherit; }
kbd { padding: .1em .35em; border: 1px solid var(--rs-grey-450); border-radius: 4px; background: var(--rs-grey); }
mark { padding: 0 .1em; border-radius: 2px; background: var(--rs-primary-a35); color: inherit; }

hr { height: 1px; margin: 2.5rem 0; border: 0; background: var(--rs-ctx-rule); }

::selection { background: var(--rs-primary-a35); }

/* links (01 § 9.2): colour from the context (#356E8D on light, #68AED6 on dark) */
a {
  color: var(--rs-ctx-link);
  text-decoration: none;
  transition: color var(--rs-dur-instant) ease-in-out, background-color var(--rs-dur-instant) ease-in-out, text-decoration-color var(--rs-dur-instant) ease-in-out;
}
a:hover { color: var(--rs-ctx-link-hover); }

/* links inside running text must not rely on colour alone (WCAG 1.4.1).
   Specificity (0,1,1) – component rules such as ".rs-breadcrumb a" (later in
   this file) override it. */
:where(.rs-prose) a:not([class]),
:where(p, li, dd, td, th, figcaption, address) > a:not([class]),
:where(p, li, dd, td, th, figcaption, address) > a.rs-link-external {   /* B2: externe Links im Fließtext (md_inline) ebenso */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  text-decoration-color: var(--rs-primary-a55);
}
:where(.rs-prose) a:not([class]):hover,
:where(p, li, dd, td, th, figcaption, address) > a:not([class]):hover,
:where(p, li, dd, td, th, figcaption, address) > a.rs-link-external:hover { text-decoration-color: currentColor; }

/* focus: zero-specificity fallback (06); component rules refine it.
   --rs-focus = #356E8D on light (5.58:1), #68AED6 on dark (6.49:1). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--rs-focus);
  outline-offset: 3px;
}
a:focus-visible { outline-width: 2px; border-radius: 2px; }
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

/* GP parity: colour/background transitions on links, buttons, inputs */
:where(button, input) {
  transition: color var(--rs-dur-instant) ease-in-out, background-color var(--rs-dur-instant) ease-in-out;
}


/* page shell (layout.php: body.rs-page > .site-top, main, footer …): short pages such as 404 or
   "Danke" keep the footer at the bottom of the viewport */
.rs-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.rs-page > main { flex: 1 0 auto; }
/* ===== 04 Layout ===== */
/* Containers, generic sections and grids (01 § 5.6, 08 B-10). The horizontal
   space always comes from the container gutter (≥ 16 px). */
.rs-container {
  width: 100%;
  max-width: calc(var(--rs-container) + 2 * var(--rs-gutter));
  margin-inline: auto;
  padding-inline: var(--rs-gutter);
}
.rs-container--wide   { max-width: calc(var(--rs-container-wide) + 2 * var(--rs-gutter)); }
.rs-container--module { max-width: calc(var(--rs-container-module) + 2 * var(--rs-gutter)); }
.rs-container--narrow { max-width: calc(var(--rs-container-narrow) + 2 * var(--rs-gutter)); }

/* generic section: 7rem → 6rem (≤ 1024) → 4rem (≤ 767) (01 section rhythm) */
.rs-section { position: relative; padding-block: var(--rs-section-pad-y); }
.rs-section--fluid  { padding-block: var(--rs-section-y); }
.rs-section--module { padding-block: clamp(3.5rem, 7vw, 6rem); }
.rs-section--grey   { background-color: var(--rs-grey); }
.rs-section--dark   { background-color: var(--rs-charcoal); }
.rs-section--deep   { background-color: var(--rs-charcoal-900); }
@media (max-width: 768px) { .rs-section--module { padding-block: 3.5rem; } }

/* grids: 3/4 columns → 2 (≤ 1024) → 1 (≤ 560); 2 columns → 1 (≤ 768) */
.rs-grid {
  --rs-cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--rs-cols), minmax(0, 1fr));
  gap: var(--rs-gap);
}
.rs-grid--2 { --rs-cols: 2; }
.rs-grid--3 { --rs-cols: 3; }
.rs-grid--4 { --rs-cols: 4; }
@media (max-width: 1024px) { .rs-grid--3, .rs-grid--4 { --rs-cols: 2; } }
@media (max-width: 768px)  { .rs-grid--2 { --rs-cols: 1; } }
@media (max-width: 560px)  { .rs-grid--3, .rs-grid--4 { --rs-cols: 1; } }
/* list reset for grids built from <ul>; children stretch to equal heights (B-10) */
.rs-grid--list { margin: 0; padding: 0; list-style: none; }
.rs-grid--list > li { display: flex; min-width: 0; }
.rs-grid--list > li > * { flex: 1 1 auto; min-width: 0; }

/* split layout (hero-like 1.05fr / .95fr, even 50/50) */
.rs-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(min(22rem, 100%), .95fr);
  align-items: center;
  gap: var(--rs-gap-split);
}
.rs-split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rs-gap-split-xl); }
@media (max-width: 1024px) {
  .rs-split { grid-template-columns: minmax(0, 1fr); max-width: var(--rs-container-narrow); margin-inline: auto; }
  .rs-split--even { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
}

/* ===== 05 Context ===== */
/* Colour context (01 context.css + 08 B-2 list + contract § 1.1).
   1) Dark wrappers and dark-surface components switch to the dark context:
      text, headings, accents, borders, focus colour and form-control tokens.
   2) White-surface components reset to the light context, so a white card in a
      dark band (or a dark panel in a light band) always keeps readable text.
   Components read --rs-ctx-* / --rs-input-* and adapt automatically. */
.rs-on-dark,
.rs-section--dark,
.rs-section--deep,
.rs-home-hero,
.rs-hero,
.rs-page-hero,
.rs-split-panels,
.rs-process-section,
.rs-services-band,
.rs-industries,
.rs-related,
.rs-report,
.rs-cta-section,
.rs-cta-band,
.rs-form-band,
.rs-media--box,
.rs-panel,
.rs-service-card,
.rs-industry-card,
.rs-why-card,
.rs-form-card,
.rs-cta-panel,
.rs-video,
.rs-video-box,
.rs-vulns__intro,
.rs-vulns__cta,
.rs-toc,
.rs-term__service,
.rs-consent,
.rs-lang-hint,
.rs-toast,
.topbar,
.site-header,
.nav__drawer,
.mega__aside,
.mega__intro,
.mega__cta,
.rs-footer {
  --rs-ctx-bg: var(--rs-charcoal);
  --rs-ctx-text: var(--rs-text-on-dark-body);
  --rs-ctx-text-soft: var(--rs-text-on-dark-soft);
  --rs-ctx-text-muted: var(--rs-text-on-dark-subtle);
  --rs-ctx-heading: var(--rs-text-on-dark);
  --rs-ctx-accent: var(--rs-primary);
  --rs-ctx-accent-hover: var(--rs-primary-200);
  --rs-ctx-link: var(--rs-primary);
  --rs-ctx-link-hover: var(--rs-primary-200);
  --rs-ctx-border: var(--rs-line-dark);
  --rs-ctx-rule: var(--rs-white-a12);
  --rs-ctx-rule-accent: var(--rs-primary-a40);
  --rs-ctx-dot-bg: var(--rs-primary);
  --rs-ctx-dot-fg: var(--rs-on-primary);
  --rs-ctx-dot-halo: var(--rs-halo);
  --rs-ctx-quote-bg: var(--rs-charcoal-700);
  --rs-input-bg: var(--rs-charcoal-600);
  --rs-input-bg-focus: var(--rs-charcoal-550);
  --rs-input-fg: var(--rs-white);
  --rs-input-border: var(--rs-charcoal-350);          /* 3.54:1 */
  --rs-input-placeholder: var(--rs-placeholder-dark); /* 4.97:1 */
  --rs-label-c: var(--rs-text-on-dark-strong);
  --rs-error-c: var(--rs-danger-on-dark);
  --rs-success-c: var(--rs-success-on-dark);
  --rs-focus: var(--rs-primary);
  /* B2 (Variante B): Haupt-CTA auf dunklen Flächen = Akzentblau mit dunkler Schrift (8,06:1) */
  --rs-cta-bg: var(--rs-primary);
  --rs-cta-bg-h: var(--rs-primary-300);
  --rs-cta-bg-a: var(--rs-primary-pressed);
  --rs-cta-fg: var(--rs-on-primary);
  --rs-cta-shadow: 0 4px 14px rgb(var(--rs-primary-rgb) / .2);
  color: var(--rs-ctx-text);
}

.rs-on-light,
.rs-split-panels--light,
.rs-process-section--light,
.rs-card,
.rs-card-soft,
.rs-icon-card,
.rs-vuln-card,
.rs-feature-card,
.rs-link-card,
.rs-benefit-card,
.rs-faq__item,
.rs-include--light,
.rs-term__facts,
.rs-pager__link,
.mega {
  --rs-ctx-bg: var(--rs-white);
  --rs-ctx-text: var(--rs-text);
  --rs-ctx-text-soft: var(--rs-text-soft);
  --rs-ctx-text-muted: var(--rs-text-muted);
  --rs-ctx-heading: var(--rs-text);
  --rs-ctx-accent: var(--rs-secondary-ink);
  --rs-ctx-accent-hover: var(--rs-secondary-800);
  --rs-ctx-link: var(--rs-secondary-ink);
  --rs-ctx-link-hover: var(--rs-secondary-800);
  --rs-ctx-border: var(--rs-grey-400);
  --rs-ctx-rule: var(--rs-rule-light);
  --rs-ctx-rule-accent: var(--rs-secondary-a40);
  --rs-ctx-dot-bg: var(--rs-secondary-ink);
  --rs-ctx-dot-fg: var(--rs-white);
  --rs-ctx-dot-halo: none;
  --rs-ctx-quote-bg: var(--rs-grey);
  --rs-input-bg: var(--rs-white);
  --rs-input-bg-focus: var(--rs-white);
  --rs-input-fg: var(--rs-text);
  --rs-input-border: var(--rs-grey-600);
  --rs-input-placeholder: var(--rs-text-muted);
  --rs-label-c: var(--rs-text);
  --rs-error-c: var(--rs-danger);
  --rs-success-c: var(--rs-success);
  --rs-focus: var(--rs-secondary-ink);
  /* B2 (Variante B): Haupt-CTA auf hellen Flächen = Web-Blau mit weißer Schrift (6,25:1) */
  --rs-cta-bg: var(--rs-fill);
  --rs-cta-bg-h: var(--rs-fill-hover);
  --rs-cta-bg-a: var(--rs-fill-pressed);
  --rs-cta-fg: var(--rs-on-fill);
  --rs-cta-shadow: 0 6px 18px rgb(var(--rs-fill-rgb) / .18);
  color: var(--rs-ctx-text);
}

/* light form card (B-14) – .rs-form-card is dark by default */
.rs-form-card.rs-form-card--light {
  --rs-ctx-bg: var(--rs-white);
  --rs-ctx-text: var(--rs-text);
  --rs-ctx-text-soft: var(--rs-text-soft);
  --rs-ctx-text-muted: var(--rs-text-muted);
  --rs-ctx-heading: var(--rs-text);
  --rs-ctx-accent: var(--rs-secondary-ink);
  --rs-ctx-accent-hover: var(--rs-secondary-800);
  --rs-ctx-link: var(--rs-secondary-ink);
  --rs-ctx-link-hover: var(--rs-secondary-800);
  --rs-ctx-border: var(--rs-grey-400);
  --rs-ctx-rule: var(--rs-rule-light);
  --rs-ctx-rule-accent: var(--rs-secondary-a40);
  --rs-ctx-dot-bg: var(--rs-secondary-ink);
  --rs-ctx-dot-fg: var(--rs-white);
  --rs-ctx-dot-halo: none;
  --rs-ctx-quote-bg: var(--rs-grey);
  --rs-input-bg: var(--rs-white);
  --rs-input-bg-focus: var(--rs-white);
  --rs-input-fg: var(--rs-text);
  --rs-input-border: var(--rs-grey-600);            /* 3.29:1 */
  --rs-input-placeholder: var(--rs-text-muted);     /* 5,74:1 */
  --rs-label-c: var(--rs-text);
  --rs-error-c: var(--rs-danger);
  --rs-success-c: var(--rs-success);
  --rs-focus: var(--rs-secondary-ink);
  --rs-cta-bg: var(--rs-fill);                      /* B2: Variante B auf heller Formkarte */
  --rs-cta-bg-h: var(--rs-fill-hover);
  --rs-cta-bg-a: var(--rs-fill-pressed);
  --rs-cta-fg: var(--rs-on-fill);
  --rs-cta-shadow: 0 6px 18px rgb(var(--rs-fill-rgb) / .18);
  color: var(--rs-text);
}

/* ===== 06 Motion ===== */
/* Keyframes (01 § 8, 08 B-2, contract § 5.1.4). Durations live in the tokens;
   section 25 switches every animation/transition off for reduced motion. */
@keyframes rs-fade-in-down {               /* mega menus, sticky bar, dialog ("fade in down") */
  from { opacity: 0; transform: translateY(calc(-1 * var(--rs-shift))); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes rs-fade-in-up {                 /* consent banner, language hint, toasts */
  from { opacity: 0; transform: translateY(var(--rs-shift)); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes rs-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes rs-blink { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

/* ===== 07 Utilities & Icons ===== */
/* screen-reader utility under both names (06-main.js creates .visually-hidden twins) */
.rs-visually-hidden,
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* skip link – revealed with :focus-visible only (C-22; main.js focuses it programmatically) */
.rs-skip-link {
  position: absolute;
  top: -100px;
  left: .5rem;
  z-index: var(--rs-z-skip);
  padding: .875rem 1.4rem;
  border-radius: var(--rs-radius-sm);
  background: var(--rs-white);
  color: var(--rs-charcoal);
  font-weight: var(--rs-fw-bold);
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 0 2px 2px rgb(var(--rs-black-rgb) / .6);
}
.rs-skip-link:focus-visible {
  top: .5rem;
  outline: 3px solid var(--rs-secondary-ink);
  outline-offset: 2px;
}

/* sprite icons (contract § 1.7): the Lucide symbols carry no presentation
   attributes – stroke styling comes from here; rs-* symbols set fill/stroke on
   their own paths (wins over inheritance). Size = 1em unless a component sets it. */
.icon,
.rs-icon {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  vertical-align: -.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

/* required marker */
.rs-req { margin-left: .15em; color: inherit; font-weight: var(--rs-fw-bold); }
.rs-req[hidden] { display: none; }

/* no line break right after short prefixes in headings („IT-|Sicherheit“); set by rs_nobreak() */
.rs-nowrap { white-space: nowrap; }

/* ===== 08 Header & Navigation ===== */
/* Client-approved design preview (_vorschau/design-vorschau.html, spec/10 item 2: "perfekt" –
   header, top bar, mega menus, drawer exactly as there) on the contract markup (§ 4.2–4.7).
   States (preview): ≥ 1200 px top bar fixed (58 px) + transparent 112 px header row over the hero
   that scrolls away; < 1200 px no top bar, compact 68 px charcoal header row that always stays
   on top (logo · Beratung · burger) + off-canvas drawer.
   Stacking inside .site-top (own stacking context, z 1000): mega panels 50,
   header row 1050, top bar 1100, backdrop 1150, drawer 1200. */

/* ---------- 8.1 Header group --------------------------------------------- */
.site-top {
  position: absolute;                    /* overlays the dark hero – no layout shift */
  inset: 0 0 auto;
  z-index: var(--rs-z-header);
  font-family: var(--rs-font);
}
:where(.site-top) ul,
:where(.site-top) ol { margin: 0; padding: 0; list-style: none; }
:where(.site-top) p { margin: 0; }

/* ---------- 8.2 Top bar (fixed, ≥ 769 px; B2: ProNet-Vorschau, spec/00-sitemap § 2.1) ---------- */
.topbar {
  position: fixed;                       /* stays while the header row scrolls away */
  inset: 0 0 auto;
  z-index: 1100;
  height: 58px;                          /* = --rs-topbar-h (incl. border) */
  padding: 0 var(--rs-gutter);
  border-bottom: 1px solid rgb(var(--rs-primary-rgb) / .32);
  background: var(--rs-charcoal-850);
  color: var(--rs-white);
  transition: box-shadow var(--rs-dur-base) ease;
}
html[data-scrolled] .topbar { box-shadow: 0 6px 18px rgb(var(--rs-black-rgb) / .28); }
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: var(--rs-container-wide);   /* 1240 px */
  height: 100%;
  margin: 0 auto;
}
.topbar__actions { display: flex; align-items: center; gap: 1.25rem; min-width: 0; margin-left: auto; }
.topbar__contact {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--rs-white);
  font-size: .84375rem;                  /* 13.5 px */
  font-weight: var(--rs-fw-bold);
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
}
.topbar__contact .icon { width: 15px; height: 15px; color: var(--rs-primary); stroke-width: 2; }
.topbar__label { color: var(--rs-white); }
.topbar__value { color: var(--rs-primary); transition: color var(--rs-dur-instant) ease; }   /* 7,12:1 on #1C2029 */
.topbar__contact:hover { color: var(--rs-white); }
.topbar__contact:hover .topbar__value { color: var(--rs-primary-200); text-decoration: underline; text-underline-offset: 3px; }
.topbar__cta {                           /* = preview .btn.btn--accent.btn--sm (8,06:1) */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 36px;
  padding: .55rem .9rem;
  border: 1px solid var(--rs-primary);
  border-radius: var(--rs-radius-xs);
  background: var(--rs-primary);
  box-shadow: 0 4px 14px rgb(var(--rs-primary-rgb) / .2);
  color: var(--rs-on-primary);
  font-size: var(--rs-fs-meta);          /* 13 px */
  font-weight: var(--rs-fw-black);
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--rs-dur-form) ease, border-color var(--rs-dur-form) ease, color var(--rs-dur-form) ease;
}
.topbar__cta .icon { width: 1.05em; height: 1.05em; stroke-width: 2.25; transition: transform var(--rs-dur-form) ease; }
.topbar__cta:hover { border-color: var(--rs-primary-300); background: var(--rs-primary-300); color: var(--rs-on-primary); }
.topbar__cta:hover .icon { transform: translateX(3px); }
.topbar__contact:focus-visible,
.topbar__cta:focus-visible { outline: 2px solid var(--rs-white); outline-offset: 3px; }
@media (max-width: 1023px) {             /* 769–1023 px: ohne Geschäftszeiten und Feldbezeichnungen (Vorschau) */
  .topbar__start { gap: 1rem; }
  .topbar__actions { gap: .9rem; }
  .topbar__hours,
  .topbar__label { display: none; }
}
@media (max-width: 768px) {              /* ≤ 768 px: keine Top-Bar, kompakter Header mit „Beratung“ (spec § 2.6) */
  .topbar { display: none; }
}

/* ---------- 8.3 Beratungs-CTA „Kostenlose Beratung“ (Slot des Alarm-Buttons der Vorlage) -- */
/* === B1a: consult-cta === */
/* Haupt-CTA (Kundenentscheidung 5): Akzentfarbe statt Rot, keine Pulsanimation.
   Varianten: topbar (≥ 769 px), header (kompakt „Beratung“, nur ≤ 768 px links vom Burger, spec/00-sitemap § 2.6),
   drawer und block (volle Breite). Feinschliff B2: Werte der ProNet-Vorschau (.btn--accent, .btn--sm/.btn--lg). */
.rs-consult {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 36px;
  padding: .55rem .9rem;
  border: 1px solid var(--rs-cta-bg);    /* B2: Kontext-Tokens – Top-Bar, Kopfzeile, Drawer (dunkel): Akzentblau 8,06:1; helle Flächen: Web-Blau 6,25:1 */
  border-radius: var(--rs-radius-xs);
  background: var(--rs-cta-bg);
  box-shadow: var(--rs-cta-shadow);
  color: var(--rs-cta-fg);
  font-family: var(--rs-font);
  font-size: var(--rs-fs-meta);
  font-weight: var(--rs-fw-black);
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--rs-dur-form) ease, border-color var(--rs-dur-form) ease, color var(--rs-dur-form) ease;
}
.rs-consult .icon { width: 1.05em; height: 1.05em; stroke-width: 2.25; transition: transform var(--rs-dur-form) ease; }
.rs-consult__label { display: inline-block; }
.rs-consult:hover { border-color: var(--rs-cta-bg-h); background: var(--rs-cta-bg-h); color: var(--rs-cta-fg); }
.rs-consult:active { border-color: var(--rs-cta-bg-a); background: var(--rs-cta-bg-a); }
.rs-consult:hover .icon { transform: translateX(3px); }
.rs-consult:focus-visible { outline: 2px solid var(--rs-white); outline-offset: 3px; }
.rs-consult--header {
  display: none;
  flex: none;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px;
  font-size: var(--rs-fs-small);
}
.rs-consult--header .icon { width: 16px; height: 16px; }
.rs-consult--header:hover .icon { transform: none; }
.rs-consult--drawer,
.rs-consult--block {
  display: flex;
  width: 100%;
  min-height: 50px;                      /* Vorschau .btn--lg */
  padding: .85rem 1.4rem;
  font-size: var(--rs-fs-btn);
}
@media (max-width: 768px) {
  .rs-consult--header { display: inline-flex; }
}
@media (max-width: 370px) {
  .rs-consult--header { padding: 0 10px; }
}
/* Top-Bar links: E-Mail + Geschäftszeiten; rechts „Fernwartung“ als Rahmen-Button neben dem Beratungs-CTA */
.topbar__start { display: flex; align-items: center; gap: 1.25rem; min-width: 0; }
.topbar__hours { display: inline-flex; align-items: center; gap: .45rem; color: var(--rs-on-dark-2); font-size: .84375rem; font-weight: var(--rs-fw-regular); line-height: 1.25; white-space: nowrap; }
.topbar__hours .icon { width: 15px; height: 15px; color: var(--rs-primary); stroke-width: 2; }
.topbar__cta--support { border-color: rgb(var(--rs-primary-rgb) / .6); background: transparent; box-shadow: none; color: var(--rs-white); }   /* Vorschau .btn--ghost */
.topbar__cta--support .icon { color: var(--rs-primary); stroke-width: 2; }
.topbar__cta--support:hover { border-color: var(--rs-primary); background: rgb(var(--rs-primary-rgb) / .12); color: var(--rs-white); }
.topbar__cta--support:hover .icon { transform: none; }
@media (max-width: 1023px) {             /* B2: nach den Grundregeln, damit display: none gewinnt */
  .topbar__start { gap: 1rem; }
  .topbar__hours { display: none; }
}
/* === Ende B1a: consult-cta === */

/* ---------- 8.5 Header row ------------------------------------------------- */
.site-header {
  position: relative;                    /* no z-index on desktop: the drawer must be able to cover the top bar */
  height: 112px;                         /* design preview --header-h */
  margin: 0;
  padding: 0;
  color: var(--rs-white);
}
.topbar + .site-header { margin-top: var(--rs-topbar-h); }
.site-header__bar {
  position: relative;
  display: flex;
  align-items: center;
  column-gap: 1rem;
  height: 100%;
  max-width: calc(var(--rs-container) + 2 * var(--rs-gutter));
  margin: 0 auto;
  padding: 0 var(--rs-gutter);
}
.nav__logo,
.nav__drawer-logo { flex: none; display: block; line-height: 0; border-radius: 4px; }
.nav__logo img,
.nav__drawer-logo img { display: block; width: auto; max-width: none; height: 54px; }   /* B2: ProNet-Logo 742 × 251 → 160 × 54 (04-design-marke § 3.3) */
.nav__logo:focus-visible,
.nav__drawer-logo:focus-visible { outline: 2px solid var(--rs-primary); outline-offset: 6px; }

/* desktop navigation */
.nav { display: flex; flex: 1 1 auto; align-items: center; justify-content: flex-end; min-width: 0; }
.nav__list {
  display: flex;
  flex: 1 1 auto;
  justify-content: flex-end;             /* right-aligned like the preview */
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__item { position: relative; margin: 0; padding: 0; }   /* containing block of its mega panel */
.nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 8px;
  margin: 0;
  padding: 1em 18px;                     /* B2: ProNet-Vorschau 17 / 18 px → row height 61.2 px */
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--rs-white);
  font-family: var(--rs-font);
  font-size: var(--rs-fs-body);
  font-weight: var(--rs-fw-regular);
  line-height: var(--rs-lh-body);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--rs-dur-instant) ease;
}
.nav__item:last-child > .nav__link { padding-right: 0; }
.nav__chevron { display: flex; align-items: center; }
.nav__chevron .icon { width: 16px; height: 16px; stroke-width: 2.25; transition: transform var(--rs-dur-base) ease; }
.nav__link[aria-expanded="true"] .nav__chevron .icon { transform: rotate(180deg); }

/* split item: real link + separate toggle (spec/05 § 1.1) – same footprint as the preview's button */
.nav__item--split { display: flex; align-items: stretch; }
.nav__item--split > .nav__link { padding-right: 0; }
.nav__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  width: 16px;
  margin: 0;
  padding: 0 18px 0 8px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--rs-white);
  cursor: pointer;
  transition: color var(--rs-dur-instant) ease;
}
.nav__toggle .icon { width: 16px; height: 16px; stroke-width: 2.25; transition: transform var(--rs-dur-base) ease; }
.nav__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }

/* states: open, current, section; hover only with a real pointer (preview) */
@media (hover: hover) {
  .nav__item:hover > .nav__link,
  .nav__item:hover > .nav__toggle { color: var(--rs-primary); }
}
.nav__item.is-open > .nav__link,
.nav__toggle[aria-expanded="true"],
.nav__link[aria-expanded="true"],
.nav__link[aria-current="page"],
.nav__item.is-active > .nav__link,
.nav__item.is-active > .nav__toggle { color: var(--rs-primary); }
.nav__link:focus-visible,
.nav__toggle:focus-visible { outline: 2px solid var(--rs-primary); outline-offset: -6px; border-radius: 8px; }

/* drawer-only parts are hidden on desktop */
.nav__burger,
.nav__backdrop,
.nav__drawer { display: none; }

/* ---------- 8.6 Mega panels: shared frame (desktop; B2: Werte der ProNet-Vorschau) -------- */
.mega {
  position: absolute;
  top: 100%;                             /* flush with the bottom of the nav item */
  left: 0;                               /* main.js sets the horizontal offset (centred / anchored + clamped) */
  z-index: 50;
  overflow: hidden;
  border: 1px solid var(--rs-grey-300);
  border-radius: var(--rs-radius-lg);
  background: var(--rs-white);
  box-shadow: 0 24px 65px rgb(var(--rs-charcoal-rgb) / .22);
  color: var(--rs-text);
  font-size: 1rem;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
}
:where(.mega) a { color: inherit; text-decoration: none; }

.mega__eyebrow,
.mega__group {                           /* Bereichs-Überzeile in der dunklen Spalte (aria-hidden; Name steckt im aria-label der Tablist) */
  margin: 0 8px 8px;
  color: var(--rs-on-dark-4);            /* 8,9:1 auf #1E222B */
  font-size: .71875rem;                  /* 11.5 px uppercase */
  font-weight: var(--rs-fw-bold);
  letter-spacing: var(--rs-ls-eyebrow);
  line-height: 1.2;
  text-transform: uppercase;
}
/* Kundenwunsch 26.10.2026: Bereichs-Überzeile mit Luft zum ersten Reiter und klarer Trennung der drei Bereiche
   (vorher 0 px darunter, 16 px darüber); die Reiter selbst bleiben unverändert. */
.mega__group { margin: 0 0 8px; }
.mega__tablist + .mega__group { margin-top: 26px; }
.mega__tagline {                         /* Claim „Einfach. Sicher. Kommunizieren.“ unten in der Reiterspalte (K2) */
  margin: 0;
  padding-left: 12px;
  border-left: 4px solid var(--rs-primary);
  color: var(--rs-on-dark-3);
  font-size: .84375rem;                  /* 13.5 px */
  font-weight: var(--rs-fw-bold);
  line-height: 1.45;
}
.claim__dot { color: var(--rs-primary); }

.mega__head { margin-bottom: 8px; }
.mega__title-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.mega__title {
  color: var(--rs-text);
  font-size: 1.375rem;                   /* 22 px */
  font-weight: var(--rs-fw-black);
  letter-spacing: var(--rs-ls-tight);
  line-height: 1.2;
  transition: color var(--rs-dur-instant) ease;
}
a.mega__title:hover { color: var(--rs-secondary-ink); }
a.mega__title:focus-visible { outline: 2px solid var(--rs-secondary-ink); outline-offset: 3px; border-radius: 3px; }
.mega__title--static { display: block; }
.mega__all {                             /* „Alle Leistungen ansehen →“ rechts vom Titel (aria-hidden, tabindex -1, VER-11) */
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  color: var(--rs-secondary-ink);
  font-size: .84375rem;                  /* 13.5 px */
  font-weight: var(--rs-fw-black);
}
:where(.mega) a.mega__all { color: var(--rs-secondary-ink); }
.mega__all .icon { width: 14px; height: 14px; stroke-width: 2.25; transition: transform var(--rs-dur-fast) ease; }
.mega__all:hover .icon { transform: translateX(3px); }
.mega__desc { max-width: 640px; margin-top: 3px; color: var(--rs-text-muted); font-size: .90625rem; line-height: 1.5; }   /* 14.5 px */

/* card grid (services: 3 columns, industries: 2 columns) */
.mega__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
.mega__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mega__grid > li { display: flex; min-width: 0; }
.mega__card {
  position: relative;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  gap: 13px;
  min-width: 0;
  min-height: 86px;
  padding: 13px 26px 12px 0;
  border-bottom: 1px solid var(--rs-grey-300);
  color: var(--rs-text);
  transition: background-color var(--rs-dur-fast) ease, box-shadow var(--rs-dur-fast) ease;
}
a.mega__card:hover {
  background: var(--rs-grey);
  box-shadow: 10px 0 0 var(--rs-grey), -10px 0 0 var(--rs-grey);   /* hover bleeds past the text column */
  color: var(--rs-text);
}
.mega__card:focus-visible { outline: 2px solid var(--rs-secondary-ink); outline-offset: 2px; background: var(--rs-grey); }
.mega__card[aria-current="page"] .mega__card-title { color: var(--rs-secondary-ink); }
.mega__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--rs-radius-7);
  background: var(--rs-primary-50);
  color: var(--rs-secondary-700);        /* 9,13:1 auf #EBF3FD */
}
.mega__icon .icon { width: 21px; height: 21px; stroke-width: 1.75; }
.mega__card-body { min-width: 0; }
.mega__card-title { display: block; color: var(--rs-text); font-size: .90625rem; font-weight: var(--rs-fw-bold); line-height: 1.3; }   /* 14.5 px */
.mega__card-desc { display: block; margin-top: 4px; color: var(--rs-text-muted); font-size: var(--rs-fs-meta); line-height: 1.45; }
.mega__arrow {
  position: absolute;
  top: 16px;
  right: 4px;
  width: 16px;
  height: 16px;
  color: var(--rs-secondary);
  transition: transform var(--rs-dur-fast) ease;
}
.mega__card:hover .mega__arrow,
.mega__card:focus-visible .mega__arrow { transform: translateX(3px); }
.mega__card--compact { align-items: center; min-height: 70px; padding: 12px 30px 12px 0; }
.mega__card--compact .mega__arrow { top: 50%; margin-top: -8px; }
.mega__card--compact .mega__card-title { font-size: var(--rs-fs-ui); }
/* externe Rootsektor-Untergruppe (Reiter IT-Sicherheit, E4): Zwischenüberschrift + Karten mit dunkler Icon-Kachel und ↗ */
.mega__subhead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 2px;
  padding-top: 14px;
  border-top: 1px dashed var(--rs-grey-400);
  color: var(--rs-text-muted);
  font-size: .71875rem;
  font-weight: var(--rs-fw-black);
  letter-spacing: .12em;
  line-height: 1.3;
  text-transform: uppercase;
}
.mega__subhead .icon { width: 15px; height: 15px; color: var(--rs-secondary); stroke-width: 2; }
.mega__card--ext .mega__icon { background: var(--rs-charcoal); color: var(--rs-primary); }
.mega__card--ext:hover .mega__arrow,
.mega__card--ext:focus-visible .mega__arrow { transform: translate(2px, -2px); }
/* Entscheidungshilfe-Zeile (Vergleiche des Reiters) */
.mega__compare {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 14px;
  padding: 9px 14px;
  border-radius: var(--rs-radius-sm);
  background: var(--rs-grey);
  color: var(--rs-text-soft);
  font-size: .84375rem;                  /* 13.5 px */
  line-height: 1.4;
}
.mega__compare .icon { width: 16px; height: 16px; color: var(--rs-secondary); stroke-width: 2; }
.mega__compare-label { font-weight: var(--rs-fw-black); }
:where(.mega) a.mega__compare-link {
  color: var(--rs-secondary-ink);        /* 7,54:1 auf #F5F5F5 */
  font-weight: var(--rs-fw-bold);
  text-decoration: underline;
  text-decoration-color: rgb(0 80 145 / .35);
  text-underline-offset: 3px;
}
:where(.mega) a.mega__compare-link:hover { color: var(--rs-secondary-800); text-decoration-color: currentColor; }
.mega__compare-link:focus-visible { outline: 2px solid var(--rs-secondary-ink); outline-offset: 2px; border-radius: 2px; }

/* CTA cards (no photos: charcoal gradient + dot grid fading in towards the bottom) */
.mega__ctas { display: flex; flex-direction: column; min-width: 0; }
.mega__cta {
  position: relative;
  isolation: isolate;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-self: stretch;
  margin: 12px 12px 12px 0;
  padding: 26px 22px 22px;
  overflow: hidden auto;
  max-height: calc(var(--mega-max-h, 9999px) - 24px);
  border-radius: var(--rs-radius-9);
  background: linear-gradient(165deg, #2A2F3B 0%, var(--rs-charcoal) 52%, #1A1D26 100%);
  color: var(--rs-white);
}
.mega__cta::before {
  content: "";
  position: absolute;
  inset: 42% 0 0;
  z-index: -1;
  background-image: radial-gradient(circle, rgb(var(--rs-primary-rgb) / .55) 1.3px, transparent 1.8px);
  background-size: 11px 11px;
  opacity: .5;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 80%);
          mask-image: linear-gradient(to bottom, transparent, #000 80%);
  pointer-events: none;
}
.mega__cta-title { max-width: 250px; color: var(--rs-white); font-size: 1.25rem; font-weight: var(--rs-fw-black); letter-spacing: -.015em; line-height: 1.25; }
.mega__cta-text { margin-top: 10px; color: var(--rs-on-dark-2); font-size: var(--rs-fs-small); line-height: 1.5; }
.mega__cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin-top: 16px;
  padding: 10px 15px;
  border: 1px solid var(--rs-primary);
  border-radius: var(--rs-radius-xs);
  background: var(--rs-primary);
  color: var(--rs-on-primary);           /* 8,06:1 */
  font-size: var(--rs-fs-ui);
  font-weight: var(--rs-fw-black);
  line-height: 1.2;
  text-align: center;
  transition: background-color var(--rs-dur-fast) ease, border-color var(--rs-dur-fast) ease, color var(--rs-dur-fast) ease;
}
:where(.mega) a.mega__cta-btn { color: var(--rs-on-primary); }
.mega__cta-btn .icon { width: 16px; height: 16px; stroke-width: 2.25; }
.mega__cta-btn:hover { border-color: var(--rs-primary-300); background: var(--rs-primary-300); color: var(--rs-on-primary); }
.mega__cta-btn:focus-visible { outline: 2px solid var(--rs-white); outline-offset: 3px; }
.mega__cta-btn--frame,
:where(.mega) a.mega__cta-btn--frame { border: 2px solid var(--rs-secondary); background: transparent; color: var(--rs-white); }   /* Rahmen-Stil, kein Rot (E5) */
.mega__cta-btn--frame:hover,
:where(.mega) a.mega__cta-btn--frame:hover { border-color: var(--rs-primary); background: transparent; color: var(--rs-primary); }
.mega__cta-phone,
.mega__cta-mail,
.mega__cta-consult { margin-top: 10px; color: var(--rs-on-dark-3); font-size: var(--rs-fs-meta); line-height: 1.45; }
.mega__cta-more { margin-top: 12px; font-size: var(--rs-fs-small); line-height: 1.4; }
.mega__cta-phone a,
.mega__cta-mail a,
:where(.mega) .mega__cta-phone a,
:where(.mega) .mega__cta-mail a { color: var(--rs-primary); font-weight: var(--rs-fw-bold); text-decoration: none; white-space: nowrap; }
.mega__cta-phone a:hover,
.mega__cta-phone a:focus-visible,
.mega__cta-mail a:hover,
.mega__cta-mail a:focus-visible { color: var(--rs-primary-200); text-decoration: underline; }
.mega__cta-link,
:where(.mega) a.mega__cta-link { color: var(--rs-primary); font-weight: var(--rs-fw-black); }
.mega__cta-link .icon { width: 14px; height: 14px; margin-left: 5px; vertical-align: -2px; stroke-width: 2.25; transition: transform var(--rs-dur-fast) ease; }
:where(.mega) .mega__cta-consult a.mega__cta-link { font-weight: var(--rs-fw-bold); }   /* Vorschau: Rückweg zur Beratung 700 */
.mega__cta-link:hover,
:where(.mega) a.mega__cta-link:hover { color: var(--rs-primary-200); text-decoration: underline; text-underline-offset: 3px; }
.mega__cta-link:focus-visible { outline: 2px solid var(--rs-primary); outline-offset: 2px; border-radius: 2px; }
.mega__proof {
  display: grid;
  gap: 9px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--rs-white-a14);
}
.mega__proof li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  color: var(--rs-on-dark-2);
  font-size: .84375rem;                  /* 13.5 px */
  line-height: 1.35;
}
.mega__proof .icon { width: 17px; height: 17px; color: var(--rs-primary); stroke-width: 2; }
.mega__signoff {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;                      /* pinned to the card bottom */
  padding-top: 18px;
  color: var(--rs-white);
  font-size: .65625rem;                  /* 10.5 px uppercase (B-5 exception) */
  font-weight: var(--rs-fw-bold);
  letter-spacing: .08em;
  line-height: 1.4;
  text-transform: uppercase;
  text-wrap: balance;
}
.mega__signoff::before { content: ""; flex: none; width: 14px; height: 2px; background: var(--rs-primary); }

/* ---------- 8.7 Leistungen: 3 Bereiche × 10 Reiter (Registry), ohne Zähler – ProNet-Vorschau ---- */
.mega--services {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(256px, 21vw, 306px);
  width: min(90rem, var(--vw));          /* full-bleed up to 1440 px, centred by main.js */
}
.mega__tabs {
  display: grid;
  grid-template-columns: clamp(244px, 19vw, 282px) minmax(0, 1fr);
  min-width: 0;
}
.mega__aside {                           /* Reiterspalte: Höhe bis zum Fensterrand (main.js setzt --mega-max-h), sonst scrollbar */
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-height: var(--mega-max-h, none);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 12px;
  background: var(--rs-charcoal);
  color: var(--rs-on-dark-1);
  scrollbar-width: thin;
  scrollbar-color: var(--rs-line-dark) transparent;
}
.mega__tablist { display: grid; align-content: start; gap: 3px; }
.mega__tablist:last-of-type { margin-bottom: 22px; }
.mega__tab {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 38px;
  margin: 0;
  padding: 7px 9px;
  border: 0;
  border-radius: var(--rs-radius-sm);
  background: transparent;
  color: var(--rs-on-dark-1);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--rs-dur-fast) ease, color var(--rs-dur-fast) ease;
}
.mega__tab:hover { background: var(--rs-white-a07); color: var(--rs-white); }
.mega__tab[aria-selected="true"] { background: var(--rs-primary); color: var(--rs-on-primary); }   /* after :hover on purpose */
.mega__tab:focus-visible { outline: 2px solid var(--rs-primary); outline-offset: 2px; }
.mega__tab-icon { justify-self: center; width: 18px; height: 18px; stroke-width: 1.8; }
.mega__tab-name { min-width: 0; font-size: .84375rem; font-weight: var(--rs-fw-bold); line-height: 1.25; }   /* 13.5 px, darf zweizeilig umbrechen */
.mega__tab-arrow { justify-self: center; width: 14px; height: 14px; stroke-width: 2.25; }
.mega__panels {
  display: grid;
  align-items: start;
  min-width: 0;
  max-height: var(--mega-max-h, none);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 28px;
}
/* Alle Reiter-Panels liegen in derselben Rasterzelle → das Menü behält beim Reiterwechsel seine Höhe (kein Springen);
   ausgeblendete Panels sind unsichtbar und nicht im Barrierefreiheitsbaum (visibility: hidden). */
.mega__tabpanel { grid-area: 1 / 1; min-width: 0; }
.mega__tabpanel[hidden] { display: block !important; visibility: hidden; }
@media (min-width: 75em) and (max-height: 920px) {
  /* Niedrige Fenster (z. B. 1366 × 768, 1440 × 900): Rootsektor-Block kompakt – Kurztext bleibt für Screenreader im
     Markup (06-design-vorschau § 9.3/§ 12.7 Nr. 26, 05-portierungsplan § 11.8) – und engere Abstände in der Reiterspalte. */
  .mega__grid--ext .mega__card { min-height: 0; align-items: center; padding-block: 10px 9px; }
  .mega__grid--ext .mega__card-desc {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .mega__grid--ext .mega__arrow { top: 50%; margin-top: -8px; }
  .mega__aside { padding-block: 16px; }
  .mega__group { margin-bottom: 6px; }                    /* Kundenwunsch 26.10.2026 (vorher 0 px) */
  .mega__tablist + .mega__group { margin-top: 20px; }     /* Kundenwunsch 26.10.2026 (vorher 12 px) */
  .mega__tablist:last-of-type { margin-bottom: 14px; }
}
/* Kundenwunsch 26.10.2026: Passt die Reiterspalte nicht ohne Scrollen ins Fenster, entfällt der Claim (main.js setzt is-tight) –
   statt eines angeschnittenen Claims; der Claim steht weiter im Hero, im Footer und im Teilen-Bild. */
.mega__aside.is-tight .mega__tagline { display: none; }
.mega__aside.is-tight .mega__tablist:last-of-type { margin-bottom: 0; }

/* ---------- 8.9 Ressourcen (list dropdown, 37.5 rem) ------------------------ */
.mega--resources { width: min(37.5rem, var(--vw)); padding: 22px 24px 18px; }
.mega--resources .mega__eyebrow { margin: 0 0 10px; color: var(--rs-text-muted); font-weight: var(--rs-fw-black); }
.mega__list > li { border-bottom: 1px solid var(--rs-grey-300); }
.mega__list > li:last-child { border-bottom: 0; }
.mega__row {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 11px 40px 11px 10px;
  border-radius: var(--rs-radius-sm);
  color: var(--rs-text);
  transition: background-color var(--rs-dur-fast) ease;
}
.mega__row:hover { background: var(--rs-grey); color: var(--rs-text); }
.mega__row:focus-visible { outline: 2px solid var(--rs-secondary-ink); outline-offset: -2px; background: var(--rs-grey); }
.mega__row .mega__icon { width: 42px; height: 42px; border: 1px solid rgb(var(--rs-primary-rgb) / .3); }
.mega__row-body { min-width: 0; }
.mega__row-title { display: block; font-size: .96875rem; font-weight: var(--rs-fw-bold); line-height: 1.35; }   /* 15.5 px */
.mega__row-desc { display: block; margin-top: 2px; color: var(--rs-text-muted); font-size: var(--rs-fs-small); line-height: 1.45; }
.mega__row[aria-current="page"] .mega__row-title { color: var(--rs-secondary-ink); }
.mega__row .mega__arrow { top: 50%; right: 14px; margin-top: -8px; }
.mega__row:hover .mega__arrow,
.mega__row:focus-visible .mega__arrow { transform: translateX(3px); }

/* ---------- 8.10 Drawer range (< 1200 px): compact header, burger, off-canvas -- */
/* B2: 769–1199 px Top-Bar fest oben (58 px) und darunter die kompakte Kopfzeile (68 px); ≤ 768 px nur die Kopfzeile.
   Kopfzeile und Drawer sind von Anfang an fest positioniert – mit und ohne JavaScript gleich (Befund B1/TEC-04: kein
   Layoutsprung beim Wechsel no-js → js). */
@media (max-width: 74.99em) {
  :root { --rs-stuck-h: 68px; }          /* header row stays on top → anchor offset */
  .nav { display: none; }
  .site-header {
    position: fixed;                     /* always visible on top (preview: sticky); out of the flow → heroes keep their top space */
    top: var(--rs-topbar-h);             /* 58 px (769–1199) bzw. 0 (≤ 768) */
    left: 0;
    right: 0;
    z-index: 1050;
    height: 68px;                        /* preview --header-h-m */
    border-bottom: 1px solid rgb(var(--rs-primary-rgb) / .22);
    background: var(--rs-charcoal);
    transition: box-shadow var(--rs-dur-base) ease;
  }
  .topbar + .site-header { margin-top: 0; }
  html[data-scrolled] .site-header { box-shadow: 0 6px 18px rgb(var(--rs-black-rgb) / .3); }
  .site-header__bar { column-gap: 10px; max-width: none; padding: 0 var(--rs-gutter); }
  .nav__logo { margin-right: auto; }
  .nav__logo img,
  .nav__drawer-logo img { height: 44px; }   /* B2: 130 × 44 (04-design-marke § 3.3) */

  .nav__burger,
  .nav__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--rs-radius-xs);
    background: var(--rs-white-a08);
    color: var(--rs-white);
    cursor: pointer;
    transition: background-color var(--rs-dur-instant) ease, color var(--rs-dur-instant) ease;
  }
  .nav__burger .icon,
  .nav__close .icon { width: 24px; height: 24px; stroke-width: 1.75; }
  .nav__burger:hover,
  .nav__close:hover { background: var(--rs-primary); color: var(--rs-on-primary); }
  .nav__burger:focus-visible,
  .nav__close:focus-visible { outline: 2px solid var(--rs-white); outline-offset: 2px; }

  .nav__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1150;
    background: rgb(var(--rs-black-rgb) / .6);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--rs-dur-base) ease, visibility 0s linear var(--rs-dur-base);
  }
  .nav__backdrop.is-open { opacity: 1; visibility: visible; transition: opacity var(--rs-dur-base) ease, visibility 0s; }

  .nav__drawer {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    width: min(100%, 26.25rem);          /* full screen on phones, 420 px panel on tablets */
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--rs-charcoal);
    color: var(--rs-white);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--rs-dur-base) var(--rs-ease-slide), visibility 0s linear var(--rs-dur-base);
  }
  .nav__drawer.is-open { transform: none; visibility: visible; transition: transform var(--rs-dur-base) var(--rs-ease-slide), visibility 0s; }
  .nav__drawer-head {
    display: flex;
    flex: none;
    flex-direction: row-reverse;         /* close button first in focus order, shown on the right */
    align-items: center;
    justify-content: space-between;
    height: 68px;
    padding: 0 16px;
    border-bottom: 1px solid var(--rs-white-a08);
  }
}
@media (max-width: 600px) {
  .nav__logo img,
  .nav__drawer-logo img { height: 40px; }   /* B2: 118 × 40 */
}
@media (max-width: 370px) {
  .nav__logo img,
  .nav__drawer-logo img { height: 36px; }   /* B2: 106 × 36 – Mindesthöhe des Logos */
}

/* ---------- 8.11 Mobile navigation content (.mnav, preview drawer) ------------ */
.mnav { flex: none; }
.mnav__list { margin: 0; padding: 4px 0; list-style: none; }
.mnav__item { border-bottom: 1px solid var(--rs-white-a07); }
.mnav__row { display: flex; align-items: stretch; }
.mnav__link {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  margin: 0;
  padding: 14px 20px;
  border: 0;
  background: none;
  color: var(--rs-white);
  font-family: var(--rs-font);
  font-size: var(--rs-fs-lead);          /* 18 px / 700 */
  font-weight: var(--rs-fw-bold);
  line-height: var(--rs-lh-body);
  text-align: left;
  text-decoration: none;
  transition: color var(--rs-dur-instant) ease;
}
.mnav__item--sub > .mnav__row > a.mnav__link { padding-right: 0; }
.mnav__link:hover,
.mnav__link[aria-current="page"],
.mnav__item.is-active > .mnav__link,
.mnav__item.is-active > .mnav__row > .mnav__link { color: var(--rs-primary); }
.js .mnav__item--sub:has(> .mnav__row [aria-expanded="true"]) > .mnav__row > .mnav__link { color: var(--rs-primary); }
.mnav__link--button { width: 100%; cursor: pointer; }
.mnav__link .icon,
.mnav__toggle .icon { width: 18px; height: 18px; stroke-width: 2.25; transition: transform var(--rs-dur-base) ease; }
.mnav__link--button[aria-expanded="true"] .icon,
.mnav__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.mnav__toggle {                          /* chevron of a split row – looks like the preview's full-width button */
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  width: 64px;
  margin: 0;
  padding: 0 20px 0 0;
  border: 0;
  background: none;
  color: var(--rs-white);
  cursor: pointer;
  transition: color var(--rs-dur-instant) ease;
}
.mnav__toggle:hover,
.mnav__toggle[aria-expanded="true"] { color: var(--rs-primary); }
.mnav__link:focus-visible,
.mnav__toggle:focus-visible { outline: 2px solid var(--rs-primary); outline-offset: -4px; border-radius: 6px; }

.mnav__panel { padding: 6px 0 14px; background: rgb(var(--rs-black-rgb) / .22); }   /* open sub-menu on a darker band */
.mnav__group {
  margin: 12px 20px 6px;
  color: var(--rs-on-dark-4);
  font-size: .71875rem;                  /* 11.5 px */
  font-weight: var(--rs-fw-bold);
  letter-spacing: var(--rs-ls-eyebrow);
  line-height: 1.2;
  text-transform: uppercase;
}
.mnav__tab {                             /* Leistungen → Bereich → Reiter (preview .mnav__toggle) */
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  width: calc(100% - 24px);
  margin: 4px 12px;
  padding: 11px 12px;
  border: 0;
  border-radius: var(--rs-radius-sm);
  background: rgb(var(--rs-white-rgb) / .06);
  color: var(--rs-white);
  font: var(--rs-fw-bold) .96875rem/1.3 var(--rs-font);   /* 15.5 px */
  text-align: left;
  cursor: pointer;
  transition: background-color var(--rs-dur-fast) ease, color var(--rs-dur-fast) ease;
}
.mnav__tab[aria-expanded="true"] { background: var(--rs-primary); color: var(--rs-on-primary); }
.mnav__tab:focus-visible { outline: 2px solid var(--rs-white); outline-offset: 2px; }
.mnav__tab-icon { width: 20px; height: 20px; }
.mnav__tab-name { min-width: 0; }
.mnav__tab-chev { width: 18px; height: 18px; stroke-width: 2.25; transition: transform var(--rs-dur-base) ease; }
.mnav__tab[aria-expanded="true"] .mnav__tab-chev { transform: rotate(180deg); }
.mnav__tabpanel { margin: 4px 12px 10px 23px; border-left: 2px solid rgb(var(--rs-primary-rgb) / .35); }
.mnav__cards { margin: 0; padding: 0; list-style: none; }
.mnav__card {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 9px 46px 9px 14px;
  color: var(--rs-on-dark-1);
  text-decoration: none;
  transition: background-color var(--rs-dur-fast) ease, color var(--rs-dur-fast) ease;
}
.mnav__cards--flat .mnav__card { padding-left: 20px; }
.mnav__card:hover { background: var(--rs-white-a05); color: var(--rs-white); }
.mnav__card[aria-current="page"] { color: var(--rs-primary); }
.mnav__card:focus-visible { outline: 2px solid var(--rs-primary); outline-offset: -2px; }
.mnav__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--rs-radius-7);
  background: var(--rs-primary-a14);
  color: var(--rs-primary);
}
.mnav__card-icon .icon { width: 18px; height: 18px; stroke-width: 1.75; }
.mnav__card-title { min-width: 0; font-size: var(--rs-fs-ui); font-weight: var(--rs-fw-bold); line-height: 1.3; }
.mnav__card-arrow { position: absolute; top: 50%; right: 20px; width: 16px; height: 16px; margin-top: -8px; color: var(--rs-primary); transition: transform var(--rs-dur-fast) ease; }
.mnav__card:hover .mnav__card-arrow { transform: translateX(3px); }
.mnav__all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px 6px 62px;
  color: var(--rs-primary);
  font-size: .90625rem;                  /* 14.5 px */
  font-weight: var(--rs-fw-black);
  line-height: 1.5;
  text-decoration: none;
}
.mnav__all--flat { padding: 10px 20px 4px 66px; }
.mnav__all .icon { width: 15px; height: 15px; stroke-width: 2.25; transition: transform var(--rs-dur-fast) ease; }
.mnav__all:hover { color: var(--rs-white); }
.mnav__all:hover .icon { transform: translateX(3px); }
.mnav__all:focus-visible { outline: 2px solid var(--rs-primary); outline-offset: 2px; border-radius: 4px; }
/* B2: externe Rootsektor-Untergruppe im Reiter IT-Sicherheit (Vorschau .mnav__sub) */
.mnav__external-title {
  margin: 10px 14px 2px;
  color: var(--rs-on-dark-4);
  font-size: .6875rem;                   /* 11 px */
  font-weight: var(--rs-fw-bold);
  letter-spacing: .12em;
  line-height: 1.35;
  text-transform: uppercase;
}
.mnav__card--static { cursor: default; }
.mnav__card--external:hover .mnav__card-arrow { transform: translate(2px, -2px); }

/* contact block in the drawer (preview .drawer-contact): Aktionen zuerst, dann Kontakt */
.mnav__contact { display: grid; gap: 12px; padding: 22px 20px 36px; }
.mnav__contact-title {
  margin: 12px 0 0;
  color: var(--rs-on-dark-4);
  font-size: .71875rem;
  font-weight: var(--rs-fw-bold);
  letter-spacing: var(--rs-ls-eyebrow);
  line-height: 1.2;
  text-transform: uppercase;
}
.mnav__contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--rs-white);
  font-size: 1rem;
  font-weight: var(--rs-fw-bold);
  line-height: 1.3;
  text-decoration: none;
}
.mnav__contact-row small { display: block; margin-bottom: 2px; color: var(--rs-on-dark-4); font-size: .78125rem; font-weight: var(--rs-fw-regular); }
.mnav__contact-row:hover { color: var(--rs-primary); }
.mnav__contact-row:focus-visible { outline: 2px solid var(--rs-primary); outline-offset: 3px; border-radius: 4px; }
.mnav__contact-tile {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--rs-radius-7);
  background: var(--rs-primary-a14);
  color: var(--rs-primary);
}
.mnav__contact-tile .icon { width: 18px; height: 18px; stroke-width: 2; }
.mnav__hours { margin: 0; color: var(--rs-on-dark-3); font-size: .84375rem; line-height: 1.5; }
.mnav__btn {                             /* preview .btn inside .drawer-contact */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  min-height: 50px;                      /* B2: Vorschau .btn--lg */
  padding: .85rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--rs-radius-xs);
  font: var(--rs-fw-black) var(--rs-fs-btn)/1.1 var(--rs-font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--rs-dur-form) ease, border-color var(--rs-dur-form) ease, color var(--rs-dur-form) ease;
}
.mnav__btn .icon { width: 1.05em; height: 1.05em; stroke-width: 2.25; }
.mnav__btn--support { border-color: rgb(var(--rs-primary-rgb) / .6); background: transparent; color: var(--rs-white); }   /* B1a: „Fernwartung“ (B2: Vorschau .btn--ghost) */
.mnav__btn--support .icon { color: var(--rs-primary); stroke-width: 2; }
.mnav__btn--support:hover { border-color: var(--rs-primary); background: rgb(var(--rs-primary-rgb) / .12); color: var(--rs-white); }
.mnav__btn:focus-visible { outline: 2px solid var(--rs-white); outline-offset: 3px; }
.mnav__contact > .rs-lang--drawer { margin-top: 2px; }

/* scroll lock while the drawer is open (main.js: html.is-scroll-locked + --rs-scrollbar-w) */
html.is-scroll-locked,
html.is-scroll-locked body { overflow: hidden; }
html.is-scroll-locked { padding-right: var(--rs-scrollbar-w, 0px); }

/* ---------- 8.13 No-JS fallbacks ------------------------------------------- */
@media (min-width: 75em) {               /* desktop: panels open on :hover / :focus-within (02 § 11) */
  .no-js .site-header__bar { position: relative; }
  .no-js .nav__item--mega { position: static; }
  .no-js .mega { top: calc(100% - 25px); }
  .no-js .mega--services { left: 20px; right: 20px; width: auto; }
  .no-js .mega--industries,
  .no-js .mega--resources { left: auto; right: 20px; }
  .no-js .nav__item--mega:is(:hover, :focus-within) > .mega--services[hidden],
  .no-js .nav__item--mega:is(:hover, :focus-within) > .mega--industries[hidden] { display: grid !important; }
  .no-js .nav__item--mega:is(:hover, :focus-within) > .mega--resources[hidden] { display: block !important; }
  .no-js .mega__tabpanel,
  .no-js .mega__tabpanel[hidden] { display: block !important; grid-area: auto; visibility: visible; }   /* B2: ohne JS alle Reiter untereinander */
  .no-js .mega__aside,
  .no-js .mega__panels { max-height: calc(100vh - 200px); }
  .no-js .mega--services .mega__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* panel is only as wide as the header bar */
  .no-js .mega__tabpanel + .mega__tabpanel { margin-top: 1.5rem; }
}
/* B2 – Befund B1/TEC-04: Der Drawer bleibt auch ohne JavaScript fest positioniert und ausgeblendet (kein Inhalt vor
   <main>, kein Layoutsprung beim Laden von main.js). Ohne JavaScript öffnet der Link „Menü öffnen“ (#mobile-nav) den
   Drawer per :target, der Link „Menü schließen“ (#main) schließt ihn; alle Untermenüs sind dann aufgeklappt. */
.nav__burger--nojs,
.nav__close--nojs { display: none; }
@media (max-width: 74.99em) {
  .no-js .nav__burger:not(.nav__burger--nojs),
  .no-js .nav__close:not(.nav__close--nojs) { display: none; }
  .no-js .nav__burger--nojs,
  .no-js .nav__close--nojs { display: inline-flex; text-decoration: none; }
  .no-js .nav__drawer:target { transform: none; visibility: visible; transition: none; }
  .no-js .site-top:has(> .nav__drawer:target) > .nav__backdrop { opacity: 1; visibility: visible; transition: none; }
  .no-js .mnav__panel[hidden],
  .no-js .mnav__tabpanel[hidden] { display: block !important; }
  .no-js .mnav__toggle,
  .no-js .mnav__tab-chev,
  .no-js .mnav__link--button .icon { display: none; }
}

/* ===== 09 Breadcrumb ===== */
/* 08 B-6 – visible on every sub-page (spec/05 § 1.6); default = on dark heroes.
   Labels = navigation labels; the current page is never a link. */
.rs-breadcrumb {
  margin: 0 0 1.25rem;
  color: var(--rs-text-muted);
  font-size: var(--rs-fs-meta);
  font-weight: var(--rs-fw-regular);
  letter-spacing: .2px;
  line-height: 1.5;
}
.rs-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: .25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rs-breadcrumb li { display: inline-flex; align-items: center; min-width: 0; }
.rs-breadcrumb li + li::before {         /* chevron separator, decorative */
  content: "";
  flex: 0 0 auto;
  width: .38em;
  height: .38em;
  margin: 0 .7em 0 .45em;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  opacity: .75;
  transform: rotate(45deg);
}
.rs-breadcrumb ol a {
  color: var(--rs-secondary-ink);
  text-decoration: none;
  transition: color var(--rs-dur-base) var(--rs-ease);
}
.rs-breadcrumb ol a:hover { color: var(--rs-text); text-decoration: underline; text-underline-offset: .2em; }
.rs-breadcrumb ol a:focus-visible { outline: 2px solid var(--rs-focus); outline-offset: 3px; border-radius: 2px; }
.rs-breadcrumb [aria-current="page"] { color: var(--rs-text); font-weight: var(--rs-fw-bold); }

.rs-breadcrumb--on-dark { color: var(--rs-text-on-dark-subtle); }          /* 7.54:1 on charcoal */
.rs-breadcrumb--on-dark ol a { color: var(--rs-primary); }                  /* 6.49:1 / 7.02:1 on #191C1F */
.rs-breadcrumb--on-dark ol a:hover { color: var(--rs-primary-200); }
.rs-breadcrumb--on-dark [aria-current="page"] { color: var(--rs-white); }
.rs-breadcrumb--center ol { justify-content: center; }
.rs-breadcrumb--bar::before {            /* optional accent bar */
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin: 0 0 14px;
  background: var(--rs-primary);
  opacity: .9;
}
.rs-breadcrumb--center.rs-breadcrumb--bar::before { margin-inline: auto; }
@media (max-width: 768px) { .rs-breadcrumb--bar::before { width: 36px; margin-bottom: 10px; } }

/* ===== 10 Shapes, tones, backgrounds ===== */
/* Section rhythm (contract § 1.10): every section root in <main> carries one
   tone; shape dividers (01 § 7.1) only where the neighbour has another tone.
   The wedge colour is always the NEIGHBOUR's tone (top = previous section,
   bottom = next section); notch (secondary) and vcut (#6B7177) are fixed. */

/* ---------- 10.1 Tones ------------------------------------------------------ */
.rs-tone-white { background-color: var(--rs-tone-white); }
.rs-tone-grey  { background-color: var(--rs-tone-grey); }
.rs-tone-dark  { background-color: var(--rs-tone-dark); }   /* fallback – dark components paint their own surface below */
/* equal neighbours (avoided by the renderer, but possible): hairline instead of a shape */
.rs-tone-grey + .rs-tone-grey { border-top: 1px solid var(--rs-grey-300); }
.rs-tone-dark + .rs-tone-dark { border-top: 1px solid var(--rs-charcoal-500); }

/* ---------- 10.2 Shape dividers --------------------------------------------- */
.rs-has-shape { position: relative; isolation: isolate; }
.rs-has-shape > :not(.rs-shape) { position: relative; z-index: 1; }   /* content above the wedge */
.rs-shape {
  --rs-shape-sx: 1;
  --rs-shape-sy: 1;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  overflow: hidden;
  line-height: 0;
  pointer-events: none;
  color: var(--rs-shape-color, var(--rs-tone-white));
  transform: scale(var(--rs-shape-sx), var(--rs-shape-sy));
}
.rs-shape > svg {
  display: block;
  position: relative;
  left: 50%;
  width: calc(100% + 1.3px);             /* hides sub-pixel seams */
  min-width: 100%;
  max-width: none;
  height: var(--rs-shape-h, 50px);
  transform: translateX(-50%);
  fill: currentColor;
}
.rs-shape--top { top: -1px; --rs-shape-sy: -1; }
.rs-shape--bottom { bottom: -1px; }
.rs-shape--flip-x { --rs-shape-sx: -1; }
.rs-shape--slant { --rs-shape-h: 50px; }
.rs-shape--h10 { --rs-shape-h: 10px; }
/* wedge colours = tone of the neighbouring section */
.rs-shape--on-grey { --rs-shape-color: var(--rs-tone-grey); }
.rs-shape--on-dark { --rs-shape-color: var(--rs-tone-dark); }
.rs-shape--on-deep { --rs-shape-color: var(--rs-tone-deep); }
/* fixed colours (declared after the wedge modifiers on purpose) */
.rs-shape--notch { --rs-shape-h: 30px; --rs-shape-color: var(--rs-secondary); }   /* section-devider2.png */
.rs-shape--vcut  { --rs-shape-h: 30px; --rs-shape-color: #687082; }               /* grey band above the footer (B2: ProNet-Schiefer) */
.rs-shape--peaks { --rs-shape-h: 30px; --rs-shape-color: var(--rs-primary); }
@media (max-width: 767px) { .rs-shape--slant { --rs-shape-h: 30px; } }

/* ---------- 10.3 Backgrounds ------------------------------------------------- */
.rs-bg-glow {                            /* block-services.png: radial glow + 145° gradient */
  background:
    radial-gradient(circle at 12% 8%, var(--rs-primary-a14), transparent 32%),
    linear-gradient(145deg, var(--rs-charcoal-900) 0%, var(--rs-charcoal) 58%, var(--rs-charcoal-700) 100%) var(--rs-charcoal-900);   /* B2: dunkle Grundfarbe, falls Verläufe fehlen (Kontrast) */
  color: var(--rs-text-on-dark);
}
.rs-bg-dots { position: relative; overflow: hidden; }   /* sub-page hero dot grid (about.png, top right) */
.rs-bg-dots::after {
  content: "";
  position: absolute;
  top: 0;
  right: -8%;
  width: 55%;
  height: 70%;
  background-image: radial-gradient(var(--rs-primary-a22) 1.3px, transparent 1.3px);
  background-size: 16px 16px;
  opacity: .55;
  pointer-events: none;
}
@media (max-width: 600px) { .rs-bg-dots::after { width: 85%; opacity: .35; } }

/* ===== 11 Typography components ===== */
/* 01 § 4.5/§ 9.4/§ 9.5, 04 § 4.1, 05 § 1.2, 08 B-13/B-18. Colours come from
   the context (dark: #68AED6 accents, light: #356E8D accents). */

/* ---------- 11.1 Eyebrow + section head ----------------------------------- */
.rs-eyebrow {
  display: block;
  margin: 0 0 .75rem;                    /* B2: Vorschau .eyebrow 13 px, 12 px Abstand */
  color: var(--rs-ctx-accent);
  font-size: var(--rs-fs-meta);          /* 13 px */
  font-weight: var(--rs-fw-black);
  letter-spacing: var(--rs-ls-eyebrow);
  line-height: var(--rs-lh-body);
  text-transform: uppercase;
}
.rs-eyebrow--sm { margin-bottom: .55rem; font-size: var(--rs-fs-micro); letter-spacing: var(--rs-ls-label); }
.rs-eyebrow--muted { color: var(--rs-ctx-text-muted); font-size: .7rem; letter-spacing: var(--rs-ls-label); line-height: 1.3; }

.rs-section-head { max-width: 42rem; margin-bottom: 2.75rem; }
.rs-section-head--center { margin-inline: auto; text-align: center; }
.rs-section-head__title { margin: 0 0 .9rem; text-wrap: balance; }
.rs-section-head__intro {
  max-width: 40rem;
  margin: 0;
  color: var(--rs-ctx-text-soft);
  font-size: var(--rs-fs-intro);
  line-height: var(--rs-lh-copy);
  text-wrap: pretty;
}
.rs-section-head--center .rs-section-head__intro { margin-inline: auto; }
.rs-section-head > :last-child { margin-bottom: 0; }
@media (max-width: 600px) {
  .rs-section-head { margin-bottom: 2rem; }
  .rs-section-head__intro { font-size: 1rem; }
}

/* heading group for definition / FAQ / vulnerabilities (04 § 4.1) */
.rs-heading { margin: 0; }
.rs-tagline { margin: 0 0 .75rem; color: var(--rs-ctx-heading); font-size: 1rem; font-weight: var(--rs-fw-bold); line-height: 1.6; }
.rs-tagline--accent { color: var(--rs-ctx-accent); }
.rs-headline { margin: 0 0 1.5rem; text-wrap: balance; }
@media (max-width: 767px) { .rs-headline { margin-bottom: 1.25rem; } }

/* ---------- 11.2 Kicker (step dot + label/title) -------------------------- */
.rs-kicker {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  align-items: center;
  gap: .75rem;
  margin: 0 0 2rem;
}
.rs-kicker > h2,
.rs-kicker > p { margin: 0; }
.rs-kicker__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--rs-radius-pill);
  background: var(--rs-ctx-dot-bg);      /* light: #356E8D + white; dark: #68AED6 + ink + 5 px halo */
  box-shadow: var(--rs-ctx-dot-halo);
  color: var(--rs-ctx-dot-fg);
  line-height: 0;
}
.rs-kicker__icon > .icon { width: 1rem; height: 1rem; stroke-width: 2.5; }
.rs-kicker__text {
  color: var(--rs-ctx-accent);
  font-size: .8rem;
  font-weight: var(--rs-fw-bold);
  letter-spacing: .08em;
  line-height: 1.3;
  text-transform: uppercase;
}
.rs-kicker__title { margin: 0; color: var(--rs-ctx-heading); font-weight: var(--rs-fw-bold); text-wrap: balance; }   /* <h2><strong> renders 700 (C-72) */
.rs-kicker--inline { display: flex; align-items: center; gap: .65rem; margin: 0 0 1.25rem; }
.rs-kicker--inline .rs-kicker__text { font-size: .72rem; letter-spacing: .09em; }
.rs-kicker--center { justify-content: center; }

/* ---------- 11.3 Kicker row + badge ---------------------------------------- */
.rs-kicker-row { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; margin: 0 0 1.5rem; }
.rs-kicker-row__copy { color: var(--rs-ctx-text-muted); font-size: var(--rs-fs-meta); }
@media (max-width: 600px) { .rs-kicker-row { flex-direction: column; align-items: flex-start; } }

.rs-badge {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  max-width: 100%;
  padding: .42rem .7rem;
  border: 1px solid var(--rs-primary-a48);
  border-radius: var(--rs-radius-pill);
  background: var(--rs-primary-a15);
  color: var(--rs-ctx-accent);           /* dark: #68AED6 4.95:1 on the tinted pill */
  font-size: var(--rs-fs-micro);
  font-weight: var(--rs-fw-black);
  letter-spacing: var(--rs-ls-badge);
  line-height: 1;
  text-transform: none;                  /* C-71: typed case, opt-in caps */
  white-space: nowrap;
}
.rs-badge .icon { width: 1.1em; height: 1.1em; }
.rs-badge--wrap { white-space: normal; line-height: 1.3; }
.rs-badge--caps { text-transform: uppercase; }
.rs-badge--light { border-color: var(--rs-primary-100); background: var(--rs-primary-50); color: var(--rs-secondary-ink); }
@media (max-width: 480px) { .rs-badge { white-space: normal; line-height: 1.3; } }

/* ---------- 11.4 Display + leads ------------------------------------------- */
.rs-display {
  margin: 0 0 1.25rem;
  color: var(--rs-ctx-heading);
  font-size: var(--rs-fs-display);       /* 25 → 45 px */
  font-weight: var(--rs-fw-black);
  line-height: var(--rs-lh-display);
  text-wrap: balance;
}
.rs-display__accent { color: var(--rs-primary); }
.rs-tagline-hero {
  margin: 0 0 1.875rem;
  color: var(--rs-primary);
  font-size: var(--rs-fs-tagline);       /* 20 → 32 px */
  font-weight: var(--rs-fw-black);
  letter-spacing: var(--rs-ls-tagline);  /* 3 px */
  line-height: var(--rs-lh-display);
  text-wrap: balance;
}
.rs-hero-lead {
  display: inline-block;
  max-width: 100%;
  margin: 0 0 2.5rem;
  padding-top: 1.875rem;
  border-top: 1px solid var(--rs-primary-a40);
  color: var(--rs-text-on-dark);
  font-size: var(--rs-fs-hero-lead);     /* 18 → 20 px */
  line-height: var(--rs-lh-body);
}
.rs-lead { color: var(--rs-ctx-text-soft); font-size: var(--rs-fs-lead); line-height: var(--rs-lh-copy); }
.rs-h3-look { font-size: var(--rs-fs-h3); font-weight: var(--rs-fw-regular); line-height: var(--rs-lh-snug); }

/* sector typography (05 § 1.2) */
.rs-sector-title { margin: 0 0 1.25rem; color: var(--rs-ctx-heading); font-weight: var(--rs-fw-bold); letter-spacing: var(--rs-ls-display); line-height: 1.08; text-wrap: balance; }
.rs-sector-copy { margin: 0 0 1rem; color: var(--rs-ctx-text-muted); font-size: 1rem; line-height: 1.75; }
.rs-sector-copy--light { color: var(--rs-text-muted); }

/* ---------- 11.5 Prose ------------------------------------------------------- */
/* .rs-prose = 01 link rules + 04 measure (C-81); legal typography in --legal. */
.rs-prose { max-width: 72ch; }
.rs-prose > :first-child { margin-top: 0; }
.rs-prose > :last-child { margin-bottom: 0; }
.rs-prose h2 { margin: 2.5rem 0 1rem; text-wrap: balance; }
.rs-prose h3 { margin: 2rem 0 .75rem; }
.rs-prose h4 { margin: 1.75rem 0 .6rem; font-size: var(--rs-fs-h5); }
.rs-prose h2 + h3 { margin-top: 0; }
.rs-prose :is(h2, h3, h4)[id] { scroll-margin-top: var(--rs-scroll-offset); }
.rs-prose li + li { margin-top: .35em; }
.rs-prose img { height: auto; border-radius: var(--rs-radius-md); }
.rs-prose figure { margin: 0 0 1.5em; }
.rs-prose figcaption { margin-top: .5rem; color: var(--rs-ctx-text-muted); font-size: var(--rs-fs-meta); }
@media (max-width: 600px) { .rs-prose :is(ul, ol) { margin-left: 1.5em; } }

.rs-prose--legal { max-width: var(--rs-measure); }   /* 46 rem ≈ 75 characters (B-18) */
.rs-prose--legal h2 {
  margin: 2.5rem 0 1rem;
  font-size: var(--rs-fs-h3);
  font-weight: var(--rs-fw-black);
  line-height: 1.3;
  scroll-margin-top: var(--rs-scroll-offset);
}
.rs-prose--legal > h2:first-child { margin-top: 0; }
.rs-prose--legal h3 { margin: 1.75rem 0 .6rem; font-size: var(--rs-fs-h5); font-weight: var(--rs-fw-black); line-height: 1.4; }
.rs-prose--legal h4 { margin: 1.5rem 0 .5rem; font-size: 1rem; font-weight: var(--rs-fw-bold); line-height: 1.5; }
.rs-prose--legal :is(ul, ol) { margin: 0 0 1.5em 1.5em; padding: 0; }
.rs-prose--legal address { margin: 0 0 1.5em; font-style: normal; }
.rs-prose--legal .rs-table-wrap { margin-block: 0 1.5em; }

/* ---------- 11.6 Blockquote, callout, note --------------------------------- */
blockquote,
.rs-blockquote {
  position: relative;
  margin: 0 0 1.5em;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--rs-primary);
  border-radius: 0 var(--rs-radius-md) var(--rs-radius-md) 0;
  background: var(--rs-ctx-quote-bg);    /* light #F5F5F5 / dark #2A2F34 */
  color: var(--rs-ctx-text-soft);
  font-size: var(--rs-fs-lead);
  font-style: normal;
  line-height: var(--rs-lh-copy);
}
:is(blockquote, .rs-blockquote) > :last-child { margin-bottom: 0; }
:is(blockquote, .rs-blockquote) cite { display: block; margin-top: .75rem; color: var(--rs-ctx-text-muted); font-size: var(--rs-fs-meta); font-style: normal; }

.rs-callout {
  margin: 0 0 1.5em;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--rs-primary);
  border-radius: 0 var(--rs-radius-md) var(--rs-radius-md) 0;
  background: var(--rs-ctx-quote-bg);
  color: var(--rs-ctx-text-soft);
  font-size: var(--rs-fs-ui);
  line-height: 1.6;
}
.rs-callout > :last-child { margin-bottom: 0; }
.rs-callout > :is(h3, p):first-child { margin-top: 0; }
.rs-callout h3 { margin: 0 0 .5rem; color: var(--rs-ctx-heading); font-size: var(--rs-fs-h5); font-weight: var(--rs-fw-black); line-height: 1.4; }
.rs-callout p { margin: 0 0 .75em; }
.rs-callout strong { color: var(--rs-ctx-heading); }
.rs-callout--important { border-left-color: var(--rs-secondary-ink); background: var(--rs-primary-25); }
.rs-callout--warning { border-left-color: var(--rs-warning); background: rgb(var(--rs-warning-rgb) / .06); }
.rs-on-dark .rs-callout--important,
.rs-on-dark .rs-callout--warning { background: var(--rs-charcoal-700); }

.rs-note {                               /* tinted note (box-with-text-and-video.png) */
  margin: 1.25rem 0 0;
  padding: .9rem 1rem;
  border: 1px solid var(--rs-primary-a35);
  border-radius: var(--rs-radius-7);
  background: var(--rs-primary-a08);
  color: var(--rs-ctx-text);
  font-size: var(--rs-fs-meta);
  line-height: 1.55;
}
.rs-note strong { color: var(--rs-ctx-heading); }

/* ===== 12 Buttons & links ===== */
/* 01 § 9.1 (B1–B11) + 08 B-13 corrections (no --danger variant: ProNet decision E5).
   Buttons read local custom properties; variants only swap them.
   Primary fills always carry ink text (#10171C, 7.42:1) – never white. */
.rs-btn {
  --rs-btn-bg: transparent;
  --rs-btn-fg: currentColor;
  --rs-btn-bd: transparent;
  --rs-btn-bg-h: var(--rs-btn-bg);
  --rs-btn-fg-h: var(--rs-btn-fg);
  --rs-btn-bd-h: var(--rs-btn-bd);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  max-width: 100%;
  padding: .9rem 1.35rem;
  border: 1px solid var(--rs-btn-bd);
  border-radius: var(--rs-radius-sm);
  background: var(--rs-btn-bg);
  color: var(--rs-btn-fg);
  font-family: var(--rs-font);
  font-size: var(--rs-fs-body);
  font-weight: var(--rs-fw-bold);
  line-height: var(--rs-lh-body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--rs-dur-form) var(--rs-ease),
    border-color var(--rs-dur-form) var(--rs-ease),
    color var(--rs-dur-form) var(--rs-ease),
    box-shadow var(--rs-dur-form) var(--rs-ease),
    transform var(--rs-dur-form) var(--rs-ease);
}
.rs-btn:hover { border-color: var(--rs-btn-bd-h); background: var(--rs-btn-bg-h); color: var(--rs-btn-fg-h); text-decoration: none; }
.rs-btn:focus-visible { outline: 3px solid var(--rs-focus); outline-offset: 3px; }
.rs-btn:disabled,
.rs-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.rs-btn > .icon { flex: 0 0 auto; width: 1.125em; height: 1.125em; }
.rs-btn > span { min-width: 0; }

/* B1 – filled primary. B2 (Variante B, D-06): Fläche aus dem Kontext – auf Dunkel Akzentblau + dunkle Schrift,
   auf Hell Web-Blau #006699 + Weiß (Kontext-Tokens --rs-cta-* in Abschnitt 01/05) */
.rs-btn--solid {
  --rs-btn-bg: var(--rs-cta-bg);
  --rs-btn-bd: var(--rs-cta-bg);
  --rs-btn-fg: var(--rs-cta-fg);
  --rs-btn-bg-h: var(--rs-cta-bg-h);
  --rs-btn-bd-h: var(--rs-cta-bg-h);
  --rs-btn-fg-h: var(--rs-cta-fg);
}
.rs-btn--solid:hover { transform: translateY(-1px); }
.rs-btn--solid:active { border-color: var(--rs-cta-bg-a); background: var(--rs-cta-bg-a); transform: none; }

/* quote-button metrics (16 px Black, 52 px): .rs-btn.rs-btn--solid.rs-btn--strong */
.rs-btn--strong {
  gap: .65rem;
  min-height: 3.25rem;
  padding: .9rem 1.5rem;
  font-size: var(--rs-fs-btn);
  font-weight: var(--rs-fw-black);
  line-height: 1.2;
}
.rs-btn--strong.rs-btn--solid { box-shadow: var(--rs-cta-shadow); }

/* B6 – big full-width CTA (quote hero) */
.rs-btn--xl {
  width: 100%;
  min-height: 3.75rem;
  padding: 1rem 1.8rem;
  font-size: var(--rs-fs-lead);
  text-transform: uppercase;
}
.rs-btn--block { display: flex; width: 100%; }

/* B1c – form submit */
.rs-btn--submit {
  display: flex;
  width: 100%;
  min-height: 3rem;
  margin: 1rem 0 0;
  padding: .8rem 1.25rem;
  font-size: var(--rs-fs-ui);
  font-weight: var(--rs-fw-black);
  line-height: 1.2;
}

/* filled secondary (white text 5.58:1) */
.rs-btn--secondary {
  --rs-btn-bg: var(--rs-secondary-ink);
  --rs-btn-bd: var(--rs-secondary-ink);
  --rs-btn-fg: var(--rs-white);
  --rs-btn-bg-h: var(--rs-secondary-700);
  --rs-btn-bd-h: var(--rs-secondary-700);
  --rs-btn-fg-h: var(--rs-white);
}

/* B2 – accent outline (dark: #68AED6, light: #356E8D via context) */
.rs-btn--ghost {
  --rs-btn-bd: var(--rs-ctx-accent);
  --rs-btn-fg: var(--rs-ctx-accent);
  --rs-btn-bg-h: var(--rs-primary-a10);
  --rs-btn-bd-h: var(--rs-ctx-accent);
  --rs-btn-fg-h: var(--rs-ctx-accent-hover);
  min-height: 3rem;
  padding: .8rem 1.2rem;
  border-radius: var(--rs-radius-xs);
  font-weight: var(--rs-fw-black);
}

/* B2b – 2 px framed outline, square (home hero "So können wir helfen") */
.rs-btn--frame {
  --rs-btn-bd: var(--rs-secondary);
  --rs-btn-fg: var(--rs-white);
  --rs-btn-bd-h: var(--rs-primary);
  --rs-btn-fg-h: var(--rs-primary);
  padding: 10px 18px 11px 20px;
  border-width: 2px;
  border-radius: 0;
}
.rs-btn--frame > .icon { width: 1em; height: 1em; margin-left: .25em; }

/* B3 – neutral outline on dark */
.rs-btn--ghost-light {
  --rs-btn-bd: var(--rs-charcoal-400);
  --rs-btn-fg: var(--rs-white);
  --rs-btn-bg-h: var(--rs-white);
  --rs-btn-bd-h: var(--rs-white);
  --rs-btn-fg-h: var(--rs-charcoal);
}
/* B3a – alternative hover used in the final CTA */
.rs-btn--accent-hover,
.rs-btn--ghost-light.rs-btn--accent-hover {
  --rs-btn-bg-h: var(--rs-charcoal-700);
  --rs-btn-bd-h: var(--rs-primary);
  --rs-btn-fg-h: var(--rs-white);
}

/* B3b – white button on light sections */
.rs-btn--light {
  --rs-btn-bg: var(--rs-white);
  --rs-btn-bd: var(--rs-grey-450);
  --rs-btn-fg: var(--rs-charcoal-900);
  --rs-btn-bg-h: var(--rs-grey-200);
  --rs-btn-bd-h: var(--rs-grey-450);
  --rs-btn-fg-h: var(--rs-charcoal-900);
}
.rs-btn--light:focus-visible { outline-color: var(--rs-secondary-ink); }

/* B8 – white button with 2 px primary border, radius 10 (blocks.png "Kontakt"); hover B-13 */
.rs-btn--outline {
  --rs-btn-bg: var(--rs-white);
  --rs-btn-bd: var(--rs-primary);
  --rs-btn-fg: var(--rs-secondary-ink);
  --rs-btn-bg-h: var(--rs-charcoal);
  --rs-btn-bd-h: var(--rs-primary);
  --rs-btn-fg-h: var(--rs-white);
  padding: .75rem 1.5rem;
  border-width: 2px;
  border-radius: var(--rs-radius-lg);
  font-size: var(--rs-fs-btn);
  white-space: nowrap;
  transition-duration: var(--rs-dur-slower);   /* "all .6s ease" */
}
.rs-on-dark .rs-btn--outline { --rs-btn-bg-h: transparent; }

/* B10/B11 – pills */
.rs-btn--pill {
  --rs-btn-bg: var(--rs-secondary-ink);
  --rs-btn-bd: var(--rs-secondary-ink);
  --rs-btn-fg: var(--rs-white);
  --rs-btn-bg-h: var(--rs-primary);
  --rs-btn-bd-h: var(--rs-primary);
  --rs-btn-fg-h: var(--rs-on-primary);
  padding: .8rem 1.4rem;
  border-radius: var(--rs-radius-pill);
  font-size: .85rem;
  line-height: 1.3;
  white-space: nowrap;
}
.rs-btn--pill-light {
  --rs-btn-bg: var(--rs-white);
  --rs-btn-bd: var(--rs-primary);
  --rs-btn-fg: var(--rs-charcoal);
  --rs-btn-bg-h: var(--rs-primary);
  --rs-btn-bd-h: var(--rs-primary);
  --rs-btn-fg-h: var(--rs-on-primary);
  padding: .9rem 1.4rem;
  border-width: 2px;
  border-radius: var(--rs-radius-pill);
  font-size: .9rem;
  line-height: 1.3;
}

/* buttons inside notices (callouts, spam-protection notice, prose) never take over
   the running-text link underline – in any state */
:is(.rs-callout, .rs-form__consent, .rs-include, .rs-prose, p) a:is(.rs-btn, .rs-consult),
:is(.rs-callout, .rs-form__consent, .rs-include, .rs-prose, p) a:is(.rs-btn, .rs-consult):is(:hover, :focus-visible, :active) { text-decoration: none; }

/* B4 – "MEHR ERFAHREN →" text link: accent text stays, underline turns to heading colour (C-55) */
.rs-link-more {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding-bottom: 10px;
  border-bottom: 1px solid currentColor;
  color: var(--rs-ctx-accent);
  font-size: var(--rs-fs-body);
  font-weight: var(--rs-fw-bold);
  letter-spacing: var(--rs-ls-caps);
  line-height: var(--rs-lh-body);
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color var(--rs-dur-instant) ease-in-out, color var(--rs-dur-instant) ease-in-out;
}
.rs-link-more:hover,
.rs-link-more:focus-visible { border-bottom-color: var(--rs-ctx-heading); color: var(--rs-ctx-accent); }
.rs-link-more:focus-visible { outline: 2px solid var(--rs-focus); outline-offset: 4px; }
.rs-link-more > .icon { width: 1em; height: 1em; transition: transform var(--rs-dur-card) var(--rs-ease); }
.rs-link-more:hover > .icon { transform: translateX(3px); }

/* B5 – round arrow in a tinted circle (hover fixed: it really triggers) */
.rs-btn-round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--rs-radius-pill);
  background: var(--rs-primary-a15);
  color: var(--rs-ctx-accent);           /* light: #356E8D 5.16:1 on the tint */
  transition: background-color var(--rs-dur-card) var(--rs-ease), color var(--rs-dur-card) var(--rs-ease), transform var(--rs-dur-card) var(--rs-ease);
}
.rs-btn-round > .icon { width: 21px; height: 21px; }
a:hover > .rs-btn-round,
a:focus-visible > .rs-btn-round {
  background: var(--rs-primary);
  color: var(--rs-on-primary);
  transform: translateX(3px);
}

/* buttons stretch on small screens inside hero/CTA action rows (§ 1.3 small) */
@media (max-width: 600px) {
  .rs-btn--outline { white-space: normal; }
}

/* ===== 13 Lists & data ===== */
/* 01 § 9.6/9.9/9.10/9.12 + 08 B-11 (3/5/6 steps, progress layer) + contract
   § 5.1.9/5.3.15/5.3.16/5.4.3/5.4.5. */

/* ---------- 13.1 Check list -------------------------------------------------- */
.rs-checklist {
  display: flex;
  flex-direction: column;
  gap: .875rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}
.rs-checklist__item {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0;
  color: var(--rs-ctx-heading);
  font-size: 1.05rem;
  font-weight: var(--rs-fw-bold);
  line-height: 1.45;
}
.rs-checklist__icon { flex: 0 0 1.125rem; width: 1.125rem; height: 1.125rem; color: var(--rs-ctx-accent); }
.rs-checklist--top .rs-checklist__item { align-items: flex-start; }
.rs-checklist--top .rs-checklist__icon { margin-top: .15em; }
.rs-checklist--plain { gap: .85rem; }
.rs-checklist--plain .rs-checklist__item { align-items: flex-start; gap: .8rem; font-size: var(--rs-fs-body); line-height: 1.5; }
.rs-checklist--plain .rs-checklist__icon { flex-basis: 1.1em; width: 1.1em; height: 1.1em; margin-top: .2em; }
.rs-checklist--inline {                  /* badges row in the headline page hero */
  flex-direction: row;
  flex-wrap: wrap;
  gap: .75rem 1.25rem;
}
.rs-checklist--inline .rs-checklist__item { font-size: var(--rs-fs-ui); }
.rs-checklist__item > span { min-width: 0; }

/* ---------- 13.2 Include box (quote hero, checklist block) -------------------- */
.rs-include {
  max-width: 37rem;
  margin: 0 0 1.5rem;
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--rs-primary-a55);
  border-radius: var(--rs-radius-lg);
  background: var(--rs-primary-a06);
}
.rs-include__title {
  margin: 0 0 1rem;
  color: var(--rs-ctx-accent);
  font-size: var(--rs-fs-label);
  font-weight: var(--rs-fw-black);
  letter-spacing: .15em;
  line-height: 1.3;
  text-transform: uppercase;
}
.rs-include .rs-checklist { gap: .75rem; margin: 0; }
.rs-include .rs-checklist__item { align-items: flex-start; font-size: .975rem; }
.rs-include .rs-checklist__icon { flex-basis: 1.25rem; width: 1.25rem; height: 1.25rem; margin-top: .12rem; }
.rs-include--light {
  max-width: none;
  border-color: var(--rs-primary-a55);
  background: var(--rs-white);
  color: var(--rs-text);
}
.rs-include--light .rs-include__title { color: var(--rs-secondary-ink); }
.rs-include--light .rs-checklist__item { color: var(--rs-text); }
.rs-include--light .rs-checklist__icon { color: var(--rs-secondary); }
@media (max-width: 600px) {
  .rs-include { padding: 1rem; }
  .rs-include .rs-checklist__item { font-size: .9rem; }
}

/* ---------- 13.3 Numbered scope list (media box) ------------------------------ */
.rs-scope-list { margin: .25rem 0 0; padding: 0; list-style: none; }
.rs-scope-list > li { padding: 1rem 0; border-bottom: 1px solid var(--rs-white-a12); }
.rs-scope-list__title { margin: 0 0 .4rem; font-size: var(--rs-fs-micro); line-height: var(--rs-lh-body); }   /* h3 wrapper of the label */
.rs-scope-list__num {
  display: block;
  color: var(--rs-primary);
  font-size: var(--rs-fs-micro);
  font-weight: var(--rs-fw-black);
  letter-spacing: var(--rs-ls-kicker);
  text-transform: uppercase;
}
.rs-scope-list p { margin: 0; color: var(--rs-text-on-dark-body); font-size: var(--rs-fs-small); line-height: 1.55; }

/* ---------- 13.4 Chevron list ------------------------------------------------- */
.rs-list-chevron { margin: 0; padding: 0; list-style: none; }
.rs-list-chevron li {
  position: relative;
  margin: 0 0 .65rem;
  padding-left: 1rem;
  color: var(--rs-ctx-heading);
  font-size: .88rem;
  font-weight: var(--rs-fw-bold);
  line-height: 1.45;
}
.rs-list-chevron li::before { content: "›"; position: absolute; left: 0; top: -.1rem; color: var(--rs-ctx-accent); font-size: 1.1rem; }

/* ---------- 13.5 Contact list (/kontakt/) ------------------------------------- */
.rs-contact-list { display: grid; gap: 1.1rem; margin: 2rem 0; padding: 0; list-style: none; }
.rs-contact-list__item { display: flex; align-items: flex-start; gap: .85rem; margin: 0; line-height: 1.55; }
.rs-contact-list__item > .icon { flex: none; width: 20px; height: 20px; margin-top: .2rem; color: var(--rs-secondary); }
.rs-contact-list__item > div { min-width: 0; }
.rs-contact-list__label {
  display: block;
  margin-bottom: .1rem;
  color: var(--rs-text-muted);
  font-size: var(--rs-fs-label);
  font-weight: var(--rs-fw-black);
  letter-spacing: .08em;
  line-height: 1.4;
  text-transform: uppercase;
}
.rs-contact-list__item address { margin: 0; font-style: normal; }
.rs-contact-list__item a { color: var(--rs-text); font-weight: var(--rs-fw-bold); text-decoration: none; }
.rs-contact-list__item a:hover,
.rs-contact-list__item a:focus-visible { color: var(--rs-secondary-ink); text-decoration: underline; text-underline-offset: .2em; }
.rs-contact-list__item--address > .icon { margin-top: .25rem; }

/* ---------- 13.7 Process steps (counts.png) + progress layer (B-11) ----------- */
.rs-steps {
  --rs-steps-cols: 4;
  display: grid;
  grid-template-columns: repeat(var(--rs-steps-cols), minmax(0, 1fr));
  gap: 2.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rs-step;
}
.rs-steps--3,
.rs-steps--6 { --rs-steps-cols: 3; }
.rs-steps--5 { --rs-steps-cols: 5; }
@media (max-width: 1100px) { .rs-steps--5 { --rs-steps-cols: 3; } }
@media (max-width: 900px)  { .rs-steps, .rs-steps--3, .rs-steps--5, .rs-steps--6 { --rs-steps-cols: 2; } }
@media (max-width: 600px)  { .rs-steps, .rs-steps--3, .rs-steps--5, .rs-steps--6 { --rs-steps-cols: 1; } }
/* B2 (ProNet-Vorschau .step): Linie oben mit 56-px-Akzent (ohne JS sichtbar; mit JS blendet initSteps die Akzente
   nacheinander ein), Nummer 14 px, Titel 20 px fett, Text 16 px */
.rs-steps { column-gap: 1.75rem; }
.rs-step {
  position: relative;
  min-width: 0;
  margin: 0;
  padding-top: 1.4rem;
  border-top: 2px solid var(--rs-ctx-border);   /* hell #D9DEE2, dunkel #444B5C */
}
.rs-step::before {                       /* accent on the 2 px rule (main.js initSteps) */
  content: "";
  position: absolute;
  inset: -2px auto auto 0;
  width: 56px;
  height: 2px;
  background: var(--rs-secondary);
  transform-origin: left center;
}
.rs-on-dark .rs-step::before { background: var(--rs-primary); }
.steps-ready .rs-step::before { transform: scaleX(0); transition: transform 500ms var(--rs-ease-out); }
.steps-ready .rs-step.is-active::before { transform: scaleX(1); }
.rs-step__number {
  display: block;
  margin-bottom: .6rem;
  color: var(--rs-ctx-accent);
  font-size: var(--rs-fs-small);         /* 14 px */
  font-weight: var(--rs-fw-black);
  letter-spacing: var(--rs-ls-label);
  line-height: 1.6;
}
.rs-step__title { margin: 0 0 .5rem; color: var(--rs-ctx-heading); font-size: 1.25rem; font-weight: var(--rs-fw-black); line-height: 1.3; }
.rs-step__copy { margin: 0; color: var(--rs-ctx-text-soft); font-size: 1rem; line-height: var(--rs-lh-body); }

/* ---------- 13.8 Tables --------------------------------------------------------- */
.rs-table-wrap {
  overflow-x: auto;
  margin: 0 0 1.5em;
  border: 1px solid var(--rs-grey-300);
  border-radius: var(--rs-radius-lg);
}
.rs-table-wrap:focus-visible { outline: 2px solid var(--rs-focus); outline-offset: 2px; }
.rs-table {
  width: 100%;
  min-width: 34rem;
  margin: 0;
  border-collapse: collapse;
  font-size: var(--rs-fs-ui);
  line-height: 1.5;
}
.rs-table caption {
  padding: .75rem 1rem;
  color: var(--rs-text-muted);
  font-size: var(--rs-fs-meta);
  text-align: left;
  caption-side: bottom;
}
.rs-table th,
.rs-table td { padding: .75rem 1rem; border-bottom: 1px solid var(--rs-grey-300); text-align: left; vertical-align: top; }
.rs-table thead th {
  background: var(--rs-charcoal);
  color: var(--rs-white);
  font-size: var(--rs-fs-meta);
  font-weight: var(--rs-fw-black);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.rs-table tbody tr:nth-child(even) { background: var(--rs-grey); }
.rs-table tbody tr:last-child > * { border-bottom: 0; }
.rs-table tbody th { font-weight: var(--rs-fw-bold); }
@media (max-width: 600px) { .rs-table { min-width: 28rem; } }

/* ===== 14 Cards & tiles ===== */
/* 01 § 9.7/9.8 (C1–C12), 08 B-10 icon cards, 05 § 6 hub/industry cards,
   contract § 5.3.25 partner logos. */

/* ---------- 14.1 Icon tile --------------------------------------------------- */
.rs-icon-tile {
  --rs-tile-size: 40px;
  --rs-tile-icon: 21px;
  --rs-tile-radius: var(--rs-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--rs-tile-size);
  height: var(--rs-tile-size);
  border-radius: var(--rs-tile-radius);
  background: var(--rs-primary-50);
  color: var(--rs-secondary-700);       /* 6.99:1 on #EAF4FA */
  line-height: 0;
}
.rs-icon-tile > .icon { width: var(--rs-tile-icon); height: var(--rs-tile-icon); }
.rs-icon-tile--bordered { --rs-tile-radius: var(--rs-radius-7); --rs-tile-icon: 20px; border: 1px solid var(--rs-primary-a16); }
.rs-icon-tile--lg {
  --rs-tile-size: 3.75rem;
  --rs-tile-icon: 1.75rem;
  --rs-tile-radius: var(--rs-radius-lg);
  border: 1px solid var(--rs-primary-100);
  color: var(--rs-secondary-ink);
}
.rs-icon-tile--solid { border-color: var(--rs-primary); background: var(--rs-primary); color: var(--rs-on-primary); }
.rs-icon-tile--dark {
  --rs-tile-size: 3.25rem;
  --rs-tile-icon: 1.6rem;
  --rs-tile-radius: var(--rs-radius-icon);
  border: 1px solid var(--rs-primary-a32);
  background: var(--rs-primary-a18);
  color: var(--rs-primary);
  transition: background-color var(--rs-dur-card) var(--rs-ease), color var(--rs-dur-card) var(--rs-ease), transform var(--rs-dur-card) var(--rs-ease);
}
.rs-icon-tile--dark.rs-icon-tile--lg {
  --rs-tile-size: 3.75rem;
  --rs-tile-icon: 2rem;
  --rs-tile-radius: var(--rs-radius-lg);
  border-color: var(--rs-primary-a30);
  background: var(--rs-primary-a13);
}
@media (max-width: 768px) { .rs-icon-tile:not(.rs-icon-tile--dark):not(.rs-icon-tile--lg) { --rs-tile-size: 36px; --rs-tile-icon: 19px; } }
@media (max-width: 600px) { .rs-icon-tile--lg { --rs-tile-size: 3.25rem; --rs-tile-icon: 1.5rem; } }

/* ---------- 14.2 C1 light card with accent top (boxes.png) -------------------- */
.rs-card {
  position: relative;
  min-width: 0;
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--rs-grey-400);
  border-top: 3px solid var(--rs-primary);
  border-radius: var(--rs-radius-lg);
  background: var(--rs-white);
}
.rs-card__kicker {
  display: block;
  margin: 0 0 .7rem;
  color: var(--rs-secondary-ink);
  font-size: var(--rs-fs-micro);
  font-weight: var(--rs-fw-black);
  letter-spacing: var(--rs-ls-label);
  line-height: 1.4;
  text-transform: uppercase;
}
.rs-card__title { margin: 0 0 .75rem; }
.rs-card__copy { margin: 0 0 1rem; color: var(--rs-text-soft); line-height: var(--rs-lh-copy); }
.rs-card__list { display: grid; gap: .55rem; margin: 0; padding-left: 1.2rem; color: var(--rs-text-soft); line-height: 1.55; }
.rs-card__list > li { padding-left: .15rem; }
.rs-card__list > li::marker { color: var(--rs-secondary); }

/* ---------- 14.3 C2 dark panel (affects.png) --------------------------------- */
.rs-panel {
  min-width: 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--rs-line-dark);
  border-radius: var(--rs-radius-lg);
  background: var(--rs-charcoal-700);
  color: var(--rs-text-on-dark);
}
.rs-panel--accent { border-top: 3px solid var(--rs-primary); padding-top: calc(clamp(1.5rem, 3vw, 2.25rem) - 2px); }   /* titles of both panels stay level */
.rs-panel__title { margin: 0 0 .8rem; color: var(--rs-ctx-heading); }
.rs-panel__copy { margin: 0 0 1.2rem; color: var(--rs-ctx-text); line-height: var(--rs-lh-copy); }
.rs-panel__copy > :last-child { margin-bottom: 0; }
.rs-panel__list { display: grid; gap: .7rem; margin: 0; padding-left: 1.2rem; color: var(--rs-text-on-dark-strong); line-height: 1.55; }
.rs-panel__list strong { color: var(--rs-ctx-heading); }
.rs-review-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rs-ctx-rule);
}
.rs-review-row p { max-width: 48rem; margin: 0; color: var(--rs-ctx-text); line-height: var(--rs-lh-copy); }
.rs-review-row strong { color: var(--rs-ctx-accent); }
.rs-review-row .rs-btn { flex: 0 0 auto; }
@media (max-width: 768px) { .rs-review-row { flex-direction: column; align-items: stretch; gap: 1.25rem; } }

/* ---------- 14.4 C3 dark service card (block-services.png) -------------------- */
.rs-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 1024px) { .rs-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .rs-service-grid { grid-template-columns: minmax(0, 1fr); } }
.rs-service-card {
  position: relative;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 1rem;
  row-gap: 1.35rem;
  height: 100%;
  min-height: 15.625rem;
  margin: 0;
  overflow: hidden;
  padding: 1.85rem;
  border: 1px solid var(--rs-white-a13);
  border-top: 4px solid var(--rs-primary);
  border-radius: var(--rs-radius-2xl);
  background: var(--rs-charcoal-700);
  box-shadow: var(--rs-shadow-dark);
  color: var(--rs-white);
  transition: background-color var(--rs-dur-card) var(--rs-ease), border-color var(--rs-dur-card) var(--rs-ease), box-shadow var(--rs-dur-card) var(--rs-ease), transform var(--rs-dur-card) var(--rs-ease);
}
.rs-service-card > .rs-icon-tile { grid-column: 1; grid-row: 1; align-self: center; }
.rs-service-card__title {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin: 0;
  color: var(--rs-white);
  font-size: var(--rs-fs-h3);
  font-weight: var(--rs-fw-bold);
  letter-spacing: -.015em;
  line-height: 1.28;
}
.rs-service-card__title a { color: inherit; text-decoration: none; }
.rs-service-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 2; }   /* whole card clickable */
.rs-service-card__title a:focus-visible { outline: 0; }
.rs-service-card__text { grid-column: 1 / -1; grid-row: 2; margin: 0; color: var(--rs-text-on-dark-body); font-size: .94rem; line-height: 1.7; }
.rs-service-card:not(.rs-service-card--static):hover {
  border-color: var(--rs-primary);
  background: var(--rs-charcoal-650);
  box-shadow: var(--rs-shadow-dark-hover);
  transform: translateY(-5px);
}
.rs-service-card:not(.rs-service-card--static):focus-within { border-color: var(--rs-primary); box-shadow: var(--rs-shadow-dark-focus); }
.rs-service-card:not(.rs-service-card--static):hover .rs-icon-tile--dark {
  background: var(--rs-primary);
  color: var(--rs-on-primary);
  transform: rotate(-3deg) scale(1.04);
}
@media (max-width: 560px) { .rs-service-card { min-height: 0; } }

/* ---------- 14.5 C4 vulnerability card (blocks.png) ----------------------------- */
.rs-vuln-card {
  position: relative;
  height: 100%;
  min-width: 0;
  margin: 0;
  padding: 1.5rem;
  border-bottom: .3em solid var(--rs-charcoal);
  border-radius: var(--rs-radius-notch) 0 var(--rs-radius-notch) 0;   /* TL + BR → the dark stroke curves up at the right */
  background: var(--rs-grey-200);
  box-shadow: var(--rs-shadow-notch);
  color: var(--rs-text);
}
.rs-vuln-card__title {
  display: flex;
  align-items: center;
  gap: .5em;
  margin: 0 0 .5rem;
  color: var(--rs-text);
  font-size: var(--rs-fs-card-title);
  font-weight: var(--rs-fw-bold);
  line-height: 1.45;
}
.rs-vuln-card__title > .icon { flex: 0 0 1em; width: 1em; height: 1em; color: var(--rs-charcoal); }
.rs-vuln-card__text { margin: 0; font-size: 1rem; line-height: 1.6; }
@media (max-width: 767px) {
  .rs-vuln-card { padding: 1.25rem; }
  .rs-vuln-card__text { font-size: var(--rs-fs-body); }
}

/* ---------- 14.6 C5 home feature cards (overlap the hero) ---------------------- */
/* Values of the client-approved design preview (spec/10 item 2: "Hero-Karten exakt so
   übernehmen"): 112 px overlap, 56 px gutter, 23 px/900 titles, 16 px copy. */
.rs-feature-grid {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 56px;
  margin-top: -112px;
}
.rs-feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  min-height: 372px;
  margin: 0;
  padding: 34px 30px 30px;
  border-top: 3px solid var(--rs-secondary);
  background: linear-gradient(180deg, var(--rs-grey) 0%, var(--rs-white) 100%);
  color: var(--rs-text);
  text-align: center;
}
.rs-feature-card__icon { flex: none; width: 58px; height: 58px; margin: 0 auto 18px; color: var(--rs-secondary); stroke-width: 1.5; }
.rs-feature-card__title {
  margin: 0 0 16px;
  color: var(--rs-text);
  font-size: 1.4375rem;                  /* 23 px */
  font-weight: var(--rs-fw-black);
  letter-spacing: -.01em;
  line-height: 1.25;
}
.rs-feature-card__text { margin: 0; color: var(--rs-text-soft); font-size: 1rem; line-height: 1.65; }
.rs-feature-card__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 20px;
  color: var(--rs-secondary-ink);
  font-weight: var(--rs-fw-black);
  text-decoration: none;
  transition: color var(--rs-dur-fast) ease;
}
.rs-feature-card__link .icon { width: 1rem; height: 1rem; stroke-width: 2.25; transition: transform var(--rs-dur-fast) ease; }
.rs-feature-card__link:hover { color: var(--rs-secondary-800); }
.rs-feature-card__link:hover .icon { transform: translateX(3px); }
.rs-feature-card__link:focus-visible { outline: 2px solid var(--rs-secondary-ink); outline-offset: 3px; border-radius: 2px; }
@media (max-width: 1024px) {
  .rs-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}
@media (max-width: 767px) {
  .rs-feature-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: -84px; }
  .rs-feature-card { min-height: 0; }
  .rs-feature-card__icon { width: 52px; height: 52px; }
}

/* ---------- 14.7 C6 link strip + link card with round arrow (counts.png) ------- */
.rs-link-strip {
  padding: 2rem var(--rs-gutter);
  border-bottom: 1px solid var(--rs-border-light);
}
.rs-link-strip__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  max-width: var(--rs-container-module);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.rs-link-strip__grid > li { display: flex; min-width: 0; }
.rs-link-strip__grid > li > * { flex: 1 1 auto; min-width: 0; }
@media (min-width: 1025px) { .rs-link-strip__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  .rs-link-strip { padding-block: 1.5rem; }
  .rs-link-strip__grid { grid-template-columns: minmax(0, 1fr); }
}
.rs-link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 116px;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--rs-border-light);
  border-top: 4px solid var(--rs-primary);
  border-radius: var(--rs-radius-lg);
  background: var(--rs-white);
  box-shadow: var(--rs-shadow-card);
  color: var(--rs-text);
  text-decoration: none;
  transition: border-color var(--rs-dur-card) var(--rs-ease), box-shadow var(--rs-dur-card) var(--rs-ease), transform var(--rs-dur-card) var(--rs-ease);
}
.rs-link-card:hover { border-color: var(--rs-primary); box-shadow: var(--rs-shadow-card-hover); color: var(--rs-text); transform: translateY(-3px); }
.rs-link-card:focus-visible { outline: 0; border-color: var(--rs-primary); box-shadow: 0 0 0 3px var(--rs-secondary-ink); }
.rs-link-card__body { min-width: 0; }
.rs-link-card__eyebrow {
  display: block;
  margin: 0 0 .45rem;
  color: var(--rs-secondary-ink);
  font-size: .7rem;
  font-weight: var(--rs-fw-black);
  letter-spacing: .1em;
  line-height: 1.3;
  text-transform: uppercase;
}
.rs-link-card__label { display: block; color: var(--rs-text); font-size: clamp(1rem, 1.8vw, 1.2rem); font-weight: var(--rs-fw-black); line-height: 1.3; }
@media (max-width: 768px) { .rs-link-card { min-height: 104px; padding: 1.2rem; } }

/* ---------- 14.8 C12 soft light card ------------------------------------------- */
.rs-card-soft {
  padding: 1.5rem;
  border: 1px solid var(--rs-border-light);
  border-radius: var(--rs-radius-xl);
  background: var(--rs-white);
  box-shadow: var(--rs-shadow-card-soft);
}

/* ---------- 14.9 Icon cards (cards icons / services; B-10) --------------------- */
.rs-icon-cards { --rs-gap: 1.25rem; }
.rs-icon-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .9rem;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 1.5rem;
  border: 1px solid var(--rs-border-light);
  border-radius: var(--rs-radius-xl);
  background: var(--rs-white);
  box-shadow: var(--rs-shadow-card-soft);
  color: var(--rs-text);
  text-decoration: none;
}
.rs-icon-card__title { margin: 0; color: var(--rs-text); font-size: var(--rs-fs-card-title); font-weight: var(--rs-fw-bold); line-height: 1.3; }
.rs-icon-card__text { margin: 0; color: var(--rs-text-muted); font-size: 1rem; line-height: var(--rs-lh-copy); }
.rs-icon-card__more {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  margin-top: auto;
  padding-top: .25rem;
  color: var(--rs-secondary-ink);
  font-size: var(--rs-fs-ui);
  font-weight: var(--rs-fw-bold);
}
.rs-icon-card__more .icon { transition: transform var(--rs-dur-card) var(--rs-ease); }
a.rs-icon-card { transition: border-color var(--rs-dur-card) var(--rs-ease), box-shadow var(--rs-dur-card) var(--rs-ease), transform var(--rs-dur-card) var(--rs-ease); }
a.rs-icon-card:hover { border-color: var(--rs-primary); box-shadow: var(--rs-shadow-card-hover); color: var(--rs-text); transform: translateY(-3px); }
a.rs-icon-card:hover .rs-icon-card__more { text-decoration: underline; text-underline-offset: .2em; }
a.rs-icon-card:hover .rs-icon-card__more .icon { transform: translateX(3px); }
a.rs-icon-card:focus-visible { outline: 3px solid var(--rs-focus); outline-offset: 3px; }

/* ---------- 14.10 Why card (dark card on white; 05 § 6.1) ---------------------- */
.rs-why-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  min-height: 100%;
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.35rem, 2.5vw, 1.75rem);
  border: 1px solid var(--rs-white-a12);
  border-top: 3px solid var(--rs-primary);
  border-radius: var(--rs-radius-xl);
  background: var(--rs-charcoal-700);
  box-shadow: var(--rs-shadow-dark-soft);
}
.rs-why-card > .rs-icon-tile { margin-bottom: 1.375rem; }
.rs-why-card__title { margin: 0 0 .75rem; color: var(--rs-white); }
.rs-why-card__copy { margin: 0; color: var(--rs-text-on-dark-strong); font-size: 1rem; line-height: var(--rs-lh-copy); }
@media (max-width: 1024px) { .rs-why-card { padding: 1.75rem 1.5rem; } }
@media (max-width: 600px) { .rs-why-card { padding: 1.5rem 1.25rem; } .rs-why-card > .rs-icon-tile { margin-bottom: 1.125rem; } }

/* ===== 15 Media ===== */
/* 01 § 9.16 video box + 08 B-12/B-13 (illustration slot, 2-click facade),
   contract § 5.3.2 (CSS-only visuals) and § 5.3.17 report (04 § 5.10, B-9). */

/* ---------- 15.1 Media section wrappers ---------------------------------------- */
.rs-media { display: flow-root; }       /* no own padding – the box brings its margins (kept inside) */
.rs-media--box { padding: 5rem 1.5rem 6rem; background: var(--rs-charcoal); }   /* = 05 .rs-quote-watch */
@media (max-width: 600px) { .rs-media--box { padding: 3.5rem 1rem 4.5rem; } }

/* ---------- 15.2 Video block (video-block.png) ---------------------------------- */
.rs-video {
  display: grid;
  grid-template-columns: minmax(min(18rem, 100%), .8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  width: calc(100% - 3rem);
  max-width: var(--rs-container);
  margin: clamp(2rem, 4vw, 3.5rem) auto;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-top: 4px solid var(--rs-primary);
  background: var(--rs-charcoal);
  color: var(--rs-text-on-dark-soft);
}
.rs-video__copy { min-width: 0; max-width: 34rem; }
.rs-video .rs-eyebrow { margin-bottom: .8rem; letter-spacing: var(--rs-ls-label); }
.rs-video__title { margin: 0 0 1rem; color: var(--rs-white); }
.rs-video__text { margin: 0; color: var(--rs-text-on-dark-soft); line-height: var(--rs-lh-relaxed); }
.rs-video__text > p { margin: 0 0 1em; }
.rs-video__text > :last-child { margin-bottom: 0; }
.rs-video .rs-btn--ghost { margin-top: 1.5rem; }
.rs-video__figure { min-width: 0; margin: 0; }
.rs-video__embed {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--rs-charcoal-950);
  box-shadow: var(--rs-shadow-embed);
}
.rs-video__embed > img,
.rs-video__embed > iframe,
.rs-video__embed > video,
.rs-video__embed > .rs-video__media {   /* image slot + the element initVideoFacades inserts */
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.rs-video__embed > img { object-fit: contain; }
.rs-video__embed > video,
.rs-video__embed > video.rs-video__media { object-fit: contain; background: var(--rs-charcoal-950); }
.rs-video__embed--image { background: var(--rs-charcoal-900); box-shadow: none; }
.rs-video__embed--pattern,
.rs-video__embed--terminal,
.rs-video__embed--report { background: var(--rs-charcoal-950); }
.rs-video__caption { margin: .75rem 0 0; color: var(--rs-text-on-dark-subtle); font-size: .82rem; line-height: 1.5; }

/* 2-click facade (06 hooks + 01 visuals): poster button, 72 px play circle, notice */
.rs-video__poster {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: var(--rs-charcoal-950);
  cursor: pointer;
}
.rs-video__poster > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .85;
  transition: opacity var(--rs-dur-card) var(--rs-ease);
}
.rs-video__play {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--rs-primary);
  box-shadow: var(--rs-shadow-btn);
  color: var(--rs-on-primary);
  transition: transform var(--rs-dur-card) var(--rs-ease), background-color var(--rs-dur-card) var(--rs-ease);
}
.rs-video__play > .icon { width: 28px; height: 28px; margin-left: 4px; }
.rs-video__poster:hover > img { opacity: 1; }
.rs-video__poster:hover .rs-video__play { background: var(--rs-primary-300); transform: scale(1.05); }
.rs-video__poster:focus-visible { outline: 3px solid var(--rs-primary); outline-offset: -3px; }
.rs-video__notice {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  margin: 0;
  padding: .5rem .75rem;
  background: rgb(var(--rs-black-rgb) / .6);
  color: var(--rs-text-on-dark-strong);
  font-size: var(--rs-fs-label);
  line-height: 1.45;
  text-align: left;
}
.rs-video__notice a { color: var(--rs-primary-200); text-decoration: underline; text-underline-offset: .15em; }
.is-playing > .rs-video__notice { display: none; }
@media (max-width: 850px) {
  .rs-video { grid-template-columns: minmax(0, 1fr); }
  .rs-video__copy { max-width: 44rem; }
}
/* === Kundenwunsch 26.10.2026: Merksatz „Kurz gesagt“ statt Platzhalter-Muster im media-Block ===
   Ohne echtes Visual trägt die zweite Spalte die Bildunterschrift als Merksatz; der Text bekommt die breitere Spalte. */
.rs-media--takeaway .rs-video { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.rs-media--takeaway .rs-video__copy { max-width: 40rem; }
.rs-media--solo .rs-video,
.rs-media--solo .rs-video-box { grid-template-columns: minmax(0, 1fr); }
.rs-media--solo .rs-video__copy { max-width: 46rem; }
.rs-media-takeaway {
  align-self: center;
  min-width: 0;
  margin: 0;
  padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 2.5vw, 2.25rem);
  border-left: 4px solid var(--rs-primary);
  border-radius: 0 var(--rs-radius-sm) var(--rs-radius-sm) 0;
  background: var(--rs-white-a05);
}
.rs-media-takeaway__label {
  margin: 0 0 .6rem;
  color: var(--rs-primary);
  font-size: .78rem;
  font-weight: var(--rs-fw-bold);
  letter-spacing: var(--rs-ls-eyebrow);
  line-height: 1.3;
  text-transform: uppercase;
}
.rs-media-takeaway__text {
  margin: 0;
  color: var(--rs-white);
  font-size: clamp(1.2rem, 1rem + .75vw, 1.6rem);
  font-weight: var(--rs-fw-bold);
  line-height: 1.35;
  text-wrap: balance;
}
@media (max-width: 850px) {
  .rs-media--takeaway .rs-video { grid-template-columns: minmax(0, 1fr); }
  .rs-media-takeaway { align-self: stretch; }
}
@media (max-width: 600px) {
  .rs-video { gap: 1.5rem; width: calc(100% - 2 * var(--rs-gutter)); margin: 2rem auto; padding: 1.25rem; }   /* centred */
  .rs-video .rs-btn--ghost { width: 100%; }
  .rs-video__play { width: 56px; height: 56px; }
  .rs-video__play > .icon { width: 22px; height: 22px; }
}

/* ---------- 15.3 Video box with step list (box-with-text-and-video.png) ---------- */
.rs-video-box {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 3.5rem);
  max-width: var(--rs-container-wide);
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--rs-line-dark);
  border-radius: var(--rs-radius-2xl);
  background: var(--rs-charcoal-900);
  box-shadow: var(--rs-shadow-video);
}
.rs-video-box__copy { min-width: 0; }
.rs-video-box__copy .rs-eyebrow { margin-bottom: .55rem; letter-spacing: var(--rs-ls-eyebrow); }
.rs-video-box__title { margin: 0 0 .55rem; color: var(--rs-white); }
.rs-video-box__intro { margin: 0 0 .25rem; color: var(--rs-text-on-dark-body); font-size: var(--rs-fs-ui); line-height: 1.55; }
.rs-video-box__intro > p { margin: 0 0 .75em; }
.rs-video-box__intro > :last-child { margin-bottom: 0; }
.rs-video-box .rs-note { margin-top: 1.25rem; }
.rs-video-box__copy > .rs-btn { margin-top: 1.5rem; }
.rs-video-box .rs-video__embed { border: 1px solid var(--rs-line-dark); border-radius: var(--rs-radius-lg); box-shadow: none; }
@media (max-width: 1024px) { .rs-video-box { grid-template-columns: minmax(0, 1fr); max-width: var(--rs-container-narrow); } }
@media (max-width: 600px) { .rs-video-box { padding: 1.25rem; } .rs-video-box__copy > .rs-btn { width: 100%; } }

/* ---------- 15.4 CSS-only visuals for the 16:9 slot (no photos) ------------------ */
.rs-media-visual { position: absolute; inset: 0; overflow: hidden; }
/* pattern: dot grid fading out from the centre + radar rings (spec/02 25.10.: no world map) */
.rs-media-visual--pattern {
  background:
    radial-gradient(ellipse at 50% 120%, var(--rs-primary-a14), transparent 60%),
    linear-gradient(160deg, var(--rs-charcoal-900), var(--rs-charcoal-950));
}
.rs-media-visual--pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, var(--rs-primary) 1.1px, transparent 1.7px) 50% 50% / 16px 16px;
  opacity: .24;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0, rgb(0 0 0 / .5) 36%, transparent 72%);
          mask-image: radial-gradient(circle at 50% 50%, #000 0, rgb(0 0 0 / .5) 36%, transparent 72%);
}
.rs-media-visual--pattern::after {      /* two concentric rings + accent dot */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, var(--rs-primary) 0 5px, var(--rs-primary-a35) 6px 8px, transparent 9px),
    radial-gradient(circle at 50% 50%, transparent 0 13%, var(--rs-primary-a55) calc(13% + 1px) calc(13% + 2px), transparent calc(13% + 3px)),
    radial-gradient(circle at 50% 50%, transparent 0 25%, var(--rs-primary-a24) calc(25% + 1px) calc(25% + 2px), transparent calc(25% + 3px));
}
/* terminal: dark window with three dots, monospace, primary prompt line */
.rs-media-visual--terminal { display: grid; place-items: center; padding: clamp(.75rem, 3vw, 1.5rem); background: var(--rs-charcoal-900); }
.rs-terminal {
  width: 100%;
  max-height: 100%;
  overflow: hidden;
  border: 1px solid var(--rs-line-dark);
  border-radius: var(--rs-radius-md);
  background: var(--rs-charcoal-950);
  box-shadow: var(--rs-shadow-embed);
}
.rs-terminal__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: .55rem .8rem;
  border-bottom: 1px solid var(--rs-line-dark);
  background: var(--rs-charcoal-700);
}
.rs-terminal__bar > span:not(.rs-terminal__title) { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--rs-charcoal-400); }
.rs-terminal__bar > span:first-child { background: var(--rs-primary); }
.rs-terminal__title {
  margin-left: .5rem;
  overflow: hidden;
  color: var(--rs-text-on-dark-muted);
  font-family: var(--rs-font-mono);
  font-size: var(--rs-fs-label);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rs-terminal__body {
  margin: 0;
  padding: .9rem 1rem 1.1rem;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  color: var(--rs-text-on-dark-soft);
  font-family: var(--rs-font-mono);
  font-size: clamp(.75rem, .65rem + .4vw, .875rem);   /* 12 → 14 px */
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.rs-terminal__body::first-line { color: var(--rs-primary); }
.rs-terminal__body code { padding: 0; background: none; color: inherit; font-size: inherit; }
/* report: centred wordmark */
.rs-media-visual--report {
  display: grid;
  place-items: center;
  padding: 1rem;
  background:
    radial-gradient(circle at 50% 50%, var(--rs-primary-a10), transparent 65%),
    var(--rs-charcoal-900);
}

/* ===== 16 Disclosure ===== */
/* Process tabs (05 § 6.7 + 06 tabs contract), FAQ (01 § 9.14 + 05 § 12.1
   bridge + B-13: one implementation), contents box (04 § 5.2 + B-20). */

/* ---------- 16.2 FAQ section + accordion ----------------------------------------- */
.rs-faq-section__grid { display: flex; align-items: center; column-gap: 5rem; row-gap: 3rem; }
.rs-faq-section__intro,
.rs-faq-section__grid > .rs-faq { flex: 1 1 50%; min-width: 0; }
.rs-faq-section__intro > :last-child { margin-bottom: 0; }
.rs-faq-section__intro .rs-lead { margin: 0 0 1.25rem; }
.rs-faq-section__more { margin: 0; color: var(--rs-ctx-text-soft); font-size: var(--rs-fs-ui); line-height: 1.6; }
.rs-faq-section__more a:not(.rs-btn) { color: var(--rs-ctx-link); font-weight: var(--rs-fw-bold); white-space: nowrap; }
@media (max-width: 1024px) { .rs-faq-section__grid { flex-direction: column; align-items: stretch; } }

.rs-faq { margin: 0; padding: 2em 0; }
.rs-faq__item {
  margin: 0 0 15px;
  border: 2px solid var(--rs-secondary-700);
  border-radius: var(--rs-radius-md);
  background: var(--rs-white);
}
.rs-faq__item:last-child { margin-bottom: 0; }
.rs-faq__q {
  position: relative;
  display: block;
  padding: 20px 65px 20px 20px;
  border-radius: 6px;                    /* 8 px outer radius − 2 px border */
  color: var(--rs-text);
  font-size: var(--rs-fs-card-title);
  font-weight: var(--rs-fw-bold);
  line-height: 1.6;
  list-style: none;
  cursor: pointer;
  transition: background-color var(--rs-dur-base) var(--rs-ease);
}
.rs-faq__q::-webkit-details-marker { display: none; }
.rs-faq__q::marker { content: ""; }
.rs-faq__q::after {                      /* one plus/minus indicator (gradient bars) */
  content: "";
  position: absolute;
  top: 50%;
  right: 25px;
  width: 25px;
  height: 25px;
  border: 2px solid currentColor;
  border-radius: 50%;
  color: var(--rs-secondary-700);
  background:
    linear-gradient(currentColor, currentColor) center / 11px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 11px no-repeat;
  transform: translateY(-50%);
}
.rs-faq__item[open]:not([data-closing]) > .rs-faq__q::after { background: linear-gradient(currentColor, currentColor) center / 11px 2px no-repeat; }
.rs-faq__q:hover { background: var(--rs-grey-200); }
.rs-faq__item[open] > .rs-faq__q { background: var(--rs-grey-200); border-radius: 6px 6px 0 0; }
.rs-faq__q:focus-visible { outline: 3px solid var(--rs-focus); outline-offset: 2px; }
.rs-faq__a { margin: 0; padding: 0; }   /* animated element: no padding/margin (05 § 12.1) */
.rs-faq__a-inner { padding: 20px; color: var(--rs-text-soft); line-height: var(--rs-lh-copy); }
.rs-faq__a-inner > :last-child { margin-bottom: 0; }
.rs-faq__a-inner :is(ul, ol) { margin-left: 1.5em; }
[data-accordion] { --accordion-duration: var(--rs-dur-accordion); --accordion-easing: ease; }
[data-accordion].rs-faq { --accordion-duration: var(--rs-dur-faq); --accordion-easing: var(--rs-ease-swing); }   /* jQuery 400 ms swing */
@media (max-width: 767px) {
  .rs-faq__q { padding: 18px 58px 18px 18px; font-size: var(--rs-fs-lead); }
  .rs-faq__q::after { right: 18px; }
  .rs-faq__a-inner { padding: 18px; }
}

/* ---------- 16.3 Contents box (sub-page with index.png; one per page) -------------- */
.rs-toc {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 280px;
  margin: 32px auto;
  padding: 16px 18px;                    /* the 10 px band sits inside the padding (B-20) */
  border-left: 4px solid var(--rs-primary);
  border-bottom: 3px solid var(--rs-secondary);
  border-radius: var(--rs-radius-sm);
  background: var(--rs-charcoal);
  color: var(--rs-white);
}
.rs-toc__notch {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  overflow: hidden;
  line-height: 0;
  pointer-events: none;
  color: var(--rs-secondary);
  transform: scaleY(-1);
}
.rs-toc__notch svg {
  display: block;
  position: relative;
  left: 50%;
  width: calc(100% + 1.3px);
  min-width: 100%;
  max-width: none;
  height: 10px;
  transform: translateX(-50%);
  fill: currentColor;
}
.rs-toc__title { position: relative; margin: 0 0 .5rem; color: var(--rs-white); font-size: var(--rs-fs-card-title); font-weight: var(--rs-fw-regular); line-height: 1.6; }
.rs-toc__toggle { display: none; }
.rs-toc__list { margin: 0; padding: 0; list-style: none; }
.rs-toc__list li { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--rs-white-a08); }
.rs-toc__list li:last-child { border-bottom: 0; }
.rs-toc__list a {
  display: block;
  padding: 2px 0;
  color: var(--rs-text-on-dark-strong);
  font-size: var(--rs-fs-small);
  font-weight: var(--rs-fw-regular);
  line-height: 1.4;
  text-decoration: none;
  transition: color var(--rs-dur-base) var(--rs-ease), padding-left var(--rs-dur-base) var(--rs-ease);
}
.rs-toc__list a:hover,
.rs-toc__list a:focus-visible,
.rs-toc__list a[aria-current],
.rs-toc__list a.is-active { padding-left: 6px; color: var(--rs-primary); }
.rs-toc__list a[aria-current],
.rs-toc__list a.is-active { font-weight: var(--rs-fw-bold); }
.rs-toc__list a:focus-visible { outline: 2px solid var(--rs-primary); outline-offset: 2px; }
@media (max-width: 768px) {              /* phones: disclosure instead of hiding (B-20) */
  .rs-toc { max-width: none; margin: 0; }
  .rs-toc.is-enhanced .rs-toc__title { display: none; }
  .rs-toc.is-enhanced .rs-toc__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--rs-white);
    font-family: var(--rs-font);
    font-size: var(--rs-fs-card-title);
    line-height: 1.6;
    text-align: left;
    cursor: pointer;
  }
  .rs-toc__toggle .icon { width: 1rem; height: 1rem; color: var(--rs-primary); transition: transform var(--rs-dur-base) var(--rs-ease); }
  .rs-toc.is-open .rs-toc__toggle .icon { transform: rotate(180deg); }
  .rs-toc.is-enhanced:not(.is-open) .rs-toc__list { display: none; }
  .rs-toc.is-enhanced.is-open .rs-toc__list { margin-top: .5rem; }
}

/* ===== 17 Forms ===== */
/* One form system: 01 § 9.3 classes + 05 § 11 states + 08 B-14 (light card,
   field helpers, spam-protection consent) + contract § 7.3 markup.
   Colours come from the context tokens --rs-input-*, --rs-label-c, --rs-error-c,
   --rs-success-c (dark card by default, light inside .rs-form-card--light). */

/* ---------- 17.1 Form card ------------------------------------------------------- */
.rs-form-card {
  position: relative;
  z-index: 2;
  min-width: 0;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--rs-line-dark);
  border-top: 2px solid var(--rs-primary);
  border-radius: var(--rs-radius-lg);
  background: var(--rs-charcoal-700);
  box-shadow: var(--rs-shadow-panel);
  color: var(--rs-text-on-dark-body);
}
.rs-form-card > .rs-eyebrow { margin-bottom: .55rem; }
.rs-form-card__title {
  margin: 0 0 .35rem;
  color: var(--rs-ctx-heading);
  font-size: var(--rs-fs-h2);
  font-weight: var(--rs-fw-black);
  line-height: var(--rs-lh-snug);
  scroll-margin-top: calc(var(--rs-scroll-offset) + 2rem);   /* the anchor is the heading – keep the card frame visible */
  text-wrap: balance;
}
.rs-form-card__intro { margin: 0 0 1.25rem; color: var(--rs-ctx-text-muted); font-size: var(--rs-fs-small); line-height: 1.5; }
.rs-form-card__intro a:not(.rs-btn) { color: var(--rs-ctx-link); font-weight: var(--rs-fw-bold); }
.rs-form-card--light {                  /* B-14 – colours are set in section 05 */
  border: 1px solid var(--rs-grey-400);
  border-top: 3px solid var(--rs-primary);
  background: var(--rs-white);
  box-shadow: var(--rs-shadow-card-soft);
}
@media (max-width: 600px) { .rs-form-card { padding: 1.25rem; } }

/* ---------- 17.2 Grid, fields, labels ---------------------------------------------- */
.rs-form { position: relative; }
.rs-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .75rem; }
.rs-form__field { display: grid; align-content: start; gap: .35rem; min-width: 0; margin: 0 0 .75rem; }
.rs-form__field--full,
.rs-form__group,
.rs-form__checks,
.rs-form__consent,
.rs-form__noscript,
.rs-form__privacy,
.rs-form__recaptcha,
.rs-form__actions,
.rs-form__status { grid-column: 1 / -1; }
@media (max-width: 600px) { .rs-form__grid { grid-template-columns: minmax(0, 1fr); } }

.rs-form__label {
  display: block;
  margin: 0;
  padding: 0;
  color: var(--rs-label-c);
  font-size: var(--rs-fs-label);         /* 12 px / 700 (visible labels instead of placeholders) */
  font-weight: var(--rs-fw-bold);
  letter-spacing: .01em;
  line-height: 1.35;
}
.rs-form__required-note { margin: 0 0 1.25rem; color: var(--rs-ctx-text-muted); font-size: var(--rs-fs-meta); line-height: 1.5; }
.rs-form__help { margin: .1rem 0 0; color: var(--rs-ctx-text-muted); font-size: var(--rs-fs-meta); line-height: 1.5; }
.rs-form__error { margin: .1rem 0 0; color: var(--rs-error-c); font-size: var(--rs-fs-label); font-weight: var(--rs-fw-bold); line-height: 1.45; }
.rs-form__field.is-invalid > .rs-form__label,
.rs-form__group.is-invalid > .rs-form__label,
[data-field].is-invalid > .rs-form__label { color: var(--rs-error-c); }

/* ---------- 17.3 Controls ---------------------------------------------------------- */
.rs-form__control {
  display: block;
  width: 100%;
  min-height: 2.75rem;                   /* 44 px */
  margin: 0;
  padding: .7rem .8rem;
  appearance: none;
  border: 1px solid var(--rs-input-border);
  border-radius: var(--rs-radius-sm);
  background-color: var(--rs-input-bg);
  box-shadow: none;
  color: var(--rs-input-fg);
  font-family: var(--rs-font);
  font-size: 1rem;                       /* 16 px on touch devices: prevents iOS zoom */
  line-height: 1.4;
  transition: background-color var(--rs-dur-form) var(--rs-ease), border-color var(--rs-dur-form) var(--rs-ease), box-shadow var(--rs-dur-form) var(--rs-ease);
}
@media (min-width: 769px) and (hover: hover) { .rs-form__control { font-size: var(--rs-fs-small); } }
.rs-form__control::placeholder { color: var(--rs-input-placeholder); opacity: 1; }
.rs-form__control:hover { border-color: var(--rs-ctx-accent); }
.rs-form__control:focus {
  outline: none;
  border-color: var(--rs-primary);
  background-color: var(--rs-input-bg-focus);
  box-shadow: var(--rs-ring-input);
}
.rs-form__control:focus-visible { outline: 2px solid var(--rs-focus); outline-offset: 2px; }
.rs-form__control[aria-invalid="true"],
.was-validated .rs-form__control:invalid { border-color: var(--rs-error-c); }
.rs-form__control:disabled { opacity: .6; cursor: not-allowed; }
textarea.rs-form__control { min-height: 6.5rem; resize: vertical; }
select.rs-form__control {
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA1A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 1rem;
  cursor: pointer;
}
.rs-form-card--light select.rs-form__control,
.rs-on-light select.rs-form__control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646B71' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
select.rs-form__control option { background: var(--rs-white); color: var(--rs-text); }
input[type="number"].rs-form__control { -moz-appearance: textfield; }
input[type="date"].rs-form__control { min-height: 2.75rem; }
input[type="search"].rs-form__control::-webkit-search-cancel-button { cursor: pointer; }
.rs-form__control--mono { font-family: var(--rs-font-mono); letter-spacing: .02em; }

/* input with unit suffix */
.rs-input-group { display: flex; align-items: center; gap: .6rem; }
.rs-input-group > .rs-form__control { flex: 0 1 8rem; min-width: 0; }
.rs-input-group__suffix { color: var(--rs-text-muted); font-size: var(--rs-fs-ui); line-height: 1.4; }

/* ---------- 17.4 Checkboxes, radios, groups -------------------------------------- */
.rs-form__checks { margin: .25rem 0 .35rem; }
.rs-form__check {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin: 0 0 .45rem;
  color: var(--rs-label-c);
  font-size: var(--rs-fs-meta);
  line-height: 1.45;
  cursor: pointer;
}
.rs-form__check input[type="checkbox"],
.rs-form__check input[type="radio"] { flex: 0 0 auto; width: 1.0625rem; height: 1.0625rem; margin: .08rem 0 0; accent-color: var(--rs-primary); cursor: pointer; }
.rs-form__check input:focus-visible { outline: 2px solid var(--rs-focus); outline-offset: 2px; }
.rs-form__check a:not(.rs-btn) { color: var(--rs-ctx-link); text-decoration: underline; text-underline-offset: .15em; }
.rs-form__checks > .rs-form__error { margin-left: 1.6rem; }

.rs-form__group { min-width: 0; margin: 0 0 .75rem; padding: 0; border: 0; }   /* fieldset reset */
.rs-form__group > legend.rs-form__label { float: left; width: 100%; margin: 0 0 .5rem; }  /* float: legend behaves like a label */
.rs-form__group > legend + * { clear: both; }
.rs-form__group > .rs-form__error { clear: both; }

.rs-fieldset { min-width: 0; margin: 0 0 1.75rem; padding: 0; border: 0; }
.rs-fieldset__legend {
  display: block;
  float: left;
  width: 100%;
  margin: 0 0 .5rem;
  padding: 0;
  color: var(--rs-ctx-heading);
  font-size: var(--rs-fs-card-title);
  font-weight: var(--rs-fw-bold);
  line-height: 1.3;
}
.rs-fieldset__legend + * { clear: both; }
.rs-fieldset__hint { margin: 0 0 1rem; color: var(--rs-ctx-text-muted); font-size: var(--rs-fs-small); line-height: 1.5; }

.rs-choice-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem; margin: 0; padding: 0; list-style: none; }
.rs-choice-list--inline { display: flex; flex-wrap: wrap; gap: .55rem 1.5rem; }
.rs-choice {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  min-width: 0;
  color: var(--rs-label-c);
  font-size: var(--rs-fs-ui);
  line-height: 1.45;
  overflow-wrap: anywhere;                 /* long option texts („Management/Schwachstellenmanagement“) never widen the form at 320 px */
  hyphens: auto;
  cursor: pointer;
}
.rs-choice input { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; margin: .12rem 0 0; accent-color: var(--rs-primary); cursor: pointer; }
.rs-choice input:focus-visible { outline: 2px solid var(--rs-focus); outline-offset: 2px; }
.rs-form-card .rs-choice-list--inline .rs-choice { font-size: var(--rs-fs-small); }

/* ---------- 17.5 Notes: privacy, reCAPTCHA, consent, noscript, after ----------------- */
.rs-form__privacy { margin: .25rem 0 0; color: var(--rs-ctx-text-muted); font-size: var(--rs-fs-label); line-height: 1.5; }
.rs-form__privacy a:not(.rs-btn),
.rs-form__recaptcha a:not(.rs-btn) { color: var(--rs-ctx-link); text-decoration: underline; text-underline-offset: .15em; }
.rs-form__recaptcha { margin: .5rem 0 0; color: var(--rs-ctx-text-muted); font-size: var(--rs-fs-label); line-height: 1.5; }
.grecaptcha-badge { visibility: hidden !important; }   /* allowed because .rs-form__recaptcha shows the notice (spec/02) */

.rs-form__consent {                       /* just-in-time spam-protection consent (B-14) */
  display: grid;
  gap: .65rem;
  margin: .25rem 0 .75rem;
  padding: .9rem 1rem;
  border: 1px solid var(--rs-primary-a35);
  border-radius: var(--rs-radius-7);
  background: var(--rs-primary-a08);
  color: var(--rs-ctx-text);
  font-size: var(--rs-fs-meta);
  line-height: 1.55;
}
html[data-consent-recaptcha="granted"] .rs-form__consent { display: none; }
.rs-form__consent p { margin: 0; }
.rs-form__consent strong { color: var(--rs-ctx-heading); }
.rs-form__consent a:not(.rs-btn) { color: var(--rs-ctx-link); text-decoration: underline; text-underline-offset: .15em; }
.rs-form__consent .rs-btn { justify-self: start; }
.rs-form__consent-title { font-size: var(--rs-fs-ui); }
.rs-form__noscript {
  margin: .25rem 0 .75rem;
  padding: .9rem 1rem;
  border: 1px solid var(--rs-ctx-border);
  border-left: 4px solid var(--rs-warning-on-dark);
  border-radius: var(--rs-radius-7);
  color: var(--rs-ctx-text);
  font-size: var(--rs-fs-meta);
  line-height: 1.55;
}
.rs-form-card--light .rs-form__noscript,
.rs-on-light .rs-form__noscript { border-left-color: var(--rs-warning); }
.rs-form__noscript a:not(.rs-btn) { color: var(--rs-ctx-link); text-decoration: underline; }
.rs-form__after { margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--rs-ctx-rule); color: var(--rs-ctx-text-soft); font-size: var(--rs-fs-small); line-height: 1.55; }
.rs-form__after a:not(.rs-btn) { color: var(--rs-ctx-link); font-weight: var(--rs-fw-bold); }

/* honeypot (off-screen, not display:none so bots still fill it) */
.rs-form__hp,
[data-honeypot] {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- 17.6 Actions, spinner, status -------------------------------------------- */
.rs-form__actions { display: flex; flex-direction: column; align-items: stretch; }
.rs-form__actions .rs-spinner { align-self: center; }
.rs-spinner {                            /* CF7 parity: 24 px disc, 6 px dot, 1000 ms (C-65) */
  position: relative;
  display: inline-block;
  flex: none;
  width: 24px;
  height: 24px;
  margin: .75rem auto 0;
  border-radius: 50%;
  background: rgb(35 39 49 / .75);       /* B2: ProNet-Schiefer */
  vertical-align: middle;
  visibility: hidden;
}
.rs-spinner::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FBFBFC;
  transform-origin: 8px 8px;
  animation: rs-spin 1000ms linear infinite;
}
.rs-on-dark .rs-spinner,
.rs-form-card:not(.rs-form-card--light) .rs-spinner { background: var(--rs-primary); }
.rs-on-dark .rs-spinner::before,
.rs-form-card:not(.rs-form-card--light) .rs-spinner::before { background: var(--rs-on-primary); }
[data-state="submitting"] .rs-spinner,
[aria-busy="true"] .rs-spinner { visibility: visible; }
.rs-form[data-state="submitting"] [type="submit"],
.rs-form[aria-busy="true"] [type="submit"] { cursor: progress; opacity: .8; transform: none; }

.rs-form__status {
  margin: 1rem 0 0;
  padding: .75rem .9rem;
  border: 1px solid var(--rs-primary);
  border-left-width: 4px;
  border-radius: var(--rs-radius-sm);
  color: var(--rs-ctx-text);
  font-size: var(--rs-fs-meta);
  line-height: 1.55;
}
.rs-form__status:empty { display: none; }
.rs-form__status:focus { outline: 2px solid var(--rs-focus); outline-offset: 2px; }
.rs-form__status[data-tone="submitting"] { border-color: var(--rs-ctx-border); }
.rs-form__status[data-tone="success"] { border-color: var(--rs-success-c); }
.rs-form__status[data-tone="invalid"],
.rs-form__status[data-tone="consent"],
.rs-form__status[data-tone="error"] { border-color: var(--rs-error-c); }
.rs-form__status-text { margin: 0; }
.rs-form__reference { margin: .5rem 0 0; }
.rs-form__reference-code {
  font-family: var(--rs-font-mono);
  font-size: 1.05em;
  font-weight: var(--rs-fw-bold);
  letter-spacing: .04em;
  color: var(--rs-ctx-heading);
  white-space: nowrap;
}
.rs-form[data-state="success"] .rs-form__status { font-size: var(--rs-fs-ui); }
/* success replaces the form (05 § 11.3): hide everything but the status + the required note */
.rs-form[data-success="replace"][data-state="success"] .rs-form__grid > :not(.rs-form__status),
.rs-form[data-success="replace"][data-state="success"] > .rs-form__required-note,
.rs-form[data-success="replace"][data-state="success"] > .rs-form__after { display: none; }
.rs-form[data-success="replace"][data-state="success"] .rs-form__status { margin-top: 0; }

/* ---------- 17.7 Error summary (no-JS error page) ---------------------------------------- */
.rs-error-summary {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  border: 2px solid var(--rs-error-c);
  border-radius: var(--rs-radius-md);
  background: rgb(var(--rs-danger-rgb) / .05);
  color: var(--rs-ctx-text);
}
.rs-error-summary:focus { outline: none; }
.rs-error-summary:focus-visible { outline: 3px solid var(--rs-focus); outline-offset: 3px; }
.rs-error-summary__title { margin: 0 0 .5rem; color: var(--rs-error-c); font-size: 1rem; font-weight: var(--rs-fw-black); line-height: 1.4; }
.rs-error-summary__list { display: grid; gap: .35rem; margin: 0; padding-left: 1.2rem; }
.rs-error-summary__list a { color: var(--rs-error-c); font-weight: var(--rs-fw-bold); text-decoration: underline; text-underline-offset: .2em; }

/* ===== 18 Wizard & tools ===== */
/* Entfällt bei ProNet (keine Assistenten- und Generator-Werkzeuge der Vorlage; Auftrag B1a).
   Abschnittsnummer bleibt für die Reihenfolge des Komponentenvertrags (§ 9.2) erhalten. */

/* ===== 19 Overlays ===== */
/* Consent banner + switch (08 B-15), toasts (B-17), tooltip (06 block 16 →
   .rs-tip, C-80), back to top (06 § 15), language hint (contract § 4.5a). */

/* ---------- 19.1 Consent banner (non-blocking card, bottom left) ------------------ */
.rs-consent,
.consent:not(.rs-consent) {                 /* .consent = spec/02 name of the same banner */
  position: fixed;
  left: 1.5rem;
  bottom: 1.5rem;
  z-index: var(--rs-z-consent);
  width: min(30rem, calc(100vw - 3rem));
  max-height: calc(100vh - 3rem);
  max-height: calc(100dvh - 3rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.5rem;
  border: 1px solid var(--rs-line-dark);
  border-top: 3px solid var(--rs-primary);
  border-radius: var(--rs-radius-lg);
  background: var(--rs-charcoal-700);
  box-shadow: var(--rs-shadow-panel);
  color: var(--rs-text-on-dark-body);
}
.rs-consent:not([hidden]) { animation: rs-fade-in-up var(--rs-dur-overlay) var(--rs-ease-in-out) both; }
.rs-consent:focus { outline: none; }   /* programmatic focus on first show: the container is not operable (no ring) */
.rs-consent__title { margin: 0 0 .6rem; color: var(--rs-white); font-size: var(--rs-fs-lg); font-weight: var(--rs-fw-black); line-height: 1.3; }
.rs-consent__text { margin: 0 0 1.25rem; font-size: var(--rs-fs-small); line-height: 1.6; }
.rs-consent__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.rs-consent__actions .rs-btn { width: 100%; padding-inline: 1rem; }   /* identical buttons = equal weight */
.rs-consent__links { margin: 1rem 0 0; color: var(--rs-text-on-dark-subtle); font-size: var(--rs-fs-meta); line-height: 1.6; }
.rs-consent__links a:not(.rs-btn),
.rs-consent__link { color: var(--rs-primary); text-decoration: underline; text-underline-offset: .2em; }
.rs-consent__link { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.rs-consent__links a:not(.rs-btn):hover,
.rs-consent__link:hover { color: var(--rs-primary-200); }
.rs-consent__links a:not(.rs-btn):focus-visible,
.rs-consent__link:focus-visible { outline: 2px solid var(--rs-primary); outline-offset: 3px; border-radius: 2px; }
.rs-consent__group { min-width: 0; margin: 0 0 1.25rem; padding: 0; border: 0; }
.rs-consent__category { padding: .9rem 0; border-bottom: 1px solid var(--rs-white-a12); }
.rs-consent__category:first-of-type { padding-top: 0; }
.rs-consent__category-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.rs-consent__category-title { color: var(--rs-white); font-size: var(--rs-fs-ui); font-weight: var(--rs-fw-bold); line-height: 1.4; cursor: pointer; }
.rs-consent__category-text { margin: .35rem 0 0; color: var(--rs-text-on-dark-muted); font-size: var(--rs-fs-meta); line-height: 1.55; }

/* switch: native checkbox with role="switch" (off: 3.54:1 boundary, on: primary, thumb ink 7.42:1) */
.rs-switch {
  -webkit-appearance: none;
          appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 1.5rem;
  margin: 0;
  border: 1px solid var(--rs-charcoal-350);
  border-radius: var(--rs-radius-pill);
  background: var(--rs-charcoal-600);
  cursor: pointer;
  transition: background-color var(--rs-dur-form) var(--rs-ease), border-color var(--rs-dur-form) var(--rs-ease);
}
.rs-switch::before {
  content: "";
  position: absolute;
  top: 50%;
  left: .1875rem;
  width: 1.0625rem;
  height: 1.0625rem;
  border-radius: 50%;
  background: var(--rs-text-on-dark-strong);
  transform: translateY(-50%);
  transition: transform var(--rs-dur-form) var(--rs-ease), background-color var(--rs-dur-form) var(--rs-ease);
}
.rs-switch:checked { border-color: var(--rs-primary); background: var(--rs-primary); }
.rs-switch:checked::before { background: var(--rs-on-primary); transform: translate(1.1875rem, -50%); }
.rs-switch:focus-visible { outline: 3px solid var(--rs-primary); outline-offset: 3px; }
.rs-switch:disabled { cursor: not-allowed; opacity: .6; }
@media (max-width: 600px) {
  .rs-consent { left: 1rem; right: 1rem; bottom: 1rem; width: auto; max-height: calc(100dvh - 2rem); padding: 1.25rem; }
  .rs-consent__actions { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 19.3 Toasts (page level fixed, inside the dialog absolute) --------------- */
.rs-toast-region {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: var(--rs-z-toast);
  display: grid;
  gap: .5rem;
  width: min(28rem, calc(100vw - 2rem));
  transform: translateX(-50%);
  pointer-events: none;
}
dialog .rs-toast-region { position: absolute; bottom: 1rem; }
.rs-toast {
  margin: 0;
  padding: .8rem 1rem;
  border-left: 4px solid var(--rs-primary);
  border-radius: var(--rs-radius-md);
  background: var(--rs-charcoal);
  box-shadow: var(--rs-shadow-panel);
  color: var(--rs-white);
  font-size: var(--rs-fs-small);
  line-height: 1.5;
  pointer-events: auto;
  animation: rs-fade-in-up var(--rs-dur-base) var(--rs-ease) both;
}
.rs-toast--error { border-left-color: var(--rs-danger-on-dark); }

/* ---------- 19.5 Back to top ---------------------------------------------------------- */
.rs-back-to-top {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: var(--rs-z-backtotop);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--rs-white-a15);
  border-radius: var(--rs-radius-xs);
  background: rgb(var(--rs-charcoal-rgb) / .88);   /* white arrow ≥ 10:1 on any section */
  color: var(--rs-white);
  opacity: 0;
  pointer-events: none;
  transform: translateY(1rem);
  visibility: hidden;
  cursor: pointer;
  transition: opacity 300ms ease-in-out, transform 300ms ease-in-out, visibility 0s linear 300ms, background-color var(--rs-dur-instant) ease-in-out, color var(--rs-dur-instant) ease-in-out;
}
.rs-back-to-top .icon { width: 1.25rem; height: 1.25rem; }
.rs-back-to-top[data-visible] {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  visibility: visible;
  transition: opacity 300ms ease-in-out, transform 300ms ease-in-out, visibility 0s, background-color var(--rs-dur-instant) ease-in-out, color var(--rs-dur-instant) ease-in-out;
}
.rs-back-to-top:hover { background: var(--rs-primary); color: var(--rs-on-primary); }
.rs-back-to-top:focus-visible { outline: 3px solid var(--rs-white); outline-offset: 2px; box-shadow: 0 0 0 5px var(--rs-charcoal); }   /* visible on light and dark sections */
@media (max-width: 600px) { .rs-back-to-top { right: 16px; bottom: 16px; } }

/* ===== 20 Footer ===== */
/* 01 § 9.19 (footer.png) + 05 § 10 + 08 B-22 + contract § 4.4: four columns,
   profile row, legal line. B2: Werte der ProNet-Vorschau (_vorschau/design-vorschau.html, Footer):
   Claim mit Punkten in Akzentblau, Standort-Link mit Trennlinie, Rootsektor nur als Listenlink mit Zusatz,
   GitHub-Profil mit Überzeile „Open Source“, keine Partnerlogos/Siegel (00-sitemap § 2.7, Nachtrag F). */
.rs-footer { overflow: hidden; background: var(--rs-charcoal); color: var(--rs-text-on-dark-body); }
.rs-footer__main {
  display: grid;
  grid-template-columns: minmax(15rem, 1.2fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem 2.75rem;
  max-width: calc(var(--rs-container) + 2 * var(--rs-gutter));
  margin: 0 auto;
  padding: 76px var(--rs-gutter) 52px;
}
.rs-footer__col { min-width: 0; }
.rs-footer__title {
  position: relative;
  margin: 0 0 1.1rem;
  padding-bottom: .75rem;
  color: var(--rs-white);
  font-size: var(--rs-fs-body);
  font-weight: var(--rs-fw-bold);
  letter-spacing: .02em;
  line-height: 1.5;
}
.rs-footer__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 2.25rem; height: 3px; background: var(--rs-primary); }
.rs-footer__claim { margin: 0 0 1rem; color: var(--rs-white); font-size: 1rem; font-weight: var(--rs-fw-black); letter-spacing: .02em; line-height: 1.5; }
.rs-footer__text { margin: 0 0 1rem; color: var(--rs-text-on-dark-body); font-style: normal; line-height: 1.75; }
.rs-footer__contact { margin: 0 0 .35rem; }
.rs-footer__contact a {                  /* design preview: tinted underline at rest (supersedes B-22) */
  color: var(--rs-white);
  font-weight: var(--rs-fw-bold);
  text-decoration: underline;
  text-decoration-color: var(--rs-primary-a55);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--rs-dur-card) var(--rs-ease), text-decoration-color var(--rs-dur-card) var(--rs-ease);
}
.rs-footer__contact a:hover,
.rs-footer__contact a:focus-visible { color: var(--rs-primary); text-decoration-color: var(--rs-primary); }
.rs-footer__hours { margin: .65rem 0 0; color: var(--rs-on-dark-4); font-size: var(--rs-fs-small); line-height: 1.6; }
.rs-footer__links { margin: 0; padding: 0; list-style: none; }
.rs-footer__links > li { margin: 0; }
.rs-footer__links--compact { margin-top: .9rem; padding-top: .6rem; border-top: 1px solid var(--rs-white-a11); }
.rs-footer__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: .3rem 0;
  color: var(--rs-text-on-dark-body);
  font-size: 1rem;
  line-height: 1.5;
  text-decoration: none;
  transition: color var(--rs-dur-card) var(--rs-ease), transform var(--rs-dur-card) var(--rs-ease);
}
.rs-footer__link:hover,
.rs-footer__link:focus-visible { color: var(--rs-primary); transform: translateX(4px); }
.rs-footer__link[aria-current="page"] { color: var(--rs-white); }
.rs-footer__link--button {              /* a <button> styled like a footer link ("Cookie-Einstellungen") */
  margin: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
}
.rs-footer__ext { width: 14px; height: 14px; color: var(--rs-primary); stroke-width: 2.25; }
.rs-footer__note { display: block; margin: -.15rem 0 .3rem; color: var(--rs-on-dark-4); font-size: .84375rem; line-height: 1.4; }
.rs-footer :is(a, button):focus-visible { outline: 2px solid var(--rs-primary); outline-offset: 3px; border-radius: 2px; }

/* profile row (GitHub, E9) */
.rs-footer__extra,
.rs-footer__bottom {                     /* the rules span the content width only */
  width: calc(100% - 2 * var(--rs-gutter));
  max-width: var(--rs-container);
  margin: 0 auto;
  border-top: 1px solid var(--rs-white-a11);
}
.rs-footer__extra {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px 48px;
  padding: 30px 0 34px;
}
.rs-footer__label { margin: 0 0 12px; color: var(--rs-on-dark-5); font-size: var(--rs-fs-label); font-weight: var(--rs-fw-bold); letter-spacing: var(--rs-ls-label); line-height: 1.6; text-transform: uppercase; }
.rs-footer__social-list { display: flex; flex-wrap: wrap; gap: .65rem; }
.rs-footer__social {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid rgb(var(--rs-white-rgb) / .16);
  border-radius: var(--rs-radius-md);
  color: var(--rs-white);
  text-decoration: none;
  transition: border-color var(--rs-dur-card) var(--rs-ease), background-color var(--rs-dur-card) var(--rs-ease);
}
.rs-footer__social-icon { width: 26px; height: 26px; color: var(--rs-white); }
.rs-footer__social-text strong { display: block; font-size: var(--rs-fs-ui); font-weight: var(--rs-fw-black); line-height: 1.3; }
.rs-footer__social-text small { display: block; color: var(--rs-on-dark-4); font-size: var(--rs-fs-meta); line-height: 1.4; }
.rs-footer__social:hover,
.rs-footer__social:focus-visible { border-color: rgb(var(--rs-primary-rgb) / .65); background: rgb(var(--rs-white-rgb) / .04); color: var(--rs-white); }

/* === Kundenwunsch 26.10.2026: Siegel aus dem Footer der Altseite – weiße Kacheln (go-digital hat schwarze Schrift
   auf transparentem Grund), gleiche Höhe wie die Profil-Kachel, nicht verlinkt === */
.rs-footer__badges { margin-left: auto; }
.rs-footer__badge-list { display: flex; flex-wrap: wrap; align-items: stretch; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.rs-footer__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 66px;
  padding: 8px 14px;
  border-radius: var(--rs-radius-md);
  background: var(--rs-white);
}
.rs-footer__badge img { display: block; width: auto; max-width: none; }
.rs-footer__badge--quadrat { padding: 6px; }
.rs-footer__badge--quadrat img { height: 54px; }
.rs-footer__badge--breit img { height: 26px; }
.rs-footer__badge--quer img { height: 48px; }
@media (max-width: 767px) { .rs-footer__badges { margin-left: 0; } }

/* bottom line */
.rs-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 24px;
  padding: 20px 0 26px;
}
.rs-footer__legal { margin: 0; color: var(--rs-text-legal); font-size: var(--rs-fs-meta); line-height: 1.65; }   /* 6,5:1 */
.rs-footer__legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1023px) { .rs-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .rs-footer__main { grid-template-columns: minmax(0, 1fr); row-gap: 2.25rem; padding-top: 56px; }
  .rs-footer__extra,
  .rs-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ===== 21 Heroes & section shells ===== */
/* Home hero (particle network, 1:1 design preview – spec/10 item 1),
   split hero (04 § 5.1, 05 § 2.1, B-7, contract § 5.2.3), page hero (05 § 2,
   B-19, contract § 5.2.4) and the generic shells of 08 B-24. All heroes sit
   under the overlaid header: their top padding clears top bar + header row. */

/* ---------- 21.1 Home hero (HE1) – ProNet-Vorschau (D-01 A) ------------------------------- */
/* Background: static CSS (Schiefer + soft blue glow, complete without JS) and on top the
   particle network of the original library particles.js (container #rs-hero-network, init:
   assets/js/network.js, home page only, defer). Layers bottom → top: hero background →
   network (z -1) → slant (0) → content (1) → pause button (2) → overlapping cards (.rs-feature-grid, z 10).
   Geometry (B2): the hero starts below the fixed top bar (≥ 769 px) plus – below 1200 px – the fixed compact
   header row, exactly like the preview where both bars sit in the flow. Identical with and without JS (B1). */
.rs-home-hero {                          /* NO .rs-has-shape (B-8) */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--rs-header-h) + 66px) var(--rs-gutter) 178px;
  background: radial-gradient(ellipse at 50% 35%, rgb(var(--rs-secondary-rgb) / .18), transparent 60%), var(--rs-charcoal);
  color: var(--rs-white);
  text-align: center;
}
main > .rs-home-hero:first-child { margin-top: var(--rs-topbar-h); }   /* ≥ 1200 px: below the 58 px top bar */
.rs-hero__network { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.rs-hero__network canvas { display: block; }
/* Desktop: the transparent header row lies over the hero → fade the network out softly under the navigation */
@media (min-width: 75em) {
  .rs-hero__network {
    -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / .35), #000 calc(var(--rs-header-h) + 100px));
            mask-image: linear-gradient(to bottom, rgb(0 0 0 / .35), #000 calc(var(--rs-header-h) + 100px));
  }
}
/* The mouse reaches the network over the text as well (grab effect) – links/buttons stay usable */
.rs-home-hero__inner { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; pointer-events: none; }
.rs-home-hero__inner a,
.rs-home-hero__inner button { pointer-events: auto; }
.rs-home-hero__title {
  margin: 0 0 18px;
  color: var(--rs-white);
  font-size: clamp(30px, 1.05rem + 2.55vw, 50px);
  font-weight: var(--rs-fw-black);
  letter-spacing: -.012em;
  line-height: 1.12;
  text-wrap: balance;
}
.rs-home-hero__accent { color: var(--rs-primary); }
.nw { white-space: nowrap; }
.rs-home-hero__tagline {                 /* Claim (K2): Wörter Akzentblau, Punkte weiß – 6,96:1 (großer Text) */
  margin: 0 0 28px;
  color: var(--rs-primary);
  font-size: clamp(19px, .82rem + 1.3vw, 30px);
  font-weight: var(--rs-fw-black);
  letter-spacing: 2.5px;
  line-height: 1.25;
}
.rs-home-hero__tagline .claim__dot { color: var(--rs-white); }
.rs-home-hero__lead {
  max-width: 780px;
  margin: 0 auto 34px;
  padding-top: 28px;
  border-top: 1px solid rgb(var(--rs-primary-rgb) / .4);
  color: var(--rs-white);
  font-size: clamp(17px, 1rem + .3vw, 20px);
  line-height: 1.65;
}
.rs-home-hero__lead a { color: inherit; }
.rs-home-hero__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 18px; }
.rs-btn--lg { min-height: 50px; padding: .85rem 1.4rem; font-size: var(--rs-fs-btn); line-height: 1.1; }   /* Vorschau .btn--lg */
.rs-home-hero__cta {                     /* = preview .btn.btn--frame („Leistungen ansehen“) */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  padding: 12px 20px 13px 22px;
  border: 2px solid var(--rs-secondary);
  border-radius: 0;
  background: transparent;
  color: var(--rs-white);
  font: var(--rs-fw-black) 17px/1.1 var(--rs-font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.rs-home-hero__cta .icon { width: 1.05em; height: 1.05em; stroke-width: 2.25; transition: transform .15s ease; }
.rs-home-hero__cta:hover { border-color: var(--rs-primary); color: var(--rs-primary); }
.rs-home-hero__cta:hover .icon,
.rs-home-hero__actions .rs-btn:hover > .icon { transform: translateX(3px); }
.rs-home-hero__cta:focus-visible,
.rs-home-hero__actions .rs-btn:focus-visible { outline: 2px solid var(--rs-white); outline-offset: 3px; }
.rs-home-hero__micro { margin: 16px 0 0; color: var(--rs-on-dark-3); font-size: var(--rs-fs-small); line-height: 1.5; }   /* 10,9:1 */
/* Pause-Schaltfläche der Partikel-Animation (WCAG 2.2.2): unten rechts über der Kartenüberlappung */
.rs-home-hero__motion {
  position: absolute;
  right: max(var(--rs-gutter), calc((100% - var(--rs-container-wide)) / 2));
  bottom: 136px;                         /* über den 112 px Kartenüberlappung */
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgb(var(--rs-white-rgb) / .3);
  border-radius: var(--rs-radius-pill);
  background: rgb(var(--rs-charcoal-rgb) / .6);
  color: var(--rs-white);
  cursor: pointer;
  transition: border-color var(--rs-dur-instant) ease, color var(--rs-dur-instant) ease;
}
.rs-home-hero__motion .icon { width: 16px; height: 16px; stroke-width: 2.25; }
.rs-home-hero__motion-play,
.rs-home-hero__motion.is-paused .rs-home-hero__motion-pause { display: none; }
.rs-home-hero__motion.is-paused .rs-home-hero__motion-play { display: inline-block; }
.rs-home-hero__motion:hover { border-color: var(--rs-primary); color: var(--rs-primary); }
.rs-home-hero__motion:focus-visible { outline: 2px solid var(--rs-white); outline-offset: 3px; }
/* Kundenwunsch 26.10.2026: keine sichtbare Pause-Schaltfläche im Hero. Sie bleibt nur für Tastaturnutzer erreichbar und
   erscheint erst beim Fokus (wie ein Sprunglink) – so bleibt WCAG 2.2.2 erfüllt, Maus- und Touch-Nutzer sehen sie nie. */
.rs-home-hero__motion:not(:focus-visible) {
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}
.rs-home-hero__slant { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 0; line-height: 0; pointer-events: none; }
.rs-home-hero__slant svg { display: block; width: 100%; height: 56px; fill: var(--rs-white); }
@media (max-width: 74.99em) {
  .rs-home-hero { padding-top: 76px; }
  main > .rs-home-hero:first-child { margin-top: calc(var(--rs-topbar-h) + var(--rs-header-h)); }   /* below top bar (≥ 769 px) + fixed 68 px header row */
}
@media (max-width: 767px) {
  .rs-home-hero { padding-bottom: 130px; }
  .rs-home-hero__tagline { letter-spacing: 1px; }
  .rs-home-hero__slant svg { height: 32px; }
  .rs-home-hero__motion { bottom: 98px; }  /* über den 84 px Kartenüberlappung */
}
@media (max-width: 600px) {
  .rs-home-hero__actions > a { width: 100%; }
}

/* overlapping feature cards section (C5, 03 P3) */
.rs-home-cards { padding-block: 0 34px; }

/* ---------- 21.2 Split hero (HE2; default · solo · quote) ----------------------------- */
.rs-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--rs-hero-pt) 1.5rem 6em; /* 13em → 12em (< 1200) → 10em (≤ 768) */
  background: var(--rs-charcoal-900);
  color: var(--rs-white);
}
.rs-hero::after {                        /* dot field top right (about.png) */
  content: "";
  position: absolute;
  top: 0;
  right: -8%;
  z-index: -1;
  width: 55%;
  height: 70%;
  background-image: radial-gradient(var(--rs-primary-a22) 1.3px, transparent 1.3px);
  background-size: 16px 16px;
  opacity: .55;
  pointer-events: none;
}
.rs-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(min(22rem, 100%), .95fr);
  align-items: start;                    /* top-aligned like about.png / page-quote.png – our form card is taller */
  gap: clamp(2.5rem, 5vw, 4rem);
  max-width: var(--rs-container-wide);
  margin: 0 auto;
}
.rs-hero__content { min-width: 0; }
.rs-hero__title { margin: 0; color: var(--rs-white); font-size: var(--rs-fs-h1); line-height: var(--rs-lh-heading); text-wrap: balance; }
.rs-hero__accent { color: var(--rs-primary); }
.rs-hero__tagline {
  margin: .9rem 0 0;
  color: var(--rs-primary);
  font-size: var(--rs-fs-h4);            /* 18 → 22 px */
  font-weight: var(--rs-fw-black);
  letter-spacing: .03em;
  line-height: 1.3;
}
.rs-hero__summary {
  max-width: 34rem;
  margin: 1.5rem 0 1.75rem;
  color: var(--rs-text-on-dark-soft);
  font-size: var(--rs-fs-summary);       /* 17 → 20 px */
  line-height: var(--rs-lh-body);
}
.rs-hero .rs-checklist { margin: 0 0 2rem; }
.rs-hero .rs-include { margin: 0 0 1.75rem; }
.rs-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .875rem; margin: 0; }
.rs-hero .rs-checklist + .rs-stats,
.rs-hero__actions + .rs-stats { margin-top: 2.5rem; }   /* list 2rem + 2.5rem = 72 px (about.png, C-70) */
.rs-hero__content > .rs-stats:last-child { margin-bottom: 0; }
.rs-hero--solo .rs-hero__inner { grid-template-columns: minmax(0, 46rem); }   /* no form card: left column only */
.rs-hero .rs-form-card { justify-self: stretch; }

/* quote hero (page-quote.png) */
.rs-hero--quote { padding-bottom: 7rem; }
.rs-hero--quote::after { content: none; }
.rs-hero--quote .rs-hero__inner { grid-template-columns: minmax(0, 1.08fr) minmax(min(22rem, 100%), .92fr); }
.rs-hero--quote .rs-kicker-row { gap: .75rem; }
.rs-hero--quote .rs-badge { padding: .45rem .75rem; border-color: var(--rs-primary-a45); background: var(--rs-primary-a14); letter-spacing: .08em; }
.rs-hero--quote .rs-hero__summary { max-width: 37rem; font-size: var(--rs-fs-lead); line-height: var(--rs-lh-copy); }
.rs-hero--quote .rs-hero__actions { max-width: 37rem; }
.rs-hero--quote .rs-include { max-width: 37rem; }

@media (max-width: 1024px) {
  .rs-hero__inner,
  .rs-hero--quote .rs-hero__inner { grid-template-columns: minmax(0, 1fr); max-width: var(--rs-container-narrow); }
  .rs-hero__summary { max-width: none; }
  .rs-hero--solo .rs-hero__inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .rs-hero { padding: var(--rs-hero-pt) 1rem 3.5rem; }
  .rs-hero::after { width: 85%; opacity: .35; }
  .rs-hero--quote { padding-bottom: 5.5rem; }
  .rs-hero__summary,
  .rs-hero--quote .rs-hero__summary { font-size: 1rem; }
  .rs-hero__actions .rs-btn { width: 100%; }
}

/* ---------- 21.3 Page hero (HE3; center · boxed · headline · icon) ------------------- */
.rs-page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--rs-charcoal);
  color: var(--rs-white);
}
.rs-page-hero::before {                  /* texture layer (modifiers below), CSP-safe */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.rs-page-hero__inner {
  position: relative;
  z-index: 1;
  max-width: calc(var(--rs-container) + 2 * var(--rs-gutter));
  margin: 0 auto;
  padding: calc(var(--rs-topbar-h) + 152px) var(--rs-gutter) 60px;   /* 210 / 60 px (05 H3) */
}
.rs-page-hero__body { width: 75%; margin: 0 auto; padding: 30px 0; }
.rs-page-hero__title { margin: 0; color: var(--rs-white); text-wrap: balance; }
.rs-page-hero__mark { color: var(--rs-primary); }
.rs-page-hero .rs-eyebrow { margin-bottom: .85rem; }
.rs-page-hero .rs-hero-lead { margin: 1.5rem 0 0; }
.rs-page-hero__lead { margin: 0; color: var(--rs-text-on-dark-soft); line-height: var(--rs-lh-body); }
.rs-page-hero__meta { margin: 1rem 0 0; color: var(--rs-text-on-dark-subtle); font-size: var(--rs-fs-meta); line-height: 1.5; }
.rs-page-hero .rs-hero__actions { margin-top: 2rem; }
.rs-page-hero .rs-shape { z-index: 1; }

/* center (careers, thanks, 404, system pages) */
.rs-page-hero--center .rs-page-hero__inner { text-align: center; }
.rs-page-hero--center .rs-hero__actions,
.rs-page-hero--headline .rs-hero__actions,
.rs-page-hero--icon .rs-hero__actions { justify-content: center; }

/* boxed (glossary, glossary term, legal pages) */
.rs-page-hero--boxed { background-image: linear-gradient(118deg, var(--rs-charcoal-900) 0%, var(--rs-charcoal) 60%); }
.rs-page-hero--boxed .rs-page-hero__inner { padding: calc(var(--rs-topbar-h) + 192px) var(--rs-gutter) 120px; }
.rs-page-hero__box {
  width: 50%;
  min-width: min(100%, 30rem);
  padding: 2em 2em 30px;
  border: 1px solid var(--rs-white);
  border-radius: var(--rs-radius-xs);
  background: rgb(var(--rs-charcoal-rgb) / .91);
}
.rs-page-hero--boxed .rs-page-hero__title {
  margin: 0 0 20px;
  font-size: clamp(1.625rem, 1.25rem + 1.1vw, 1.875rem);   /* 26 → 30 px */
  line-height: 1.2;
  text-align: left;
}
.rs-page-hero__box > :last-child { margin-bottom: 0; }

/* headline (Leistungsübersicht): headline + subline + framed button, followed by the dark list */
.rs-page-hero--headline .rs-page-hero__inner { padding: calc(var(--rs-topbar-h) + 102px) var(--rs-gutter) 100px; text-align: center; }
.rs-page-hero--headline .rs-page-hero__body { padding: 30px 0 0; }
.rs-page-hero__subline {                 /* 05 H5 look, tuned for the long real sublines (5–7 lines) */
  max-width: 52rem;
  margin: 20px auto;
  padding: 16px 0 20px;
  border-top: 1px solid var(--rs-primary-a24);
  color: var(--rs-text-on-dark-soft);    /* 10.7:1 */
  font-size: var(--rs-fs-summary);       /* 17 → 20 px */
  font-weight: var(--rs-fw-bold);
  line-height: 1.55;
  text-wrap: pretty;
}
.rs-page-hero--headline .rs-checklist--inline { justify-content: center; margin: 1.75rem 0 0; }

/* icon (Presse): lines icon above the title, 20 px slant */
.rs-page-hero--icon {
  background-image: linear-gradient(120deg, var(--rs-charcoal) 40%, var(--rs-charcoal-950) 100%);
  text-align: center;
}
.rs-page-hero--icon .rs-page-hero__inner { padding: calc(var(--rs-topbar-h) + 110px) var(--rs-gutter) 80px; }
.rs-page-hero--icon .rs-page-hero__title { display: flex; flex-direction: column; align-items: center; margin: 1.5rem 0 10px; color: #F5F8FA; }
.rs-page-hero__lines { display: block; width: 3em; height: 3em; margin: 0 0 .5em; color: var(--rs-primary); }
.rs-page-hero--icon .rs-shape--slant { --rs-shape-h: 20px; }

/* textures – declared after the variants so they win. --tex-map (default of page-hero.php) no
   longer uses the world map (spec/02 25.10.: „Charcoal mit dezentem eigenem Muster/Verlauf“):
   a fine blueprint grid fading out towards the text + a soft Secondary glow top right. */
.rs-page-hero--tex-map::before {
  background:
    linear-gradient(rgb(var(--rs-primary-rgb) / .55) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgb(var(--rs-primary-rgb) / .55) 1px, transparent 1px) 0 0 / 44px 44px;
  opacity: .11;
  -webkit-mask-image: radial-gradient(ellipse 62% 95% at 88% 55%, #000 0, rgb(0 0 0 / .55) 40%, transparent 78%);
          mask-image: radial-gradient(ellipse 62% 95% at 88% 55%, #000 0, rgb(0 0 0 / .55) 40%, transparent 78%);
}
.rs-page-hero--tex-map::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 48% 70% at 92% 8%, rgb(var(--rs-secondary-rgb) / .2), transparent 70%);
  pointer-events: none;
}
.rs-page-hero--tex-dots::before {
  background-image: radial-gradient(var(--rs-primary) 1.3px, transparent 1.3px);
  background-size: 22px 22px;
  opacity: .1;
}
.rs-page-hero--tex-dash::before {
  background: url("../img/dash-cluster.svg") right 8% center / 340px auto no-repeat;
  opacity: .2;
}
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  /* parallax: the texture stays with the viewport while the hero scrolls (clip-path clips the fixed layer) */
  .rs-page-hero--fixed { clip-path: inset(0); }
  .rs-page-hero--fixed::before { position: fixed; inset: 0; }
  .rs-page-hero--fixed.rs-page-hero--tex-dots::before { background-attachment: fixed; }
}
@media (max-width: 1024px) {
  .rs-page-hero__body { width: 88%; }
  .rs-page-hero__box { width: 75%; }
}
@media (max-width: 767px) {
  .rs-page-hero__inner { padding: calc(var(--rs-topbar-h) + 150px) var(--rs-gutter) 50px; }
  .rs-page-hero__body,
  .rs-page-hero__box { width: 100%; min-width: 0; }
  .rs-page-hero--boxed .rs-page-hero__inner { padding: calc(var(--rs-topbar-h) + 165px) var(--rs-gutter) 90px; }
  .rs-page-hero__box { padding: 1.5rem 1.25rem 1.5rem; }
  .rs-page-hero--icon .rs-page-hero__inner { padding: calc(var(--rs-topbar-h) + 125px) var(--rs-gutter) 70px; }
  .rs-page-hero--headline .rs-page-hero__inner { padding: calc(var(--rs-topbar-h) + 140px) var(--rs-gutter) 90px; }
  .rs-page-hero__subline { font-size: var(--rs-fs-lead); }
}
@media (max-width: 600px) { .rs-page-hero .rs-hero__actions .rs-btn { width: 100%; } }

/* ---------- 21.4 Split panels (block split, affects.png; B-24) ---------------------- */
.rs-split-panels { padding-block: clamp(4rem, 7vw, 6.5rem); background: var(--rs-charcoal); }
.rs-split-panels .rs-section-head { max-width: 50rem; margin-bottom: 2.5rem; }
.rs-split-panels .rs-section-head__title { margin-bottom: 1rem; }
.rs-split-panels .rs-section-head__intro { max-width: 48rem; line-height: var(--rs-lh-relaxed); }
.rs-split-panels__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 768px) { .rs-split-panels__grid { grid-template-columns: minmax(0, 1fr); } }
/* light variant (after a dark section): white cards, light context */
.rs-split-panels--light { background: var(--rs-grey); }
.rs-split-panels--light .rs-panel {
  --rs-ctx-text: var(--rs-text-soft);
  --rs-ctx-heading: var(--rs-text);
  --rs-ctx-accent: var(--rs-secondary-ink);
  --rs-ctx-link: var(--rs-secondary-ink);
  --rs-ctx-link-hover: var(--rs-secondary-800);
  --rs-ctx-border: var(--rs-grey-400);
  --rs-ctx-rule: var(--rs-grey-400);
  --rs-focus: var(--rs-secondary-ink);
  border-color: var(--rs-grey-400);
  background: var(--rs-white);
  box-shadow: var(--rs-shadow-card-faint);
  color: var(--rs-text-soft);
}
.rs-split-panels--light .rs-panel--accent { border-top-color: var(--rs-primary); }
.rs-split-panels--light .rs-panel__list { color: var(--rs-text-soft); }
.rs-split-panels--light .rs-panel__list strong { color: var(--rs-text); }
.rs-split-panels--light .rs-review-row { border-top-color: var(--rs-grey-400); }
.rs-split-panels--light .rs-review-row strong { color: var(--rs-secondary-ink); }

/* ---------- 21.5 Accent cards (block cards accent, boxes.png) ------------------------ */
.rs-accent-cards { padding-block: clamp(4rem, 7vw, 6.5rem); background: var(--rs-grey); }
.rs-accent-cards .rs-section-head { max-width: 48rem; margin-bottom: 2.5rem; }
.rs-accent-cards .rs-section-head__title { margin-bottom: 1rem; }
.rs-accent-cards .rs-grid { --rs-gap: 1.25rem; }
.rs-accent-cards__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rs-grey-400);
}
.rs-accent-cards__note { max-width: 48rem; margin: 0; color: var(--rs-text-soft); line-height: var(--rs-lh-copy); }
.rs-accent-cards__note strong { color: var(--rs-text); }
.rs-accent-cards__footer .rs-btn { flex: 0 0 auto; }
@media (max-width: 768px) { .rs-accent-cards__footer { flex-direction: column; align-items: stretch; gap: 1.25rem; } }

/* ---------- 21.6 Process (block process, counts.png) -------------------------------- */
.rs-process-section { padding-block: 5.5rem; background: var(--rs-charcoal-900); }
.rs-process-section .rs-section-head { max-width: 46rem; }
.rs-process-section--light { background: var(--rs-white); }
@media (max-width: 600px) { .rs-process-section { padding-block: 3.5rem; } }

/* ---------- 21.7 Services band (block cards dark, block-services.png) ---------------- */
.rs-services-band { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 7vw, 6rem); }
.rs-services-band__eyebrow { margin-bottom: 1rem; padding-left: calc(1.75rem + .75rem); }   /* aligned with the kicker title */
.rs-services-band .rs-kicker { margin-bottom: 3rem; }
.rs-services-band .rs-kicker > h2 { color: var(--rs-white); font-weight: var(--rs-fw-bold); }
.rs-services-band .rs-kicker > p { grid-column: 2; max-width: 50rem; margin: 0; color: var(--rs-text-on-dark-body); line-height: var(--rs-lh-copy); }
@media (max-width: 768px) { .rs-services-band { padding-block: 3.5rem; } }

/* ---------- 21.8 CTA (section with panel; band variant) ----------------------------- */
.rs-cta-section { padding: 5rem 1.5rem; border-top: 1px solid var(--rs-charcoal-500); background: var(--rs-charcoal); text-align: center; }
.rs-cta-panel {
  max-width: var(--rs-container-cta);
  margin: 0 auto;
  padding: 3.5rem 2rem;
  border: 1px solid var(--rs-line-dark);
  border-top: 3px solid var(--rs-primary);
  border-radius: var(--rs-radius-xl);
  background: var(--rs-charcoal-900);
  box-shadow: var(--rs-shadow-cta);
  color: var(--rs-white);
  text-align: center;
}
.rs-cta-panel__title { margin: 0 0 1rem; color: var(--rs-white); text-wrap: balance; }
.rs-cta-panel__copy { max-width: 38rem; margin: 0 auto 2rem; color: var(--rs-text-on-dark-body); font-size: var(--rs-fs-lead); line-height: var(--rs-lh-copy); }
.rs-cta-panel__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .875rem; }
@media (max-width: 600px) {
  .rs-cta-section { padding: 3.5rem 1rem; }
  .rs-cta-panel { padding: 2.5rem 1.25rem; }
  .rs-cta-panel__copy { font-size: 1rem; }
  .rs-cta-panel__actions .rs-btn { width: 100%; }
}
.rs-cta-band {                           /* industry pages */
  position: relative;
  padding: 2.5rem max(var(--rs-gutter), calc((100% - var(--rs-container-module)) / 2));
  border-top: 1px solid var(--rs-white-a14);
  background: var(--rs-charcoal-900);
  color: var(--rs-white);
}
.rs-cta-band::before {                   /* 120 × 4 px centre accent on the hairline */
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 120px;
  height: 4px;
  background: var(--rs-primary);
  transform: translateX(-50%);
}
.rs-cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; max-width: var(--rs-container-module); margin-inline: auto; }
.rs-cta-band__copy { min-width: 0; max-width: 760px; }
.rs-cta-band__title { margin: 0 0 .65rem; color: var(--rs-white); letter-spacing: -.025em; line-height: 1.1; text-wrap: balance; }
.rs-cta-band__text { margin: 0; color: var(--rs-text-on-dark-body); line-height: 1.6; }
.rs-cta-band__inner > .rs-btn { flex: 0 0 auto; }
.rs-cta-band--tall .rs-cta-band__inner { padding: 2.5rem 1.5rem; }   /* industry pages: padding applied twice on purpose */
@media (max-width: 768px) {
  .rs-cta-band::before { width: 90px; }
  .rs-cta-band__inner { flex-direction: column; align-items: flex-start; }
  .rs-cta-band--tall .rs-cta-band__inner { padding: 1.5rem 0; }
}
@media (max-width: 600px) { .rs-cta-band__inner > .rs-btn { width: 100%; } }

/* ---------- 21.9 Form band (block contact) ------------------------------------------ */
.rs-form-band { position: relative; isolation: isolate; overflow: hidden; padding: 5rem 1.5rem 6rem; background: var(--rs-charcoal); }
.rs-form-band__inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.rs-form-band .rs-form-card { box-shadow: var(--rs-shadow-cta); }
.rs-form-band > .rs-shape { z-index: 2; }
.rs-form-band.rs-has-shape { padding-bottom: calc(6rem + 30px); }   /* room for the 30 px V-cut */
@media (max-width: 600px) {
  .rs-form-band { padding: 3.5rem 1rem 4.5rem; }
  .rs-form-band.rs-has-shape { padding-bottom: calc(4.5rem + 30px); }
}

/* ---------- 21.10 Heroes unter Top-Bar + kompakter Kopfzeile (769–1199 px) ------------------------ */
/* B2: Die Kopfzeile ist mit und ohne JavaScript fest positioniert (Befund B1) – die früheren No-JS-Abstände entfallen.
   Split-Hero: zwischen 769 und 1199 px liegt zusätzlich die Top-Bar (58 px) über dem Hero. */
@media (min-width: 769px) and (max-width: 74.99em) {
  .rs-hero { padding-top: calc(var(--rs-hero-pt) + var(--rs-topbar-h)); }
}

/* ===== 22 Page modules ===== */
/* 04 service modules, 05 hub/industry/special modules, 08 B-18 legal, B-23
   homepage, contract § 5.3–5.7 (definition, vulnerabilities, why cards,
   sector modules, industries, services list, overview intro,
   contact, glossary, term layout, pager, legal). */

/* ---------- 22.0 Section roots (contract hooks; spacing/tone come from .rs-section + .rs-tone-*) */
.rs-definition,
.rs-vulns,
.rs-faq-section,
.rs-term-section,
.rs-challenges,
.rs-benefits { position: relative; }   /* positioning context for shapes and decorations */

/* ---------- 22.1 Definition (block intro toc) -------------------------------------- */
.rs-definition__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;                    /* TOC starts level with the heading, also next to long texts (QA 4.4 #3) */
  column-gap: 5rem;
  row-gap: 3rem;
}
@media (min-width: 1025px) {
  .rs-definition__grid > .rs-toc { position: sticky; top: var(--rs-scroll-offset); margin-top: 0; }
}
.rs-definition__grid--single { grid-template-columns: minmax(0, 1fr); }
.rs-definition__grid--single .rs-definition__copy { max-width: var(--rs-measure); }
.rs-definition__copy { min-width: 0; }
.rs-definition__copy > :last-child,
.rs-definition__text > :last-child { margin-bottom: 0; }
@media (max-width: 1024px) {
  .rs-definition__grid { grid-template-columns: minmax(0, 1fr); }
  .rs-definition__grid > .rs-toc { justify-self: start; margin-inline: 0; }   /* single column: aligned with the copy */
}

/* ---------- 22.2 Vulnerabilities (blocks.png) ---------------------------------------- */
.rs-vulns__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.rs-vulns__intro {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  padding: 1.5rem 1.5rem 3rem;           /* +1.5 rem bottom: the 30 px accent never covers text */
  background: var(--rs-charcoal);
  color: var(--rs-grey-200);
}
.rs-vulns__intro .rs-headline { margin: 0 0 1.5rem; color: var(--rs-grey-200); }
.rs-vulns__intro .rs-heading:last-child .rs-headline { margin-bottom: 0; }
.rs-vulns__intro-text { margin: 0; color: var(--rs-white); font-size: 1rem; line-height: 1.6; }
.rs-vulns__accent {                      /* "peaks" shape, 30 px, primary */
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  overflow: hidden;
  line-height: 0;
  pointer-events: none;
  color: var(--rs-primary);
}
.rs-vulns__accent svg {
  display: block;
  position: relative;
  left: 50%;
  width: calc(100% + 1.3px);
  min-width: 100%;
  max-width: none;
  height: 30px;
  transform: translateX(-50%);
  fill: currentColor;
}
.rs-vulns__cta { min-width: 0; padding: 1.5rem; background: var(--rs-charcoal); color: var(--rs-grey-200); }
.rs-vulns__cta--span-1 { grid-column: span 1; }
.rs-vulns__cta--span-2 { grid-column: span 2; }
.rs-vulns__cta--span-3 { grid-column: span 3; }
.rs-vulns__cta-title { margin: 0 0 1.5rem; color: var(--rs-primary); font-size: var(--rs-fs-h5); font-weight: var(--rs-fw-black); line-height: 1.6; }
.rs-vulns__cta-row { display: flex; align-items: center; column-gap: 4rem; row-gap: 1.5rem; }
.rs-vulns__cta-row p { margin: 0; color: var(--rs-grey-200); font-size: var(--rs-fs-lead); line-height: 1.6; }
.rs-vulns__cta-row .rs-btn { flex: 0 0 auto; }
.rs-vulns__cta--span-1 .rs-vulns__cta-row { flex-direction: column; align-items: flex-start; }
@media (max-width: 1024px) {                 /* tablet: 2 columns (04 proposal), intro + CTA full width */
  .rs-vulns__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-vulns__intro,
  .rs-vulns__cta--span-1,
  .rs-vulns__cta--span-2,
  .rs-vulns__cta--span-3 { grid-column: 1 / -1; }
}
@media (max-width: 767px) { .rs-vulns__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .rs-vulns__intro { padding: 1.25rem 1.25rem 2.75rem; }
  .rs-vulns__cta { padding: 1.25rem; }
  .rs-vulns__cta-row { flex-direction: column; align-items: flex-start; row-gap: 2rem; }
}

/* ---------- 22.3 Icon cards section ---------------------------------------------------- */
.rs-icon-cards-section .rs-section-head { margin-bottom: 2.5rem; }

/* ---------- 22.4 Why cards (hubs: dark cards on white; 05 § 6.1) ---------------------- */
.rs-why-cards { padding: clamp(3.5rem, 7vw, 6rem) var(--rs-gutter) clamp(4.5rem, 8vw, 6.5rem); color: var(--rs-text); }
.rs-why-cards__inner { max-width: var(--rs-container-wide); margin: 0 auto; }
.rs-why-cards__head { max-width: 45rem; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); text-align: center; }
.rs-why-cards__head .rs-eyebrow { margin-bottom: 1rem; }
.rs-why-cards__title { margin: 0 0 1rem; text-wrap: balance; }
.rs-why-cards__intro { margin: 0; color: var(--rs-text-muted); font-size: var(--rs-fs-lead); line-height: var(--rs-lh-copy); text-wrap: balance; }
.rs-why-cards__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.rs-why-cards__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 74.99em) { .rs-why-cards__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .rs-why-cards__grid { gap: 1.25rem; } }
@media (max-width: 860px) {
  .rs-why-cards__grid:not(.rs-why-cards__grid--4) { grid-template-columns: minmax(0, 1fr); max-width: 45rem; margin-inline: auto; }
}
@media (max-width: 600px) {
  .rs-why-cards__grid--4 { grid-template-columns: minmax(0, 1fr); }
  .rs-why-cards__head { margin-bottom: 2rem; }
  .rs-why-cards__intro { font-size: 1rem; }
}

/* ---------- 22.7 Services list (dark, lines divider; page-assessments.png) ------------ */
.rs-related { position: relative; background: var(--rs-charcoal); color: var(--rs-white); text-align: center; }
.rs-related > .rs-shape { z-index: 2; }  /* the wedge paints over the lines (section-devider.png) */
.rs-related__inner {
  position: relative;
  z-index: 1;
  max-width: calc(var(--rs-container) + 2 * var(--rs-gutter));
  margin: 0 auto;
  padding: 30px var(--rs-gutter) 120px;
}
.rs-related__title { display: flex; flex-direction: column; align-items: center; margin: -110px 0 60px; color: var(--rs-white); text-wrap: balance; }
.rs-related__lines {                     /* three thin lines straddling the top edge (−80 / +80 px) */
  display: block;
  width: 24px;
  height: 160px;
  margin: 0 0 1.4em;
  color: var(--rs-primary);
  vertical-align: top;
}
.rs-related__intro {
  max-width: 46rem;
  margin: -1.5rem auto 3.5rem;
  color: var(--rs-text-on-dark-body);
  font-size: var(--rs-fs-lead);
  line-height: var(--rs-lh-copy);
}
.rs-related__group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .85rem;
  margin: 3rem 0 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rs-white-a12);
  color: var(--rs-white);
  font-size: var(--rs-fs-lg);            /* 1.25 rem / 900 */
  font-weight: var(--rs-fw-black);
  line-height: 1.3;
  text-align: left;
}
.rs-related__group a { color: var(--rs-primary); text-decoration: none; }
.rs-related__group a:hover { color: var(--rs-primary-200); text-decoration: underline; text-underline-offset: .2em; }
.rs-related__count { color: var(--rs-text-on-dark-muted); font-size: var(--rs-fs-small); font-weight: var(--rs-fw-bold); }
.rs-related__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 80px;
  row-gap: 80px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.rs-related__card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; margin: 0; }
.rs-related__card-title { display: flex; align-items: center; margin: 0 0 20px; color: var(--rs-white); font-size: var(--rs-fs-h4); font-weight: var(--rs-fw-black); line-height: 1.4; }
.rs-related__icon { flex: 0 0 auto; width: 2.6em; height: 2.6em; margin-right: 1em; color: var(--rs-primary); stroke-width: 1.5; }
.rs-related__text { margin: 0 0 1.5em; color: var(--rs-white); }
.rs-related__card .rs-link-more { margin-top: auto; }
.rs-related--compact .rs-related__icon { width: 2.2em; height: 2.2em; }
.rs-related--lg .rs-related__card-title { font-size: var(--rs-fs-h3); }
.rs-related--continued .rs-related__inner { padding-top: 0; }
.rs-related--continued .rs-related__title { margin-top: 0; }   /* lines stay inside */
@media (max-width: 1024px) { .rs-related__grid { column-gap: 3rem; row-gap: 64px; } }
@media (max-width: 767px) {
  .rs-related__inner { padding: 30px var(--rs-gutter) 80px; }
  .rs-related__grid { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
  .rs-related__title { margin-top: -90px; }
  .rs-related__lines { height: 130px; }
  .rs-related__intro { margin: -1rem auto 2.5rem; font-size: 1rem; }
  .rs-related__icon { width: 2em; height: 2em; margin-right: .75em; }
}

/* ---------- 22.8 Overview intro (block intro without TOC; 05 § 5.1) -------------------- */
.rs-overview-intro { position: relative; overflow: hidden; }
.rs-overview-intro::before {             /* dash cluster deco, 340 px, 20 % */
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/dash-cluster.svg") right bottom / 340px auto no-repeat;
  opacity: .2;
  pointer-events: none;
}
.rs-overview-intro__inner {
  position: relative;
  z-index: 1;
  max-width: calc(var(--rs-container) + 2 * var(--rs-gutter));
  margin: 0 auto;
  padding: 100px var(--rs-gutter) 90px;
}
.rs-overview-intro__copy { max-width: var(--rs-measure); }
.rs-overview-intro__title { margin: 0 0 1.25rem; text-wrap: balance; }
.rs-overview-intro__copy .rs-prose { color: var(--rs-text-soft); }
@media (max-width: 767px) {
  .rs-overview-intro__inner { padding: 64px var(--rs-gutter) 56px; }
  .rs-overview-intro::before { background-size: 220px auto; }
}

/* ---------- 22.9 Prose / include / stats bands ------------------------------------------- */
.rs-prose-section .rs-prose { max-width: none; }
.rs-include-section .rs-include { margin: 0; }
.rs-stats-band { padding-block: 3.5rem; }

/* ---------- 22.11 Contact page section ------------------------------------------------- */
.rs-contact { padding-block: clamp(4rem, 7vw, 6.5rem); }
.rs-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: clamp(2.5rem, 5vw, 5rem);
}
.rs-contact__details { min-width: 0; }
.rs-contact__details > p { color: var(--rs-text-soft); }
.rs-contact__title { margin: 0 0 1.25rem; text-wrap: balance; }
.rs-contact__details > .rs-callout:last-child { margin-bottom: 0; }
@media (max-width: 1024px) { .rs-contact__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 22.14 Glossary index (/glossar/) ---------------------------------------------- */
.rs-glossary__heading { margin: 0 0 1.25rem; }
.rs-glossary__az { margin: 0 0 1.75rem; }
.rs-az { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.rs-az > li { margin: 0; }
.rs-az a,
.rs-az__off {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 .5rem;
  border-radius: var(--rs-radius-sm);
  font-size: var(--rs-fs-body);
  font-weight: var(--rs-fw-black);
  line-height: 1;
  text-transform: uppercase;
}
.rs-az a {
  border: 1px solid var(--rs-grey-400);
  background: var(--rs-white);
  color: var(--rs-secondary-ink);
  text-decoration: none;
  transition: background-color var(--rs-dur-fast) var(--rs-ease), border-color var(--rs-dur-fast) var(--rs-ease), color var(--rs-dur-fast) var(--rs-ease);
}
.rs-az a:hover { border-color: var(--rs-primary); background: var(--rs-primary-25); color: var(--rs-secondary-800); }
.rs-az a:focus-visible { outline: 3px solid var(--rs-focus); outline-offset: 2px; }
.rs-az__off { border: 1px dashed var(--rs-grey-300); color: var(--rs-text-muted); opacity: .6; }   /* letter without entries (inactive) */
.rs-glossary__search { display: grid; gap: .5rem; max-width: 36rem; margin: 0 0 2rem; }
.rs-glossary__search-label { color: var(--rs-text); font-size: var(--rs-fs-ui); font-weight: var(--rs-fw-bold); }
.rs-glossary__search .rs-form__control {
  min-height: 3rem;
  padding-left: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646B71' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  background-position: .9rem center;
  background-repeat: no-repeat;
  background-size: 1.1rem;
}
.rs-glossary__count { min-height: 1.5em; margin: 0; color: var(--rs-text-muted); font-size: var(--rs-fs-small); }
.rs-glossary__list { margin-top: .5rem; }
.rs-glossary__group { margin: 0 0 2.5rem; scroll-margin-top: var(--rs-scroll-offset); }
.rs-glossary__group:last-of-type { margin-bottom: 0; }
.rs-glossary__letter {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1rem;
  color: var(--rs-text);
  font-size: var(--rs-fs-h4);
  font-weight: var(--rs-fw-black);
  line-height: 1.4;
  text-transform: uppercase;
  scroll-margin-top: var(--rs-scroll-offset);
}
.rs-glossary__letter::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--rs-grey-300); }
.rs-glossary__entries { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 1025px) { .rs-glossary__entries { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rs-glossary__entry {                    /* .rs-card-soft look */
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 1.5rem;
  border: 1px solid var(--rs-border-light);
  border-radius: var(--rs-radius-xl);
  background: var(--rs-white);
  box-shadow: var(--rs-shadow-card-soft);
}
.rs-glossary__term { margin: 0 0 .5rem; font-size: var(--rs-fs-card-title); font-weight: var(--rs-fw-bold); line-height: 1.3; }
.rs-glossary__term a { color: var(--rs-text); text-decoration: none; }
.rs-glossary__term a:hover { color: var(--rs-secondary-ink); text-decoration: underline; text-underline-offset: .2em; }
.rs-glossary__short { margin: 0 0 1.1rem; color: var(--rs-text-soft); font-size: 1rem; line-height: var(--rs-lh-copy); }
.rs-glossary__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin: auto 0 0; }
.rs-glossary__links .rs-link-more { padding-bottom: 6px; font-size: var(--rs-fs-small); }
.rs-glossary__service {
  color: var(--rs-secondary-ink);
  font-size: var(--rs-fs-small);
  font-weight: var(--rs-fw-bold);
  text-decoration: underline;
  text-decoration-color: var(--rs-primary-a55);
  text-underline-offset: .2em;
}
.rs-glossary__service:hover { color: var(--rs-secondary-800); text-decoration-color: currentColor; }
.rs-glossary__empty { margin: 1rem 0 0; color: var(--rs-text-muted); }
.rs-glossary mark { padding: 0 .1em; border-radius: 2px; background: var(--rs-primary-a35); color: inherit; }

/* ---------- 22.15 Glossary term page ---------------------------------------------------- */
.rs-term-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 4rem; }
.rs-term__article { min-width: 0; max-width: var(--rs-measure); }
.rs-term__aside { display: grid; gap: 1.5rem; min-width: 0; }
@media (min-width: 1025px) { .rs-term__aside { position: sticky; top: var(--rs-scroll-offset); } }
@media (max-width: 1024px) { .rs-term-layout { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } }
.rs-term__facts {
  padding: 1.25rem 1.35rem;
  border-left: 4px solid var(--rs-primary);
  border-radius: 0 var(--rs-radius-md) var(--rs-radius-md) 0;
  background: var(--rs-grey);
}
.rs-term__facts-title {
  margin: 0 0 .85rem;
  color: var(--rs-secondary-ink);
  font-size: var(--rs-fs-label);
  font-weight: var(--rs-fw-black);
  letter-spacing: var(--rs-ls-label);
  line-height: 1.3;
  text-transform: uppercase;
}
.rs-term__facts-list { display: grid; gap: .8rem; margin: 0; }
.rs-term__facts-list > div { min-width: 0; }
.rs-term__facts-list dt { color: var(--rs-text-muted); font-size: var(--rs-fs-meta); font-weight: var(--rs-fw-bold); line-height: 1.4; }
.rs-term__facts-list dd { margin: .1rem 0 0; color: var(--rs-text); font-weight: var(--rs-fw-bold); line-height: 1.45; overflow-wrap: anywhere; }
.rs-term__service {
  padding: 1.5rem;
  border-top: 3px solid var(--rs-primary);
  border-radius: var(--rs-radius-lg);
  background: var(--rs-charcoal);
  color: var(--rs-text-on-dark-body);
}
.rs-term__service .rs-eyebrow { margin-bottom: .45rem; }
.rs-term__service-title { margin: 0 0 1.1rem; color: var(--rs-white); font-size: var(--rs-fs-lg); font-weight: var(--rs-fw-black); line-height: 1.3; }
.rs-term__service .rs-btn--block { font-size: var(--rs-fs-ui); }
.rs-term__service-link {
  display: inline-block;
  margin-top: .9rem;
  color: var(--rs-primary);
  font-size: var(--rs-fs-small);
  font-weight: var(--rs-fw-bold);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.rs-term__service-link:hover { color: var(--rs-primary-200); }

/* related terms + previous/next */
.rs-term-related__title { margin: 0 0 1.5rem; }
.rs-term-related .rs-link-strip__grid { max-width: none; margin: 0; }
.rs-pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin: 2.5rem 0 0; }
.rs-pager__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "icon dir" "icon label";
  align-items: center;
  column-gap: .85rem;
  row-gap: .1rem;
  flex: 0 1 calc(50% - .5rem);
  min-width: 0;
  min-height: 4.25rem;
  padding: .9rem 1.2rem;
  border: 1px solid var(--rs-grey-400);
  border-radius: var(--rs-radius-lg);
  background: var(--rs-white);
  color: var(--rs-text);
  text-decoration: none;
  transition: border-color var(--rs-dur-card) var(--rs-ease), box-shadow var(--rs-dur-card) var(--rs-ease);
}
.rs-pager__link--next {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "dir icon" "label icon";
  margin-left: auto;                     /* stays right when there is no previous term */
  text-align: right;
}
.rs-pager__link > .icon { grid-area: icon; width: 1.25rem; height: 1.25rem; color: var(--rs-secondary); transition: transform var(--rs-dur-card) var(--rs-ease); }
.rs-pager__dir {
  grid-area: dir;
  color: var(--rs-text-muted);
  font-size: var(--rs-fs-label);
  font-weight: var(--rs-fw-bold);
  letter-spacing: .08em;
  line-height: 1.3;
  text-transform: uppercase;
}
.rs-pager__label { grid-area: label; font-weight: var(--rs-fw-bold); line-height: 1.35; overflow-wrap: anywhere; }
.rs-pager__link:hover { border-color: var(--rs-primary); box-shadow: var(--rs-shadow-card); color: var(--rs-text); }
.rs-pager__link--prev:hover > .icon { transform: translateX(-3px); }
.rs-pager__link--next:hover > .icon { transform: translateX(3px); }
.rs-pager__link:focus-visible { outline: 3px solid var(--rs-focus); outline-offset: 2px; }
.rs-term-related__back { margin: 2rem 0 0; }
.rs-term-related__back a { font-weight: var(--rs-fw-bold); }
@media (max-width: 600px) {
  .rs-pager__link { flex-basis: 100%; }
  .rs-pager__link--next { margin-left: 0; }
}

/* ---------- 22.16 Legal pages (B-18) -------------------------------------------------- */
.rs-legal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: start;
  gap: 4rem;
  max-width: calc(var(--rs-container) + 2 * var(--rs-gutter));
  margin: 0 auto;
  padding: 100px var(--rs-gutter) 80px;
}
.rs-legal--single,
.rs-legal:not(:has(> .rs-toc)) { grid-template-columns: minmax(0, 1fr); }
.rs-legal > .rs-toc { order: 2; width: 100%; margin: 0; }
.rs-legal > .rs-prose { min-width: 0; }
@media (min-width: 1025px) {
  .rs-legal > .rs-toc {
    position: sticky;
    top: var(--rs-scroll-offset);
    max-height: calc(100vh - var(--rs-scroll-offset) - 1.5rem);
    max-height: calc(100dvh - var(--rs-scroll-offset) - 1.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
@media (max-width: 1024px) {
  .rs-legal { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .rs-legal > .rs-toc { order: 0; max-width: none; }
}
@media (max-width: 767px) { .rs-legal { padding-block: 64px 48px; } }
.rs-legal__form { margin-top: 3rem; }

/* ---------- 22.17 Homepage overrides (03, B-23) ---------------------------------------- */
.rs-page-home .rs-shape--slant { --rs-shape-h: 50px; }   /* the homepage keeps 50 px on phones */

/* === B2: Startseite nach Design-Vorschau (§ 18.4.6/§ 18.4.9) === */
/* Claim-Karten mit Kicker (feature-cards), „Warum ProNet“ mit Box (overview-intro--box), Bereichsband (services-list lg =
   .rs-areas), Ablauf mit Button (process), Abschluss-CTA (cta home), Werte aus _vorschau/design-vorschau.html. */

/* Claim-Wort als Überzeile der drei Karten (K2): 20 px fett = großer Text, Punkt in Mittelblau (≥ 3:1) */
.rs-feature-card__kicker { margin: 0 0 4px; color: var(--rs-secondary-ink); font-size: 1.25rem; font-weight: var(--rs-fw-black); letter-spacing: .02em; line-height: 1.2; }
.rs-feature-card__kicker .claim__dot { color: var(--rs-secondary); }

/* „Warum ProNet Systems?“ – Text links, Box „Das erhalten Sie“ rechts (Vorschau .intro) */
.rs-overview-intro--box::before { content: none; }       /* ohne Strich-Deko neben der Box */
.rs-overview-intro--box.rs-tone-grey { background-color: var(--rs-white); }   /* Vorschau: weißer Abschnitt, graue Box */
.rs-overview-intro--box .rs-overview-intro__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
  gap: 40px 72px;
  padding: 64px var(--rs-gutter) 92px;
}
.rs-overview-intro--box .rs-overview-intro__copy { max-width: none; }
.rs-overview-intro--box .rs-overview-intro__title { margin: 0 0 18px; font-size: clamp(26px, 1rem + 1.6vw, 36px); letter-spacing: -.015em; line-height: 1.2; }
.rs-overview-intro--box .rs-prose { max-width: none; }
.rs-overview-intro--box .rs-prose a:not([class]) { color: var(--rs-secondary-ink); text-decoration-color: currentColor; }   /* 8,21:1 */
.rs-overview-intro--box .rs-prose a:not([class]):hover { color: var(--rs-secondary-800); text-decoration-thickness: 2px; }
.rs-overview-intro__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 22px;
  color: var(--rs-secondary-ink);
  font-weight: var(--rs-fw-black);
  text-decoration: none;
}
.rs-overview-intro__link .icon { width: 16px; height: 16px; stroke-width: 2.25; transition: transform var(--rs-dur-form) ease; }
.rs-overview-intro__link:hover { color: var(--rs-secondary-800); }
.rs-overview-intro__link:hover .icon { transform: translateX(3px); }
.rs-overview-intro__box { padding: 28px 30px; border-left: 4px solid var(--rs-secondary); background: var(--rs-grey); }
.rs-overview-intro__box-title { margin: 0 0 10px; color: var(--rs-text); font-size: 1.125rem; font-weight: var(--rs-fw-black); line-height: 1.4; }
.rs-overview-intro__checks { margin: 0; padding: 0; list-style: none; }
.rs-overview-intro__checks li { display: flex; align-items: flex-start; gap: 12px; padding: 7px 0; color: var(--rs-text-soft); line-height: 1.6; }
.rs-overview-intro__checks .icon { flex: none; width: 20px; height: 20px; margin-top: 3px; color: var(--rs-secondary); stroke-width: 2; }
@media (max-width: 1024px) {
  .rs-overview-intro--box .rs-overview-intro__inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .rs-overview-intro--box .rs-overview-intro__inner { padding: 48px var(--rs-gutter) 64px; }
  .rs-overview-intro__box { padding: 22px 20px; }
}

/* Bereichsband: die 10 Hubs nach den drei Megamenü-Bereichen + Beratungskarte (Vorschau .areas) */
.rs-areas { padding: 84px var(--rs-gutter) 92px; background: var(--rs-charcoal-900); color: var(--rs-on-dark-2); }
.rs-areas__inner { max-width: var(--rs-container); margin: 0 auto; }
.rs-areas .rs-section-head { max-width: 760px; margin-bottom: 36px; }
.rs-areas .rs-section-head__title { font-size: clamp(26px, 1rem + 1.6vw, 36px); letter-spacing: -.015em; line-height: 1.2; }
.rs-areas .rs-section-head__intro { margin-top: 14px; color: var(--rs-on-dark-2); }
.rs-areas__group + .rs-areas__group { margin-top: 34px; }
.rs-areas__label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  color: var(--rs-on-dark-4);            /* 9,3:1 auf #181C23 */
  font-size: var(--rs-fs-label);
  font-weight: var(--rs-fw-bold);
  letter-spacing: var(--rs-ls-eyebrow);
  line-height: 1.4;
  text-transform: uppercase;
}
.rs-areas__label::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--rs-white-a11); }
.rs-areas__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.rs-areas__grid > li { display: flex; min-width: 0; }
.rs-area-card {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 22px 22px 24px;
  border: 1px solid var(--rs-line-dark);
  border-radius: var(--rs-radius-md);
  background: var(--rs-charcoal-700);
  color: var(--rs-on-dark-2);
  text-decoration: none;
  transition: background-color var(--rs-dur-form) ease, border-color var(--rs-dur-form) ease;
}
.rs-area-card:hover { border-color: rgb(var(--rs-primary-rgb) / .55); background: var(--rs-charcoal-650); color: var(--rs-on-dark-2); }
.rs-area-card:focus-visible { outline: 2px solid var(--rs-primary); outline-offset: 3px; }
.rs-area-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  border-radius: var(--rs-radius-md);
  background: rgb(var(--rs-primary-rgb) / .14);
  color: var(--rs-primary);
}
.rs-area-card__icon .icon { width: 22px; height: 22px; stroke-width: 1.75; }
.rs-area-card__title { padding-right: 24px; color: var(--rs-white); font-size: 1.0625rem; font-weight: var(--rs-fw-black); line-height: 1.3; }
.rs-area-card__desc { color: var(--rs-on-dark-3); font-size: .90625rem; line-height: 1.55; }   /* 9,6:1 auf #292E3A */
.rs-area-card__arrow { position: absolute; top: 24px; right: 20px; width: 18px; height: 18px; color: var(--rs-primary); stroke-width: 2.25; transition: transform var(--rs-dur-form) ease; }
.rs-area-card:hover .rs-area-card__arrow { transform: translateX(3px); }
.rs-area-card--cta { border-color: rgb(var(--rs-primary-rgb) / .7); background: linear-gradient(160deg, rgb(var(--rs-primary-rgb) / .18), rgb(var(--rs-primary-rgb) / .05)); }
.rs-area-card--cta:hover { border-color: var(--rs-primary); background: linear-gradient(160deg, rgb(var(--rs-primary-rgb) / .24), rgb(var(--rs-primary-rgb) / .08)); }
.rs-area-card__btn { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; color: var(--rs-primary); font-size: var(--rs-fs-ui); font-weight: var(--rs-fw-black); }
.rs-area-card__btn .icon { width: 16px; height: 16px; stroke-width: 2.25; transition: transform var(--rs-dur-form) ease; }
.rs-area-card--cta:hover .rs-area-card__btn .icon { transform: translateX(3px); }
@media (max-width: 1100px) { .rs-areas__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .rs-areas { padding-block: 60px; } }
@media (max-width: 600px) { .rs-areas__grid { grid-template-columns: minmax(0, 1fr); } }

/* Ablauf mit Button und Mikrotext (Startseite: helle Variante auf Hellgrau wie die Vorschau) */
.rs-process-section__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 44px; }
.rs-process-section__micro { color: var(--rs-ctx-text-muted); font-size: .90625rem; }
.rs-page-home .rs-process-section--light { background: var(--rs-grey); }
.rs-page-home .rs-process-section { padding-block: 84px; }
.rs-page-home .rs-process-section .rs-container--wide { max-width: calc(var(--rs-container) + 2 * var(--rs-gutter)); }
.rs-page-home .rs-shape--notch { display: none; }        /* Vorschau: Übergänge der Startseite ohne Kerbe */
@media (max-width: 767px) { .rs-page-home .rs-process-section { padding-block: 60px; } }

/* Abschluss-CTA der Startseite (Vorschau .cta-band): Text links, Button + Telefon + „Bereits Kunde?“ rechts */
.rs-cta-home {
  padding: 76px var(--rs-gutter);
  border-bottom: 1px solid rgb(var(--rs-primary-rgb) / .16);
  background: radial-gradient(ellipse at 88% 0%, rgb(var(--rs-secondary-rgb) / .26), transparent 55%), var(--rs-charcoal-900);
  color: var(--rs-on-dark-2);
}
.rs-cta-home__inner { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; gap: 28px 64px; max-width: var(--rs-container); margin: 0 auto; }
.rs-cta-home__title { margin: 0; color: var(--rs-white); font-size: clamp(26px, 1rem + 1.6vw, 36px); letter-spacing: -.015em; line-height: 1.2; text-wrap: balance; }
.rs-cta-home__text { margin: 14px 0 0; color: var(--rs-on-dark-2); font-size: var(--rs-fs-body); line-height: 1.65; }
.rs-cta-home__actions { display: grid; gap: 16px; justify-items: start; }
.rs-cta-home__phone { display: inline-flex; align-items: center; gap: 10px; color: var(--rs-white); font-size: 1.25rem; font-weight: var(--rs-fw-black); text-decoration: none; }
.rs-cta-home__phone .icon { width: 20px; height: 20px; color: var(--rs-primary); stroke-width: 2; }
.rs-cta-home__phone:hover { color: var(--rs-primary-200); }
.rs-cta-home__support { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; color: var(--rs-on-dark-3); font-size: var(--rs-fs-ui); }
.rs-cta-home__support .icon { width: 17px; height: 17px; color: var(--rs-primary); stroke-width: 2; }
.rs-cta-home__support a { color: var(--rs-primary); font-weight: var(--rs-fw-black); text-decoration: underline; text-underline-offset: 3px; }
.rs-cta-home__support a:hover { color: var(--rs-primary-200); }
.rs-cta-home .rs-btn--solid:hover > .icon { transform: translateX(3px); }
.rs-cta-home .rs-btn > .icon { transition: transform var(--rs-dur-form) ease; }
@media (max-width: 1024px) { .rs-cta-home__inner { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { .rs-cta-home { padding-block: 60px; } }
@media (max-width: 600px) { .rs-cta-home__actions { justify-items: stretch; } }
/* === Ende B2: Startseite === */

/* === B2: Vergleichstabelle und Beitragskarten (Klassenliste _projekt/tmp/bau/klassenliste-startseite.md) === */
/* compare-table (Block compare, § 18.4.2; Markup B3b/B1b): Tabelle mit th scope="row", bis 768 px Karten je Kriterium
   (data-label), Fazit-Zeile .rs-compare__fit dezent hervorgehoben – Werte der Vorschau (.ctable). */
.rs-compare { padding: 84px var(--rs-gutter); }
.rs-compare__inner { max-width: 980px; margin: 0 auto; }
.rs-compare .rs-section-head { max-width: 760px; margin-bottom: 36px; }
.rs-compare .rs-section-head__title,
.rs-posts .rs-section-head__title { font-size: clamp(26px, 1rem + 1.6vw, 36px); letter-spacing: -.015em; line-height: 1.2; }
.rs-compare__wrap { overflow: hidden; border: 1px solid var(--rs-grey-300); border-radius: var(--rs-radius-lg); }
.rs-compare__table { width: 100%; margin: 0; border-collapse: collapse; font-size: .96875rem; line-height: 1.55; }
.rs-compare__table thead th {
  padding: 14px 18px;
  background: var(--rs-charcoal);
  color: var(--rs-white);
  font-size: var(--rs-fs-meta);
  font-weight: var(--rs-fw-black);
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
}
.rs-compare__table tbody th { width: 24%; padding: 16px 18px; color: var(--rs-text); font-weight: var(--rs-fw-black); text-align: left; vertical-align: top; }
.rs-compare__table td { padding: 16px 18px; color: var(--rs-text-soft); vertical-align: top; }
.rs-compare__table tbody tr + tr > * { border-top: 1px solid var(--rs-grey-300); }
.rs-compare__table tbody tr:nth-child(even) { background: var(--rs-grey); }
.rs-compare__table tr.rs-compare__fit > * { background: var(--rs-primary-25); }
.rs-compare__table tr.rs-compare__fit th { color: var(--rs-secondary-ink); }
.rs-compare__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 16px 0 0; color: var(--rs-text-muted); font-size: var(--rs-fs-small); }
.rs-compare__meta > span { display: inline-flex; align-items: center; gap: 6px; }
.rs-compare__meta .icon { width: 15px; height: 15px; color: var(--rs-secondary); stroke-width: 2; }
.rs-compare__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 28px; }
.rs-compare__more,
.rs-posts__more { display: inline-flex; align-items: center; gap: 7px; color: var(--rs-secondary-ink); font-weight: var(--rs-fw-black); text-decoration: none; }
.rs-compare__more .icon,
.rs-posts__more .icon { width: 16px; height: 16px; stroke-width: 2.25; transition: transform var(--rs-dur-form) ease; }
.rs-compare__more:hover,
.rs-posts__more:hover { color: var(--rs-secondary-800); }
.rs-compare__more:hover .icon,
.rs-posts__more:hover .icon { transform: translateX(3px); }
@media (max-width: 768px) {
  .rs-compare__wrap { overflow: visible; border: 0; border-radius: 0; }
  .rs-compare__table,
  .rs-compare__table tbody,
  .rs-compare__table tr,
  .rs-compare__table th,
  .rs-compare__table td { display: block; width: 100%; }
  .rs-compare__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .rs-compare__table tbody tr { margin-bottom: 14px; overflow: hidden; border: 1px solid var(--rs-grey-300); border-radius: var(--rs-radius-lg); background: var(--rs-white); }
  .rs-compare__table tbody tr:nth-child(even) { background: var(--rs-white); }
  .rs-compare__table tbody tr + tr > * { border-top: 0; }
  .rs-compare__table tbody th { width: auto; padding: 12px 16px; background: var(--rs-charcoal); color: var(--rs-white); }
  .rs-compare__table tr.rs-compare__fit > * { background: var(--rs-primary-25); }
  .rs-compare__table tr.rs-compare__fit th { background: var(--rs-secondary-ink); color: var(--rs-white); }
  .rs-compare__table td { padding: 12px 16px; }
  .rs-compare__table td + td { border-top: 1px solid var(--rs-grey-300); }
  .rs-compare__table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--rs-secondary-ink);
    font-size: var(--rs-fs-label);
    font-weight: var(--rs-fw-black);
    letter-spacing: .08em;
    text-transform: uppercase;
  }
}
@media (max-width: 767px) { .rs-compare { padding-block: 60px; } }

/* post-grid / Beitragskarte (Block posts, Ratgeber-Listen, „Weitere Beiträge“; Markup B3a) – Vorschau .post-card:
   Musterfläche (Verlauf Logo-Blau → Web-Blau → Mittelblau + Punktraster + Kategorie-Icon) bzw. Beitragsbild 16:9 */
.rs-posts { padding: 84px var(--rs-gutter) 88px; }
.rs-posts__inner { max-width: var(--rs-container); margin: 0 auto; }
.rs-section-head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; max-width: none; }
.rs-section-head--row .rs-section-head__title { margin-bottom: 0; }
.rs-post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.rs-post-grid > li { display: flex; min-width: 0; }
.rs-post-card {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--rs-grey-300);
  border-radius: var(--rs-radius-lg);
  background: var(--rs-white);
  color: var(--rs-text);
  transition: border-color var(--rs-dur-form) ease, box-shadow var(--rs-dur-form) ease;
}
.rs-post-card:hover { border-color: var(--rs-primary-100); box-shadow: 0 10px 28px rgb(var(--rs-charcoal-rgb) / .1); }
.rs-post-card:focus-within { outline: 2px solid var(--rs-secondary-ink); outline-offset: 3px; }
.rs-post-card__media {
  position: relative;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: radial-gradient(circle at 82% 18%, rgb(var(--rs-primary-rgb) / .38), transparent 55%), linear-gradient(135deg, #005091 0%, #006699 58%, #1779B0 100%);
}
.rs-post-card__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgb(var(--rs-white-rgb) / .38) 1.2px, transparent 1.7px);
  background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(105deg, transparent 32%, #000 92%);
          mask-image: linear-gradient(105deg, transparent 32%, #000 92%);
}
.rs-post-card__media img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: 0 100%; }   /* 16:9-Bild im 16:7-Feld: Kategorie-Kachel unten links bleibt sichtbar */
.rs-post-card__tile {
  position: absolute;
  left: 20px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgb(var(--rs-white-rgb) / .28);
  border-radius: var(--rs-radius-lg);
  background: rgb(var(--rs-white-rgb) / .14);
  color: var(--rs-white);
}
.rs-post-card__tile .icon { width: 24px; height: 24px; stroke-width: 1.75; }
.rs-post-card__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px; padding: 20px 22px 22px; }
.rs-post-card__body > * { margin: 0; }
.rs-post-card__cat { color: var(--rs-secondary-ink); font-size: .78125rem; font-weight: var(--rs-fw-black); letter-spacing: var(--rs-ls-kicker); line-height: 1.4; text-transform: uppercase; }
.rs-post-card__title { color: var(--rs-text); font-size: 1.1875rem; font-weight: var(--rs-fw-black); letter-spacing: -.005em; line-height: 1.3; }
.rs-post-card__link { color: inherit; text-decoration: none; }
.rs-post-card__link::after { content: ""; position: absolute; inset: 0; }   /* ganze Karte klickbar */
.rs-post-card__link:focus-visible { outline: none; }
.rs-post-card:hover .rs-post-card__title { color: var(--rs-secondary-ink); }
.rs-post-card__meta { color: var(--rs-text-muted); font-size: var(--rs-fs-small); }
.rs-post-card__teaser { color: var(--rs-text-soft); font-size: .96875rem; line-height: 1.55; }
.rs-post-card__more { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 6px; color: var(--rs-secondary-ink); font-size: var(--rs-fs-ui); font-weight: var(--rs-fw-black); }
.rs-post-card__more .icon { width: 16px; height: 16px; stroke-width: 2.25; transition: transform var(--rs-dur-form) ease; }
.rs-post-card:hover .rs-post-card__more .icon { transform: translateX(3px); }
@media (max-width: 1023px) { .rs-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .rs-posts { padding-block: 60px; }
  .rs-post-grid { grid-template-columns: minmax(0, 1fr); }
}
/* === Ende B2: Vergleichstabelle und Beitragskarten === */

/* === B2: Ratgeber-Kopf (Seitentypen blog, post, post-category, post-tag) === */
/* Der page-hero (Variante boxed) der Ratgeber-Seiten erscheint wie der Beitragskopf der Vorschau
   (_vorschau/vorschau-ratgeber.html .page-hero): dunkel mit Punktraster rechts statt Box, Titel links, ohne Schräge.
   Greift nur, solange die Ratgeber-Seiten die Komponente page-hero verwenden (Beitragskopf mit Meta: B3a). */
:is(.rs-page-blog, .rs-page-post, .rs-page-post-category, .rs-page-post-tag) .rs-page-hero {
  background: radial-gradient(ellipse at 12% 0%, rgb(var(--rs-secondary-rgb) / .24), transparent 58%), var(--rs-charcoal);
}
:is(.rs-page-blog, .rs-page-post, .rs-page-post-category, .rs-page-post-tag) .rs-page-hero::before,
:is(.rs-page-blog, .rs-page-post, .rs-page-post-category, .rs-page-post-tag) .rs-page-hero.rs-page-hero--fixed::before {
  position: absolute;
  inset: 0 -6% auto auto;
  width: 52%;
  height: 82%;
  background: radial-gradient(rgb(var(--rs-primary-rgb) / .3) 1.3px, transparent 1.6px) 0 0 / 16px 16px;
  opacity: .6;
  -webkit-mask-image: linear-gradient(to left, #000 25%, transparent 95%);
          mask-image: linear-gradient(to left, #000 25%, transparent 95%);
}
:is(.rs-page-blog, .rs-page-post, .rs-page-post-category, .rs-page-post-tag) .rs-page-hero::after { content: none; }
:is(.rs-page-blog, .rs-page-post, .rs-page-post-category, .rs-page-post-tag) .rs-page-hero .rs-shape { display: none; }
:is(.rs-page-blog, .rs-page-post, .rs-page-post-category, .rs-page-post-tag) .rs-page-hero--boxed .rs-page-hero__inner {
  padding: calc(var(--rs-topbar-h) + var(--rs-header-h) + 40px) var(--rs-gutter) 54px;
}
:is(.rs-page-blog, .rs-page-post, .rs-page-post-category, .rs-page-post-tag) .rs-page-hero__box {
  width: auto;
  max-width: 880px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
:is(.rs-page-blog, .rs-page-post, .rs-page-post-category, .rs-page-post-tag) .rs-page-hero--boxed .rs-page-hero__title {
  margin: 0;
  font-size: clamp(30px, 1rem + 2.3vw, 46px);
  letter-spacing: -.012em;
  line-height: 1.14;
}
:is(.rs-page-blog, .rs-page-post, .rs-page-post-category, .rs-page-post-tag) .rs-page-hero .rs-hero-lead,
:is(.rs-page-blog, .rs-page-post, .rs-page-post-category, .rs-page-post-tag) .rs-page-hero__lead {
  max-width: 780px;
  margin-top: 16px;
  padding-top: 0;
  border-top: 0;
  color: var(--rs-on-dark-2);
  font-size: clamp(17px, 1rem + .25vw, 19px);
  line-height: 1.6;
}
:is(.rs-page-blog, .rs-page-post, .rs-page-post-category, .rs-page-post-tag) .rs-page-hero .rs-breadcrumb { font-size: var(--rs-fs-small); }
@media (max-width: 767px) {
  :is(.rs-page-blog, .rs-page-post, .rs-page-post-category, .rs-page-post-tag) .rs-page-hero--boxed .rs-page-hero__inner {
    padding: calc(var(--rs-topbar-h) + var(--rs-header-h) + 32px) var(--rs-gutter) 44px;
  }
}
/* === Ende B2: Ratgeber-Kopf === */

/* === B2: Download-Karte (Bauvertrag § 6 Nr. 5, 05-content-format § 18.4.4; Markup B1b laut Klassenliste § 6) === */
/* Im Hero von support rechte Spalte (dunkel wie die Formularkarte), sonst eigene Karte auf Hell. */
.rs-download {
  position: relative;
  z-index: 2;
  min-width: 0;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--rs-ctx-border);
  border-top: 3px solid var(--rs-ctx-accent);
  border-radius: var(--rs-radius-lg);
  background: var(--rs-white);
  box-shadow: var(--rs-shadow-card);
}
.rs-on-dark .rs-download { border-top-width: 2px; background: var(--rs-charcoal-700); box-shadow: var(--rs-shadow-panel); }
.rs-download__head { display: flex; align-items: center; gap: .875rem; margin-bottom: 1rem; }
.rs-download__head .rs-eyebrow { margin: 0; }
.rs-download__icon { display: inline-grid; flex: none; place-items: center; width: 48px; height: 48px; border-radius: var(--rs-radius-icon); background: var(--rs-primary-50); color: var(--rs-secondary-700); }
.rs-on-dark .rs-download__icon { background: rgb(var(--rs-primary-rgb) / .14); color: var(--rs-primary); }
.rs-download__icon .icon { width: 24px; height: 24px; }
.rs-download__title { margin: 0 0 .5rem; color: var(--rs-ctx-heading); font-size: var(--rs-fs-h3); font-weight: var(--rs-fw-black); line-height: var(--rs-lh-snug); text-wrap: balance; }
.rs-download__intro { margin: 0 0 1.5rem; color: var(--rs-ctx-text-soft); font-size: var(--rs-fs-btn); line-height: 1.55; }
.rs-download__button { width: 100%; }
.rs-download__note { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem .6rem; margin: .9rem 0 0; color: var(--rs-ctx-text-muted); font-size: var(--rs-fs-small); line-height: 1.45; text-align: center; }
.rs-download__meta { white-space: nowrap; }
.rs-download__note > * + .rs-download__meta::before { content: "·"; margin-right: .6rem; }
.rs-hero .rs-hero__inner:has(> .rs-download) { grid-template-columns: minmax(0, 1.05fr) minmax(min(22rem, 100%), .95fr); }
.rs-download-section { padding: var(--rs-section-y) var(--rs-gutter); }
.rs-download-section .rs-download { max-width: var(--rs-container-narrow); margin: 0 auto; }
@media (max-width: 1024px) { .rs-hero .rs-hero__inner:has(> .rs-download) { max-width: var(--rs-container-wide); } }   /* zweispaltig bis 900 px: Button im ersten Bildschirm (E8) */
@media (max-width: 899px) { .rs-hero .rs-hero__inner:has(> .rs-download) { grid-template-columns: minmax(0, 1fr); max-width: var(--rs-container-narrow); } }
@media (max-width: 600px) {
  .rs-download { padding: 1.25rem; }
  .rs-download__button { padding-inline: 1rem; }
  /* kleine Telefone: Karte direkt unter den Titel, damit der Button im ersten Bildschirm bleibt (E8); Fokusfolge unverändert */
  .rs-hero .rs-hero__inner:has(> .rs-download) { row-gap: 0; }
  .rs-hero__inner:has(> .rs-download) > .rs-hero__content { display: contents; }
  .rs-hero__inner:has(> .rs-download) > .rs-download { order: 1; margin-top: 1.5rem; }
  .rs-hero__inner:has(> .rs-download) > .rs-hero__content > :not(.rs-breadcrumb, .rs-kicker-row, .rs-hero__title, .rs-hero__tagline) { order: 2; }
}
/* === Ende B2: Download-Karte === */

/* === B3b: Projektkarten, Kartenvorschau Standort, Glossar-Kategorien, externe Kartenlinks === */
.rs-projects__group { margin-top: 2.5rem; }
.rs-projects__group-title { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.25rem; font-size: var(--rs-fs-h4); font-weight: var(--rs-fw-black); line-height: 1.3; }
.rs-projects__group-title::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--rs-grey-300); }
.rs-projects__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.rs-projects__grid > li { display: flex; min-width: 0; }
.rs-project-card { display: flex; flex: 1 1 auto; flex-direction: column; gap: .85rem; min-width: 0; padding: 1.5rem; border: 1px solid var(--rs-border-light); border-top: 3px solid var(--rs-secondary); border-radius: var(--rs-radius-xl); background: var(--rs-white); box-shadow: var(--rs-shadow-card-soft); scroll-margin-top: var(--rs-scroll-offset); }
.rs-project-card:target { outline: 3px solid var(--rs-primary); outline-offset: 3px; }
.rs-project-card__title { margin: 0; font-size: var(--rs-fs-card-title); font-weight: var(--rs-fw-black); line-height: 1.3; }
.rs-project-card__purpose { margin: 0; color: var(--rs-text-soft); line-height: var(--rs-lh-copy); }
.rs-project-card__facts { display: grid; gap: .5rem; margin: 0; padding-top: .9rem; border-top: 1px solid var(--rs-grey-300); font-size: var(--rs-fs-small); line-height: 1.45; }
.rs-project-card__facts > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .75rem; }
.rs-project-card__facts dt { color: var(--rs-text-muted); font-weight: var(--rs-fw-bold); }
.rs-project-card__facts dd { margin: 0; color: var(--rs-text); overflow-wrap: anywhere; }
.rs-project-card__hint { color: var(--rs-text-muted); }
.rs-project-card__status { margin: 0; padding: .7rem .85rem; border-radius: var(--rs-radius-md); background: var(--rs-primary-25); color: var(--rs-text); font-size: var(--rs-fs-small); line-height: 1.5; }
.rs-project-card__status-label { color: var(--rs-secondary-ink); font-weight: var(--rs-fw-black); }
.rs-project-card__button { align-self: flex-start; margin-top: auto; }
.rs-project-card__button .icon { width: 1.1em; height: 1.1em; }
.rs-projects__foot { display: grid; gap: .75rem; max-width: var(--rs-measure); margin-top: 2rem; }
.rs-projects__note { display: flex; gap: .6rem; margin: 0; color: var(--rs-text-muted); font-size: var(--rs-fs-small); line-height: 1.55; }
.rs-projects__note > .icon { flex: none; width: 18px; height: 18px; margin-top: .15rem; color: var(--rs-secondary); }
.rs-projects__profile { margin: 0; font-weight: var(--rs-fw-bold); }
.rs-projects__profile .rs-link-external { display: inline-flex; align-items: center; gap: .45rem; }
@media (max-width: 479px) { .rs-project-card__facts > div { grid-template-columns: minmax(0, 1fr); gap: .1rem; } }
.rs-map-card { margin-top: 1.75rem; padding: 1rem; border: 1px solid var(--rs-grey-300); border-radius: var(--rs-radius-xl); background: var(--rs-white); }
.rs-map-card__title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .75rem; font-size: var(--rs-fs-lg); font-weight: var(--rs-fw-black); line-height: 1.3; }
.rs-map-card__title .icon { width: 20px; height: 20px; color: var(--rs-secondary); }
.rs-map-card__img { display: block; width: 100%; height: auto; border-radius: var(--rs-radius-lg); background: var(--rs-grey); }
.rs-map-card__area { margin: .75rem 0 .35rem; color: var(--rs-text-soft); font-size: var(--rs-fs-small); line-height: 1.5; }
.rs-map-card__action { margin: 0; font-size: var(--rs-fs-small); font-weight: var(--rs-fw-bold); }
.rs-glossary__search { scroll-margin-top: var(--rs-scroll-offset); }
.rs-glossary__field { display: grid; gap: .5rem; min-width: 0; }
.rs-glossary__search--cats { grid-template-columns: minmax(0, 1fr) minmax(12rem, 15rem); column-gap: 1rem; max-width: 48rem; }
.rs-glossary__search--cats .rs-glossary__count { grid-column: 1 / -1; }
.rs-glossary__search select.rs-form__control { padding-left: .8rem; background-position: right .8rem center; background-size: 1rem; }
.rs-glossary__cat { margin: -.15rem 0 .6rem; color: var(--rs-secondary-ink); font-size: var(--rs-fs-label); font-weight: var(--rs-fw-black); letter-spacing: var(--rs-ls-label); line-height: 1.4; text-transform: uppercase; }
@media (max-width: 599px) { .rs-glossary__search--cats { grid-template-columns: minmax(0, 1fr); } }
.rs-term__search { margin: 0; }
.rs-term__search a { display: inline-flex; align-items: center; gap: .5rem; color: var(--rs-secondary-ink); font-weight: var(--rs-fw-bold); text-decoration: underline; text-underline-offset: .2em; }
.rs-term__search .icon { width: 18px; height: 18px; }
@media (max-height: 819px) { .rs-term__aside { position: static; } }   /* Faktenbox + Leistung + Teilen passen sonst nicht klebend ins Fenster */
.rs-service-card__ext-icon { width: .9em; height: .9em; margin-left: .3em; vertical-align: -.05em; }
/* neben der Seitenleiste (B3a .rs-sbl): Abstände und Breite kommen aus dem Seitenleisten-Raster */
.rs-sbl.rs-tone-grey { background: var(--rs-tone-grey); }
.rs-sbl__main > :is(.rs-compare, .rs-projects) { padding: 0; background: none; }
.rs-sbl__main > .rs-compare .rs-compare__inner, .rs-sbl__main > .rs-projects > .rs-container { max-width: none; padding-inline: 0; }
.rs-sbl__main > .rs-projects .rs-projects__group:first-of-type { margin-top: 2rem; }
/* Links in Textzeilen mit Span-Hülle (Checkliste „Auf einen Blick“, Hinweise unter Tabelle/Karten) nicht nur über die Farbe (WCAG 1.4.1) */
:where(.rs-checklist__item, .rs-compare__note, .rs-projects__note, .rs-download__note) span > a:is(:not([class]), .rs-link-external) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--rs-primary-a55); }
/* === Ende B3b === */

/* === B4: Formulare – Hinweis vor den Feldern, Hilfelinks, Danke-Variante (spec/06-formulare.md, Bauvertrag § 6 Nr. 21) === */
.rs-form__notice { grid-column: 1 / -1; margin: 0 0 1rem; padding: .75rem .9rem; border: 1px solid var(--rs-ctx-border); border-left: 4px solid var(--rs-primary); border-radius: var(--rs-radius-sm); color: var(--rs-ctx-text); font-size: var(--rs-fs-meta); line-height: 1.55; }
.rs-form__notice strong { color: var(--rs-ctx-heading); }
.rs-form__notice a:not(.rs-btn),
.rs-form__help a:not(.rs-btn) { color: var(--rs-ctx-link); font-weight: var(--rs-fw-bold); text-decoration: underline; text-underline-offset: .15em; }
.rs-thanks-notice { padding-block: clamp(2rem, 4vw, 3rem) 0; }
.rs-thanks-notice__box { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem 1.5rem; border-left: 4px solid var(--rs-secondary-ink); border-radius: 0 var(--rs-radius-md) var(--rs-radius-md) 0; background: var(--rs-primary-25); color: var(--rs-text-soft); }
.rs-thanks-notice__icon { flex: none; color: var(--rs-secondary-ink); line-height: 0; }
.rs-thanks-notice__title { margin: 0 0 .35rem; color: var(--rs-text); font-size: var(--rs-fs-h5); font-weight: var(--rs-fw-black); line-height: 1.35; }
.rs-thanks-notice__text { margin: 0; font-size: var(--rs-fs-ui); line-height: 1.6; }
.rs-thanks-notice__text a { color: var(--rs-secondary-ink); font-weight: var(--rs-fw-bold); }
.rs-form__notice a[href^="tel:"],
.rs-thanks-notice__text a[href^="tel:"] { white-space: nowrap; }
/* === Ende B4: Formulare === */

/* === B3a: Ratgeber, Seitenleiste, Teilen, Suche (00-sitemap § 2.8/§ 6, D-45 B, Vorschau _vorschau/vorschau-ratgeber.html) === */
.rs-sbl { padding: 56px var(--rs-gutter) 80px; background: var(--rs-white); }
.rs-sbl__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: var(--rs-container); margin: 0 auto; }
.rs-sbl__main { min-width: 0; }
.rs-sidebar { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.rs-sidebar__flow { display: grid; gap: 20px; }
.rs-sidebar__sticky { display: grid; gap: 16px; }
@media (min-width: 1024px) {
  .rs-sbl__inner { grid-template-columns: minmax(0, 1fr) clamp(280px, 26vw, 300px); column-gap: clamp(2.5rem, 5vw, 4.5rem); }
  .rs-sbl--post .rs-sbl__inner { grid-template-columns: minmax(0, 46rem) clamp(280px, 26vw, 300px); justify-content: space-between; }
  .rs-sidebar__sticky { position: sticky; top: var(--rs-scroll-offset); display: flex; flex-direction: column; max-height: calc(100vh - var(--rs-scroll-offset) - 16px); }
  .rs-sidebar__sticky > * { flex: none; }
  .rs-sidebar__sticky > .rs-widget--toc { position: relative; flex: 0 1 auto; min-height: 120px; overflow-y: auto; }
  .rs-rg-toc-m, .rs-share-m, .rs-search-m, .rs-rg-mbar { display: none; }
}
@media (min-width: 1024px) and (max-height: 940px) {
  .rs-sidebar__sticky { gap: 12px; }
  .rs-sidebar__sticky .rs-widget { padding: 16px 18px; }
  .rs-sidebar__sticky .rs-widget--cta .rs-widget__text, .rs-sidebar__sticky .rs-widget__phone { display: none; }
  .rs-sidebar__sticky .rs-widget--share .rs-widget__title { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 1024px) and (max-height: 800px) {
  .rs-sidebar__sticky .rs-widget { padding: 12px 16px; }
  .rs-sidebar__sticky .rs-rg-toc a { padding: 4px 0; }
  .rs-sidebar__sticky .rs-widget__title { margin-bottom: 8px; }
  .rs-sidebar__sticky .rs-widget__eyebrow { display: none; }
}
@media (max-width: 1023px) {
  .rs-sbl--post .rs-sidebar { display: none; }
  .rs-sbl--list .rs-sidebar__flow > :not(.rs-widget--cta), .rs-sbl--comparison .rs-widget--toc { display: none; }
}
@media (max-width: 767px) { .rs-sbl { padding: 36px var(--rs-gutter) 56px; } }
.rs-widget { padding: 20px 22px; border: 1px solid var(--rs-grey-300); border-radius: var(--rs-radius-md); background: var(--rs-white); box-shadow: 0 1px 2px rgb(var(--rs-charcoal-rgb) / .05); }
.rs-widget__title { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; color: var(--rs-text); font-size: 1rem; font-weight: var(--rs-fw-black); line-height: 1.3; }
.rs-widget__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--rs-secondary-ink); font-size: var(--rs-fs-small); font-weight: var(--rs-fw-black); text-decoration: none; }
.rs-widget__more .icon { width: 15px; height: 15px; }
.rs-widget__more:hover { color: var(--rs-secondary-800); text-decoration: underline; text-underline-offset: 3px; }
.rs-widget__text { margin: 0 0 14px; font-size: .90625rem; line-height: 1.5; }
.rs-widget--toc { border: 0; border-left: 4px solid var(--rs-secondary); border-radius: 0 var(--rs-radius-md) var(--rs-radius-md) 0; background: var(--rs-grey); box-shadow: none; }
.rs-widget--cta { position: relative; overflow: hidden; border: 0; border-top: 3px solid var(--rs-primary); background: linear-gradient(165deg, #2a2f3b 0%, var(--rs-charcoal) 60%, #1a1d26 100%); color: var(--rs-text-on-dark-soft); box-shadow: none; }
.rs-widget--cta::before { content: ""; position: absolute; inset: 55% 0 0; pointer-events: none; background: radial-gradient(circle, rgb(var(--rs-primary-rgb) / .5) 1.2px, transparent 1.7px) 0 0 / 11px 11px; opacity: .45; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 85%); mask-image: linear-gradient(to bottom, transparent, #000 85%); }
.rs-widget--cta > * { position: relative; }
.rs-widget--cta .rs-widget__title { margin-bottom: 8px; color: var(--rs-white); font-size: 1.125rem; }
.rs-widget__eyebrow { margin: 0 0 6px; color: var(--rs-primary); font-size: .71875rem; font-weight: var(--rs-fw-black); letter-spacing: .16em; text-transform: uppercase; }
.rs-widget__phone { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--rs-white); font-size: .9375rem; font-weight: var(--rs-fw-black); text-decoration: none; }
.rs-widget__phone .icon, .rs-post-cta__phone .icon { width: 16px; height: 16px; color: var(--rs-primary); }
.rs-widget__phone:hover, .rs-post-cta__phone:hover { color: var(--rs-primary-200); }
.rs-widget__alert { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--rs-white-a14); color: var(--rs-on-dark-3); font-size: .84375rem; line-height: 1.45; }
.rs-widget__alert a { color: var(--rs-primary); font-weight: var(--rs-fw-bold); text-decoration: underline; text-underline-offset: 3px; }
.rs-widget__alert a:hover { color: var(--rs-primary-200); }
.rs-widget__alert .icon { width: 13px; height: 13px; margin-left: 3px; }
.rs-search { position: relative; display: flex; }
.rs-search__input { flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 52px 0 14px; border: 1px solid var(--rs-grey-600); border-radius: var(--rs-radius-sm); background: var(--rs-white); color: var(--rs-text); font: 400 .9375rem/1.3 var(--rs-font); -webkit-appearance: none; appearance: none; }
.rs-search__input::placeholder { color: var(--rs-text-muted); opacity: 1; }
.rs-search__input:focus { border-color: var(--rs-secondary-ink); outline: 2px solid var(--rs-secondary-ink); outline-offset: 1px; }
.rs-search__submit { position: absolute; top: 1px; right: 1px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 0 5px 5px 0; background: var(--rs-fill); color: var(--rs-white); }
.rs-search__submit .icon { width: 19px; height: 19px; stroke-width: 2.25; }
.rs-search__submit:hover { background: var(--rs-fill-hover); }
.rs-search__submit:focus-visible { outline: 3px solid var(--rs-secondary-ink); outline-offset: 2px; }
.rs-search-form__label { display: block; margin-bottom: 6px; color: var(--rs-text-soft); font-size: .90625rem; font-weight: var(--rs-fw-bold); }
.rs-catlist { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.rs-catlist__link, .rs-search-filter__link { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 10px 8px 11px; border-left: 3px solid transparent; border-radius: 0 6px 6px 0; color: var(--rs-text-soft); font-size: .9375rem; line-height: 1.3; text-decoration: none; transition: background-color .15s, color .15s, padding-left .15s; }
.rs-catlist__link .icon { width: 17px; height: 17px; color: var(--rs-secondary); }
.rs-catlist__link:hover, .rs-search-filter__link:hover { background: var(--rs-primary-25); color: var(--rs-secondary-ink); }
.rs-catlist__link:hover { padding-left: 15px; }
.rs-catlist__link.is-current, .rs-search-filter__link.is-current { border-left-color: var(--rs-secondary-ink); background: var(--rs-primary-50); color: var(--rs-secondary-ink); font-weight: var(--rs-fw-black); }
.rs-catlist__link.is-current .icon { color: var(--rs-secondary-ink); }
.rs-catlist--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; }
.rs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rs-chip { display: inline-flex; align-items: center; min-height: 34px; padding: 5px 13px; border: 1px solid var(--rs-grey-450); border-radius: var(--rs-radius-pill); background: var(--rs-white); color: var(--rs-secondary-ink); font-size: .875rem; font-weight: var(--rs-fw-bold); line-height: 1.3; text-decoration: none; }
a.rs-chip:hover, .rs-chip.is-current { border-color: var(--rs-secondary-ink); background: var(--rs-primary-50); color: var(--rs-secondary-ink); }
.rs-chip--text { border-style: dashed; color: var(--rs-text-muted); font-weight: var(--rs-fw-regular); }
.rs-recent { margin: 0; padding: 0; list-style: none; }
.rs-recent li + li { border-top: 1px solid var(--rs-grey-300); }
.rs-recent a { display: block; padding: 10px 0; text-decoration: none; }
.rs-recent li:first-child a { padding-top: 2px; }
.rs-recent__title { display: -webkit-box; overflow: hidden; color: var(--rs-text); font-size: .9375rem; font-weight: var(--rs-fw-bold); line-height: 1.38; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.rs-recent a:hover .rs-recent__title { color: var(--rs-secondary-ink); text-decoration: underline; text-underline-offset: 3px; }
.rs-recent__meta { display: block; margin-top: 3px; color: var(--rs-text-muted); font-size: .84375rem; }
.rs-rg-toc { margin: 0; padding: 0; list-style: none; counter-reset: rgtoc; }
.rs-rg-toc li { margin: 0; }
.rs-rg-toc li + li { border-top: 1px solid var(--rs-grey-400); }
.rs-rg-toc a { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px; padding: 7px 0; color: var(--rs-text-soft); font-size: .90625rem; line-height: 1.4; text-decoration: none; }
.rs-rg-toc a::before { content: counter(rgtoc, decimal-leading-zero); counter-increment: rgtoc; padding-top: 2px; color: var(--rs-text-muted); font-size: .75rem; font-weight: var(--rs-fw-black); }
.rs-rg-toc a:hover, .rs-rg-toc a[aria-current], .rs-rg-toc a[aria-current]::before { color: var(--rs-secondary-ink); }
.rs-rg-toc a[aria-current] { font-weight: var(--rs-fw-black); }
.rs-rg-toc-m { margin: 0 0 28px; }
.rs-rg-toc-m details { border-left: 4px solid var(--rs-secondary); border-radius: 0 var(--rs-radius-md) var(--rs-radius-md) 0; background: var(--rs-grey); }
.rs-rg-toc-m summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 16px; color: var(--rs-text); font-size: 1rem; font-weight: var(--rs-fw-black); line-height: 1.3; list-style: none; }
.rs-rg-toc-m summary::-webkit-details-marker { display: none; }
.rs-rg-toc-m__chev { margin-left: auto; transition: transform .2s; }
.rs-rg-toc-m details[open] .rs-rg-toc-m__chev { transform: rotate(180deg); }
.rs-rg-toc-m .rs-rg-toc { padding: 0 16px 12px; }
.rs-share__list { display: grid; grid-template-columns: repeat(5, minmax(0, 44px)); justify-content: space-between; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rs-share__btn, .rs-share__tile { position: relative; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--rs-grey-400); background: var(--rs-white); color: var(--rs-secondary-ink); text-decoration: none; transition: background-color .15s, border-color .15s, color .15s; }
.rs-share__btn { width: 100%; max-width: 44px; aspect-ratio: 1; padding: 0; border-radius: 50%; }
.rs-share__btn .icon { width: 19px; height: 19px; }
.rs-share__btn:hover, .rs-share__tile:hover { border-color: var(--rs-fill); background: var(--rs-fill); color: var(--rs-white); }
.rs-share__btn[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 5; padding: 4px 8px; border-radius: 4px; background: var(--rs-charcoal); color: var(--rs-white); font-size: .78125rem; font-weight: var(--rs-fw-bold); line-height: 1.3; white-space: nowrap; opacity: 0; visibility: hidden; transform: translate(-50%, 4px); transition: opacity .15s, transform .15s, visibility 0s linear .15s; pointer-events: none; }
.rs-share__btn:hover::after, .rs-share__btn:focus-visible::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .15s, transform .15s; }
.rs-share--tiles .rs-share__list { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; gap: 8px; }
.rs-share__tile { flex-direction: column; gap: 6px; width: 100%; min-height: 72px; padding: 10px 6px; border-radius: var(--rs-radius-md); font: 700 .84375rem/1.25 var(--rs-font); text-align: center; }
.rs-share__tile .icon { width: 22px; height: 22px; }
.rs-share__native { margin-bottom: 12px; }
.rs-share-m { margin-top: 2.5rem; padding: 20px; border: 1px solid var(--rs-grey-300); border-radius: var(--rs-radius-md); }
.rs-share-m__title { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; color: var(--rs-text); font-size: 1.0625rem; font-weight: var(--rs-fw-black); }
.rs-widget__title .icon, .rs-rg-toc-m summary .icon, .rs-share-m__title .icon, .rs-post-tags__label .icon { width: 18px; height: 18px; color: var(--rs-secondary); }
.rs-post-hero__kicker { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 16px; }
.rs-post-hero__cat { display: inline-flex; align-items: center; gap: .45em; padding: .45rem .8rem; border: 1px solid rgb(var(--rs-primary-rgb) / .5); border-radius: var(--rs-radius-pill); background: rgb(var(--rs-primary-rgb) / .14); color: var(--rs-primary); font-size: .8125rem; font-weight: var(--rs-fw-black); line-height: 1; text-decoration: none; }
.rs-post-hero__cat:hover { background: rgb(var(--rs-primary-rgb) / .24); color: var(--rs-primary-200); }
.rs-post-hero__cat .icon { width: 1.1em; height: 1.1em; }
.rs-post-hero__meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid rgb(var(--rs-primary-rgb) / .3); color: var(--rs-on-dark-3); font-size: .875rem; }
.rs-post-hero__meta > span { display: inline-flex; align-items: center; gap: 7px; }
.rs-post-hero__meta .icon { width: 16px; height: 16px; color: var(--rs-primary); }
.rs-post__prose { max-width: none; color: var(--rs-text-soft); font-size: 1.09375rem; line-height: 1.75; }
.rs-post__prose > p:first-of-type { color: var(--rs-text); font-size: 1.1875rem; line-height: 1.65; }
.rs-post__prose h2, .rs-post__faq-title { margin: 2.1em 0 .75em; color: var(--rs-text); font-size: clamp(1.4375rem, 1rem + .9vw, 1.75rem); letter-spacing: -.01em; line-height: 1.25; }
.rs-post__prose h3 { margin: 1.6em 0 .5em; font-size: 1.25rem; font-weight: var(--rs-fw-black); }
.rs-post__prose :is(p, ul, ol, blockquote, .rs-callout, .rs-table-wrap) { margin-bottom: 1.1em; }
.rs-post__prose :is(ul, ol) { margin-left: 0; padding-left: 1.35em; }
.rs-post__prose li + li { margin-top: .45em; }
.rs-post__prose ul li::marker { color: var(--rs-secondary); }
.rs-post__prose ol li::marker { color: var(--rs-secondary-ink); font-weight: var(--rs-fw-black); }
.rs-post__prose strong { color: var(--rs-text); }
.rs-post__prose .rs-callout { font-size: 1rem; }
.rs-post__faq { margin-top: 2.5rem; }
.rs-post__faq-title { margin-top: 0; }
.rs-faq--post { padding: 0; }
.rs-faq--post .rs-faq__item { margin-bottom: 10px; border-width: 1px; border-color: var(--rs-grey-300); }
.rs-faq--post .rs-faq__item[open] { border-color: var(--rs-primary-100); }
.rs-faq--post .rs-faq__q { padding: 13px 54px 13px 18px; font-size: 1.03125rem; font-weight: var(--rs-fw-black); line-height: 1.4; }
.rs-faq--post .rs-faq__q::after { right: 16px; width: 22px; height: 22px; }
.rs-faq--post .rs-faq__a-inner { padding: 12px 18px 16px; font-size: 1.03125rem; }
.rs-post-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px 28px; margin-top: 2.75rem; padding: 26px 28px; border-top: 3px solid var(--rs-primary); border-radius: var(--rs-radius-md); background: var(--rs-charcoal); color: var(--rs-text-on-dark-soft); }
.rs-post-cta__eyebrow { margin: 0 0 6px; color: var(--rs-primary); font-size: .75rem; font-weight: var(--rs-fw-black); letter-spacing: .16em; text-transform: uppercase; }
.rs-post-cta__title { margin: 0; color: var(--rs-white); font-size: 1.3125rem; font-weight: var(--rs-fw-black); line-height: 1.3; }
.rs-post-cta__text { margin: 8px 0 0; font-size: .96875rem; line-height: 1.55; }
.rs-post-cta__actions { display: grid; gap: 10px; justify-items: start; }
.rs-post-cta__phone { display: inline-flex; align-items: center; gap: 8px; color: var(--rs-white); font-weight: var(--rs-fw-black); text-decoration: none; }
.rs-post-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 2rem; }
.rs-post-tags__label { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--rs-text); font-size: .9375rem; font-weight: var(--rs-fw-black); }
.rs-author-box { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px 18px; margin-top: 1.75rem; padding: 22px; border: 1px solid var(--rs-grey-300); border-radius: var(--rs-radius-md); background: var(--rs-grey); }
.rs-author-box > div > p { margin: 0; }
.rs-author-box__avatar { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border: 2px solid var(--rs-primary-100); border-radius: 50%; background: var(--rs-white); color: var(--rs-secondary); }
.rs-author-box__mark { width: 40px; height: 40px; }
.rs-author-box__label { color: var(--rs-text-muted); font-size: .75rem; font-weight: var(--rs-fw-black); letter-spacing: .14em; text-transform: uppercase; }
.rs-author-box__name { margin-top: 2px; color: var(--rs-text); font-size: 1.125rem; font-weight: var(--rs-fw-black); line-height: 1.3; }
.rs-author-box__role { color: var(--rs-secondary-ink); font-size: .90625rem; font-weight: var(--rs-fw-bold); }
.rs-author-box > div > .rs-author-box__text { margin-top: 8px; color: var(--rs-text-soft); font-size: .9375rem; line-height: 1.6; }
.rs-author-box__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--rs-secondary-ink); font-size: .9375rem; font-weight: var(--rs-fw-black); text-decoration: none; }
.rs-author-box__link .icon { width: 16px; height: 16px; }
.rs-author-box__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.rs-post-note { display: flex; align-items: flex-start; gap: 8px; margin: 1.25rem 0 0; color: var(--rs-text-muted); font-size: .875rem; line-height: 1.55; }
.rs-post-note .icon { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--rs-secondary); }
.rs-post-related { padding: 60px var(--rs-gutter); border-top: 1px solid var(--rs-grey-300); background: var(--rs-white); }
.rs-post-related__inner { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: 32px 56px; max-width: var(--rs-container); margin: 0 auto; }
.rs-post-related__inner--single { grid-template-columns: minmax(0, 1fr); }
.rs-post-related__title, .rs-search-m__title, .rs-rg-list__title, .rs-rg-tags__title, .rs-search-suggest__title { margin: 0 0 18px; color: var(--rs-text); font-size: 1.375rem; line-height: 1.25; }
.rs-rg-link-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.rs-rg-link-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rs-rg-link-cards > li { display: flex; min-width: 0; }
.rs-rg-link-card { position: relative; display: grid; flex: 1 1 auto; grid-template-columns: 40px minmax(0, 1fr); align-content: start; gap: 12px; padding: 16px 16px 18px; border: 1px solid var(--rs-grey-300); border-radius: var(--rs-radius-md); background: var(--rs-white); color: var(--rs-text); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.rs-rg-link-card:hover { border-color: var(--rs-primary-100); box-shadow: 0 8px 22px rgb(var(--rs-charcoal-rgb) / .09); color: var(--rs-text); }
.rs-rg-link-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 7px; background: var(--rs-primary-50); color: var(--rs-secondary-700); }
.rs-rg-link-card__icon .icon { width: 21px; height: 21px; }
.rs-rg-link-card__title { display: block; padding-right: 18px; font-size: .96875rem; font-weight: var(--rs-fw-black); line-height: 1.3; }
.rs-rg-link-card__desc { display: block; margin-top: 4px; color: var(--rs-text-muted); font-size: .875rem; line-height: 1.45; }
.rs-rg-link-card__arrow { position: absolute; top: 18px; right: 14px; width: 16px; height: 16px; color: var(--rs-secondary); transition: transform .15s; }
.rs-rg-link-card:hover .rs-rg-link-card__arrow { transform: translateX(3px); }
.rs-search-m { padding: 48px var(--rs-gutter) 56px; border-top: 1px solid var(--rs-grey-300); background: var(--rs-white); }
.rs-search-m__inner { max-width: 46rem; margin: 0 auto; }
.rs-search-m__title { margin-bottom: 14px; }
.rs-search-m__sub { margin: 26px 0 10px; color: var(--rs-text); font-size: 1rem; font-weight: var(--rs-fw-black); }
@media (max-width: 1023px) { .rs-rg-mbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0 0 32px; } }
.rs-rg-catbar ul { position: relative; display: flex; gap: 8px; margin: 0; padding: 0 0 6px; overflow-x: auto; list-style: none; }
.rs-rg-catbar .rs-catlist__link { flex: none; padding: 8px 14px; border: 1px solid var(--rs-grey-400); border-radius: var(--rs-radius-pill); white-space: nowrap; }
.rs-rg-catbar .rs-catlist__link:hover { padding-left: 14px; }
.rs-rg-list__empty { margin: 0; padding: 24px; border: 1px dashed var(--rs-grey-450); border-radius: var(--rs-radius-md); color: var(--rs-text-soft); }
.rs-sbl__main .rs-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rs-post-card--featured { margin-bottom: 24px; }
.rs-post-card--featured .rs-post-card__title { font-size: clamp(1.25rem, 1rem + .6vw, 1.5rem); }
.rs-post-card__flag { align-self: flex-start; padding: 3px 9px; border-radius: var(--rs-radius-pill); background: var(--rs-primary-50); color: var(--rs-secondary-ink); font-size: .75rem; font-weight: var(--rs-fw-black); letter-spacing: .06em; text-transform: uppercase; }
@media (min-width: 640px) {
  .rs-post-card--featured { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .rs-post-card--featured .rs-post-card__media { aspect-ratio: auto; min-height: 100%; }
}
@media (max-width: 767px) { .rs-sbl__main .rs-post-grid { grid-template-columns: minmax(0, 1fr); } }
.rs-pagination { margin-top: 2.5rem; }
.rs-pagination ul { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rs-pagination__link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 14px; border: 1px solid var(--rs-grey-400); border-radius: var(--rs-radius-sm); background: var(--rs-white); color: var(--rs-secondary-ink); font-weight: var(--rs-fw-bold); text-decoration: none; }
a.rs-pagination__link:hover { border-color: var(--rs-secondary-ink); background: var(--rs-primary-25); }
.rs-pagination__link.is-current { border-color: var(--rs-secondary-ink); background: var(--rs-secondary-ink); color: var(--rs-white); }
.rs-pagination__link .icon { width: 16px; height: 16px; }
.rs-rg-tags, .rs-rg-list + .rs-rg-text { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--rs-grey-300); scroll-margin-top: var(--rs-scroll-offset); }
.rs-rg-tags__title { margin-bottom: 6px; }
.rs-rg-tags__intro { margin: 0 0 16px; color: var(--rs-text-muted); font-size: .9375rem; }
.rs-rg-text { margin: 0 0 2.5rem; }
.rs-rg-tags + .rs-rg-text { margin: 3rem 0 0; }
.rs-rg-text__title { margin: 0 0 1rem; font-size: clamp(1.375rem, 1rem + .8vw, 1.75rem); line-height: 1.25; }
.rs-rg-text .rs-prose { max-width: none; color: var(--rs-text-soft); }
.rs-sbl--search .rs-sbl__inner { row-gap: 24px; }
@media (min-width: 1024px) {
  .rs-sbl--search .rs-sbl__inner { grid-template-areas: "form side" "res side"; grid-template-rows: auto 1fr; }
  .rs-sbl--search .rs-search-main { grid-area: form; }
  .rs-sbl--search .rs-search-main--results { grid-area: res; }
  .rs-sbl--search .rs-sidebar { grid-area: side; }
  .rs-sbl--nofilter .rs-sbl__inner { grid-template-columns: minmax(0, 52rem); grid-template-areas: "form" "res"; }
}
@media (max-width: 1023px) {
  .rs-sidebar--search .rs-widget { padding: 0; border: 0; background: none; box-shadow: none; }
  .rs-sidebar--search .rs-widget__title { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .rs-sidebar--search .rs-search-filter { position: relative; display: flex; gap: 8px; padding-bottom: 6px; overflow-x: auto; }
  .rs-sidebar--search .rs-search-filter__link { flex: none; border: 1px solid var(--rs-grey-400); border-radius: var(--rs-radius-pill); white-space: nowrap; }
  .rs-sidebar--search .rs-search-filter__link.is-current { border-color: var(--rs-secondary-ink); }
}
.rs-search-form--page .rs-search__input { height: 54px; padding-right: 60px; font-size: 1.0625rem; }
.rs-search-form--page .rs-search__submit { width: 52px; height: 52px; }
.rs-search-filter { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.rs-search-filter__link { justify-content: space-between; }
.rs-search-filter__count { min-width: 2em; padding: 1px 8px; border-radius: var(--rs-radius-pill); background: var(--rs-grey); color: var(--rs-text-muted); font-size: .8125rem; font-weight: var(--rs-fw-bold); text-align: center; }
.rs-search-results__summary { margin: 0 0 1.5rem; color: var(--rs-text); font-size: 1.0625rem; font-weight: var(--rs-fw-bold); }
.rs-search-results__notice { margin: 0 0 1.5rem; padding: 14px 16px; border-left: 4px solid var(--rs-secondary-ink); border-radius: 0 var(--rs-radius-md) var(--rs-radius-md) 0; background: var(--rs-primary-25); color: var(--rs-text-soft); }
.rs-search-group + .rs-search-group { margin-top: 2.25rem; }
.rs-search-group__title { margin: 0 0 4px; padding-bottom: 8px; border-bottom: 2px solid var(--rs-grey-300); font-size: 1.25rem; line-height: 1.3; }
.rs-search-group__count { color: var(--rs-text-muted); font-weight: var(--rs-fw-regular); }
.rs-search-hits { margin: 0; padding: 0; list-style: none; }
.rs-search-hit { padding: 14px 0; border-bottom: 1px solid var(--rs-grey-300); }
.rs-search-hit__title { margin: 0; font-size: 1.125rem; font-weight: var(--rs-fw-black); line-height: 1.35; }
.rs-search-hit__title a { color: var(--rs-secondary-ink); text-decoration: none; }
.rs-search-hit__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rs-search-hit__path { margin: 3px 0 0; color: var(--rs-text-muted); font-size: .84375rem; }
.rs-search-hit__snippet { margin: 6px 0 0; color: var(--rs-text-soft); font-size: .96875rem; line-height: 1.6; }
.rs-search-tips { margin: -.75rem 0 2rem 1.25em; color: var(--rs-text-soft); }
.rs-search-suggest { margin-top: 1rem; }
.rs-search-suggest__title { margin-bottom: 8px; }
.rs-search-suggest__intro { margin: 0 0 16px; color: var(--rs-text-soft); }
@media (max-width: 1023px) { .rs-post-related__inner { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .rs-post__prose { font-size: 1.0625rem; }
  .rs-post__prose > p:first-of-type { font-size: 1.125rem; }
  .rs-post-cta { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; }
  .rs-post-cta__actions { justify-items: stretch; }
  .rs-post-cta .rs-btn { width: 100%; }
  .rs-rg-link-cards, .rs-rg-link-cards--2 { grid-template-columns: minmax(0, 1fr); }
  .rs-author-box { grid-template-columns: 52px minmax(0, 1fr); padding: 18px; }
  .rs-author-box__avatar { width: 52px; height: 52px; }
  .rs-author-box__mark { width: 32px; height: 32px; }
  .rs-post-related, .rs-search-m { padding-block: 48px; }
}
@media (max-width: 420px) { .rs-catlist--grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 340px) { .rs-share--tiles .rs-share__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rs-search-404 { padding-block: clamp(2.5rem, 5vw, 3.5rem) 0; text-align: center; }
.rs-search-404 + .rs-section { padding-top: clamp(2.5rem, 5vw, 4rem); }
.rs-search-404__title { margin: 0 0 .5rem; font-size: clamp(1.375rem, 1rem + .8vw, 1.75rem); line-height: 1.25; }
.rs-search-404__text { max-width: 40rem; margin: 0 auto 1.25rem; color: var(--rs-text-soft); }
.rs-search-404 .rs-search-form { max-width: 36rem; margin-inline: auto; text-align: left; }
@media print { .rs-sidebar, .rs-share-m, .rs-search-m, .rs-rg-mbar, .rs-rg-toc-m, .rs-pagination, .rs-search-404 { display: none !important; } .rs-sbl__inner { display: block; } }
/* === Ende B3a: Ratgeber, Seitenleiste, Teilen, Suche === */

/* ===== 23 Behaviour layer ===== */
/* Remaining 06 rules (blocks 1, 8–10). The modules stay functional in main.js;
   A currently emits none of [data-reveal], [data-count-to], [data-lines]. */

/* smooth scrolling after "load" (the initial #hash jump stays instant) */
@media (prefers-reduced-motion: no-preference) {
  html.smooth-scroll { scroll-behavior: smooth; }
}

/* reveal on scroll (proposal) – only when main.js marks the page ready */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    transition:
      opacity var(--rs-dur-reveal) var(--rs-ease-out) var(--reveal-delay, 0ms),
      transform var(--rs-dur-reveal) var(--rs-ease-out) var(--reveal-delay, 0ms);
  }
  .reveal-ready [data-reveal]:not(.is-revealed) {
    opacity: 0;
    transform: var(--reveal-from, translateY(var(--rs-shift)));
  }
  [data-reveal="down"]  { --reveal-from: translateY(calc(-1 * var(--rs-shift))); }
  [data-reveal="left"]  { --reveal-from: translateX(var(--rs-shift)); }
  [data-reveal="right"] { --reveal-from: translateX(calc(-1 * var(--rs-shift))); }
  [data-reveal="fade"]  { --reveal-from: none; }
  [data-reveal="scale"] { --reveal-from: scale(.9); }
}

/* count-up numbers (proposal; confirmed values only) */
[data-count-to] { display: inline-block; font-variant-numeric: tabular-nums; text-align: start; }

/* vertical "data lines" – optional flow animation of the static rs-lines drawing (06 § 4.12) */
.rs-lines { display: block; color: var(--rs-primary); line-height: 0; }
.rs-lines svg { display: block; width: 24px; height: 160px; overflow: visible; }
.rs-lines line { stroke: currentColor; stroke-width: 1.3; stroke-linecap: butt; stroke-dashoffset: 0; }
.rs-lines .rs-lines__l1 { stroke-dasharray: 0 11.98 50.25 18.52 58.42 20.83; --flow: 3.4s; }
.rs-lines .rs-lines__l2 { stroke-dasharray: 118.26 11.37 30.37 0; --flow: 2.6s; }
.rs-lines .rs-lines__l3 { stroke-dasharray: 0 26.74 45.13 24.43 51.73 11.97; --flow: 3.8s; }
@keyframes rs-line-flow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -160; }      /* the pattern travels one full cycle */
}
@media (prefers-reduced-motion: no-preference) {
  .rs-lines.is-animating svg {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  }
  .rs-lines.is-animating line { animation: rs-line-flow var(--flow, 3.2s) linear infinite; }
}

/* filter highlight (glossary) */
[data-filter-item] mark { padding: 0 .1em; border-radius: 2px; background: var(--rs-primary-a32); color: inherit; }

/* ===== 24 Print ===== */
/* 08 B-21: pages print as plain documents (A4, black on white). */
@media print {
  @page { size: A4; margin: 18mm 16mm 20mm; }
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    animation: none !important;
    transition: none !important;
  }
  html { font-size: 10.5pt; }
  .rs-page { display: block; min-height: 0; }   /* no flex shell on paper */
  body::before { content: "ProNet Systems GmbH · www.pronet-systems.de"; display: block; margin: 0 0 8mm; font-weight: 900; }
  .site-top,
  .topbar,
  .nav__drawer,
  .nav__backdrop,
  .mnav,
  .rs-consult,
  .rs-skip-link,
  .rs-consent,
  .rs-lang-hint,
  .rs-lang,
  .rs-toast-region,
  .rs-back-to-top,
  [data-back-to-top],
  .rs-shape,
  .rs-hero::after,
  .rs-page-hero::before,
  .rs-overview-intro::before,
  .mega__cta::before,
  .rs-video__poster,
  .rs-video__notice,
  .rs-toc,
  .rs-form-card,
  .rs-form-band,
  .rs-btn-round,
  .rs-footer__main,
  .rs-footer__extra,
  .rs-ptabs__list,
  .rs-lines,
  .rs-related__lines,
  .rs-vulns__accent,
  .rs-video__figure:has(.rs-media-visual),
  .rs-media-visual,
  .rs-report__visual,
  .rs-hero__network,
  .rs-home-hero__slant,
  .rs-tip__bubble { display: none !important; }
  .rs-hero,
  .rs-home-hero,
  .rs-page-hero,
  .rs-section,
  [class*="rs-section--"] { padding-block: 0 1.5rem !important; }
  .rs-home-hero__inner,
  .rs-page-hero__inner { padding: 0 0 1rem !important; }
  .rs-tone-dark,
  .rs-tone-grey { border: 0 !important; }
  .rs-page-hero__box,
  .rs-panel,
  .rs-card,
  .rs-service-card,
  .rs-why-card,
  .rs-industry-card,
  .rs-icon-card,
  .rs-cta-panel { border: 1px solid #999 !important; }
  a { text-decoration: underline; }
  .rs-prose a[href^="http"]::after,
  .rs-prose a[href^="mailto:"]::after { content: " (" attr(href) ")"; font-size: .85em; overflow-wrap: anywhere; }
  h1, h2, h3, h4 { break-after: avoid; }
  img, svg, figure, tr, .rs-card, .rs-panel, .rs-vuln-card, .rs-step, .rs-callout, .rs-faq__item { break-inside: avoid; }
  thead { display: table-header-group; }
  [role="tabpanel"][hidden] { display: block !important; }
  .rs-btn { padding: 0 !important; border: 0 !important; text-decoration: underline; }
  .rs-table-wrap { overflow: visible !important; border: 0 !important; }
  .rs-table { min-width: 0 !important; }
}

/* ===== 25 Reduced Motion ===== */
/* Global safety net (06 block 19 rewritten for the surviving classes, C-85):
   no animations/transitions, no hover lifts, blinking spinner. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .rs-spinner::before { animation: rs-blink 2000ms linear infinite !important; }   /* CF7: blink instead of spin */
  .rs-btn:hover,
  .rs-btn-round,
  a:hover > .rs-btn-round,
  .rs-service-card:hover,
  .rs-service-card:hover .rs-icon-tile--dark,
  .rs-industry-card:hover,
  .rs-industry-card:hover .rs-icon-tile--dark,
  .rs-link-card:hover,
  a.rs-icon-card:hover,
  .mega__cta-btn:hover,
  .mega__card:hover .mega__arrow,
  .mega__row:hover .mega__arrow,
  .rs-footer__link:hover,
  .rs-footer__link:focus-visible,
  .rs-footer__social:hover,
  .rs-link-more:hover > .icon,
  .rs-video__poster:hover .rs-video__play { transform: none !important; }
  .mega:not([hidden]),
  .rs-consent:not([hidden]),
  .rs-lang-hint:not([hidden]),
  .rs-toast { animation: none !important; }   /* B1a: Regel der Vorlage war ohne Deklarationsblock */
}