/* ============================================================================
   TSMONDO IT-Security & Compliance — Static Design System
   Single stylesheet for the static website. Port of the TSMONDO Design System
   (tokens + components) to plain CSS. Link this one file on every page.
   ========================================================================== */

/* TSMONDO Webfonts - lokal ausgeliefert (2026-08-17).
   Ersetzt den frueheren Fremd-CDN-Import: kein Drittanbieter-Request beim Seitenaufruf,
   keine IP-Uebertragung an Dritte, ein Renderblocker weniger.
   Space Grotesk = Display, IBM Plex Sans = Body, IBM Plex Mono = Labels.
   Inter bleibt definiert, weil aeltere Seiten es noch referenzieren. */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/space-grotesk-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/space-grotesk-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/space-grotesk-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/space-grotesk-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-sans-latin-400-italic.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/inter-300.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter-600.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/inter-700.woff2') format('woff2');}

/* ---- Tokens -------------------------------------------------------------- */
:root {
  /* Slate (cool neutral) */
  --slate-950:#11171A; --slate-900:#1A2226; --slate-800:#273238; --slate-700:#38474F;
  --slate-600:#4F606A; --slate-500:#6A7B85; --slate-400:#8B9AA2; --slate-300:#B4C0C5;
  --slate-200:#D6DDE0; --slate-100:#E9EDEF; --slate-50:#F4F6F7; --white:#FFFFFF;
  /* Secure green */
  --green-900:#0B3D2B; --green-700:#11704F; --green-600:#158463; --green-500:#1F9E76;
  --green-400:#46B894; --green-200:#A9E0CD; --green-100:#D3F0E5; --green-50:#E9F8F1;
  /* Alert coral */
  --coral-700:#B84B2C; --coral-600:#D2603C; --coral-500:#E2734D; --coral-400:#EC8E6E;
  --coral-200:#F6CDBC; --coral-100:#FBE2D8; --coral-50:#FCEEE8;
  /* Functional status */
  --amber-600:#C7891B; --amber-500:#E0A12E; --amber-100:#FBEFCF; --amber-50:#FCF6E6;
  --red-700:#A8352B; --red-600:#C8423A; --red-500:#D8584F; --red-100:#F8D9D5; --red-50:#FCECEA;
  --steel-700:#1F5E7E; --steel-600:#2C7397; --steel-500:#3D89AE; --steel-100:#D5E8F1; --steel-50:#EAF3F8;

  /* Semantic aliases */
  --brand:var(--green-600); --brand-strong:var(--green-700); --brand-accent:var(--coral-500); --brand-ink:var(--slate-900);
  --surface-page:var(--slate-50); --surface-card:var(--white); --surface-sunken:var(--slate-100);
  --surface-inverse:var(--slate-900); --surface-brand:var(--green-600); --surface-brand-soft:var(--green-50); --surface-accent-soft:var(--coral-50);
  --text-strong:var(--slate-900); --text-body:var(--slate-700); --text-muted:var(--slate-600); --text-subtle:var(--slate-500);
  --text-on-brand:var(--white); --text-on-inverse:var(--slate-100); --text-link:var(--green-700);
  --border-subtle:var(--slate-200); --border-default:var(--slate-300); --border-strong:var(--slate-400); --border-brand:var(--green-500);
  --ring-focus:color-mix(in srgb, var(--green-500) 45%, transparent);
  --status-success:var(--green-600); --status-success-soft:var(--green-50); --status-success-text:var(--green-700);
  --status-warning:var(--amber-500); --status-warning-soft:var(--amber-50); --status-warning-text:var(--amber-600);
  --status-danger:var(--red-600); --status-danger-soft:var(--red-50); --status-danger-text:var(--red-700);
  --status-info:var(--steel-600); --status-info-soft:var(--steel-50); --status-info-text:var(--steel-700);
  --status-attention:var(--coral-500); --status-attention-soft:var(--coral-50); --status-attention-text:var(--coral-700);

  /* Type */
  --font-display:"Space Grotesk","IBM Plex Sans",system-ui,sans-serif;
  --font-sans:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --text-2xs:0.6875rem; --text-xs:0.75rem; --text-sm:0.875rem; --text-md:1rem; --text-lg:1.125rem;
  --text-xl:1.375rem; --text-2xl:1.75rem; --text-3xl:2.25rem; --text-4xl:3rem; --text-5xl:4rem;
  --lh-tight:1.1; --lh-snug:1.25; --lh-normal:1.5; --lh-relaxed:1.65;
  --tracking-tight:-0.02em; --tracking-normal:0; --tracking-wide:0.04em; --tracking-label:0.12em;

  /* Spacing / radii / motion */
  --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:2.5rem; --space-8:3rem; --space-9:4rem; --space-10:5rem; --space-12:6rem;
  --radius-xs:3px; --radius-sm:5px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-2xl:24px; --radius-pill:999px;
  --container-lg:1120px; --container-xl:1320px; --nav-h:68px;
  --control-sm:32px; --control-md:40px; --control-lg:48px;
  --ease-standard:cubic-bezier(0.4,0,0.2,1); --ease-out:cubic-bezier(0.16,1,0.3,1);
  --dur-fast:120ms; --dur-medium:200ms; --dur-slow:320ms;

  /* Elevation */
  --shadow-xs:0 1px 2px rgba(17,23,26,0.06);
  --shadow-sm:0 1px 2px rgba(17,23,26,0.06),0 2px 6px rgba(17,23,26,0.05);
  --shadow-md:0 2px 4px rgba(17,23,26,0.05),0 8px 20px rgba(17,23,26,0.08);
  --shadow-lg:0 4px 8px rgba(17,23,26,0.06),0 18px 40px rgba(17,23,26,0.12);
  --shadow-brand:0 6px 18px rgba(21,132,99,0.22);
  --shadow-inset:inset 0 1px 2px rgba(17,23,26,0.08);
  --focus-ring:0 0 0 3px var(--ring-focus);
}

/* ---- Base --------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--surface-card); color:var(--text-body);
  font-family:var(--font-sans); font-size:var(--text-md); line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  padding-top:var(--nav-h);
}
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:var(--fw-semibold); color:var(--text-strong); letter-spacing:var(--tracking-tight); line-height:var(--lh-snug); margin:0; }
p{ margin:0; }
a{ color:var(--text-link); text-decoration:none; }
a:hover{ text-decoration:underline; }
img,svg{ display:block; max-width:100%; }
:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius-xs); }

/* ---- Layout helpers ----------------------------------------------------- */
.tsm-container{ max-width:var(--container-lg); margin:0 auto; padding:0 32px; }
.tsm-section{ padding:76px 0; }
.tsm-section--alt{ background:var(--surface-page); border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); }
.tsm-eyebrow{ font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--green-700); }
.tsm-head{ max-width:62ch; }
.tsm-head h2{ font-size:var(--text-3xl); margin:10px 0 0; }
.tsm-head p{ font-size:var(--text-lg); color:var(--text-muted); margin:14px 0 0; line-height:var(--lh-relaxed); }
.tsm-grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.tsm-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tsm-grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }

/* ===========================================================================
   COMPONENTS (verbatim port of the TSMONDO Design System primitives)
   ========================================================================= */

/* Button */
.tsm-btn{
  --_bg:var(--green-600); --_fg:var(--white); --_bd:transparent; --_bgh:var(--green-700); --_bga:var(--green-900);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-sans); font-weight:var(--fw-semibold); white-space:nowrap;
  border:1px solid var(--_bd); background:var(--_bg); color:var(--_fg);
  border-radius:var(--radius-md); cursor:pointer; text-decoration:none;
  height:var(--control-md); padding:0 16px; font-size:var(--text-sm);
  transition:background var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.tsm-btn:hover{ background:var(--_bgh); text-decoration:none; }
.tsm-btn:active{ background:var(--_bga); transform:translateY(0.5px); }
.tsm-btn:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.tsm-btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }
.tsm-btn--sm{ height:var(--control-sm); padding:0 12px; font-size:var(--text-sm); }
.tsm-btn--lg{ height:var(--control-lg); padding:0 22px; font-size:var(--text-md); }
.tsm-btn--block{ width:100%; }
.tsm-btn--primary{ box-shadow:var(--shadow-brand); }
.tsm-btn--secondary{ --_bg:var(--white); --_fg:var(--slate-800); --_bd:var(--border-default); --_bgh:var(--slate-50); --_bga:var(--slate-100); box-shadow:var(--shadow-xs); }
.tsm-btn--ghost{ --_bg:transparent; --_fg:var(--slate-700); --_bd:transparent; --_bgh:var(--slate-100); --_bga:var(--slate-200); }
.tsm-btn--danger{ --_bg:var(--red-600); --_fg:var(--white); --_bgh:var(--red-700); --_bga:var(--red-700); }
.tsm-btn--accent{ --_bg:var(--coral-700); --_fg:var(--white); --_bgh:var(--coral-700); --_bga:var(--coral-700); }
.tsm-btn__icon{ display:inline-flex; width:1.1em; height:1.1em; }
.tsm-btn__icon svg{ width:100%; height:100%; }

/* Card */
.tsm-card{ display:flex; flex-direction:column; background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); overflow:hidden; }
.tsm-card--flat{ box-shadow:none; }
.tsm-card--sunken{ background:var(--surface-sunken); box-shadow:none; }
.tsm-card--interactive{ cursor:pointer; transition:box-shadow var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); }
.tsm-card--interactive:hover{ box-shadow:var(--shadow-md); border-color:var(--border-default); }
.tsm-card--interactive:active{ transform:translateY(0.5px); }
.tsm-card[data-accent]{ border-top:none; }
.tsm-card[data-accent]::before{ content:""; height:3px; width:100%; flex:none; }
.tsm-card[data-accent="brand"]::before{ background:var(--green-500); }
.tsm-card[data-accent="attention"]::before{ background:var(--coral-500); }
.tsm-card[data-accent="warning"]::before{ background:var(--amber-500); }
.tsm-card[data-accent="danger"]::before{ background:var(--red-500); }
.tsm-card[data-accent="info"]::before{ background:var(--steel-500); }
.tsm-card__header{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:var(--space-5) var(--space-5) 0; }
.tsm-card__titles{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.tsm-card__eyebrow{ font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--text-subtle); }
.tsm-card__title{ font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--text-lg); color:var(--text-strong); line-height:var(--lh-snug); margin:0; }
.tsm-card__body{ padding:var(--space-5); color:var(--text-body); font-size:var(--text-sm); line-height:var(--lh-normal); }
.tsm-card__footer{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-4) var(--space-5); border-top:1px solid var(--border-subtle); background:var(--slate-50); }

/* Badge */
.tsm-badge{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-weight:var(--fw-medium); font-size:var(--text-2xs); letter-spacing:0.02em; line-height:1; padding:4px 9px; border-radius:var(--radius-pill); border:1px solid transparent; white-space:nowrap; }
.tsm-badge--md{ font-size:var(--text-xs); padding:5px 11px; }
.tsm-badge__dot{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.tsm-badge--neutral{ background:var(--slate-100); color:var(--slate-600); border-color:var(--slate-200); }
.tsm-badge--success{ background:var(--status-success-soft); color:var(--status-success-text); border-color:var(--green-200); }
.tsm-badge--warning{ background:var(--status-warning-soft); color:var(--status-warning-text); border-color:var(--amber-100); }
.tsm-badge--danger{ background:var(--status-danger-soft); color:var(--status-danger-text); border-color:var(--red-100); }
.tsm-badge--info{ background:var(--status-info-soft); color:var(--status-info-text); border-color:var(--steel-100); }
.tsm-badge--attention{ background:var(--status-attention-soft); color:var(--status-attention-text); border-color:var(--coral-200); }

/* Callout */
.tsm-callout{ display:flex; gap:12px; align-items:flex-start; border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:var(--space-4); background:var(--surface-card); font-family:var(--font-sans); }
.tsm-callout__icon{ display:inline-flex; width:18px; height:18px; flex:none; margin-top:1px; }
.tsm-callout__icon svg{ width:100%; height:100%; }
.tsm-callout__body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.tsm-callout__title{ font-weight:var(--fw-semibold); font-size:var(--text-sm); color:var(--text-strong); }
.tsm-callout__text{ font-size:var(--text-sm); color:var(--text-body); line-height:var(--lh-normal); }
.tsm-callout--success{ background:var(--status-success-soft); border-color:var(--green-200); }
.tsm-callout--success .tsm-callout__icon{ color:var(--status-success); }
.tsm-callout--warning{ background:var(--status-warning-soft); border-color:var(--amber-100); }
.tsm-callout--warning .tsm-callout__icon{ color:var(--status-warning-text); }
.tsm-callout--danger{ background:var(--status-danger-soft); border-color:var(--red-100); }
.tsm-callout--danger .tsm-callout__icon{ color:var(--status-danger); }
.tsm-callout--info{ background:var(--status-info-soft); border-color:var(--steel-100); }
.tsm-callout--info .tsm-callout__icon{ color:var(--status-info); }

/* StatTile */
.tsm-stat{ display:flex; flex-direction:column; gap:6px; background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-md); box-shadow:var(--shadow-xs); padding:var(--space-4) var(--space-5); min-width:0; font-family:var(--font-sans); }
.tsm-stat__top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tsm-stat__label{ font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--text-subtle); }
.tsm-stat__value{ font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--text-3xl); color:var(--text-strong); letter-spacing:var(--tracking-tight); line-height:1; }
.tsm-stat__value small{ font-size:var(--text-lg); color:var(--text-muted); font-weight:var(--fw-medium); margin-left:2px; }
.tsm-stat__foot{ display:flex; align-items:center; gap:6px; font-size:var(--text-xs); color:var(--text-muted); }
.tsm-stat__delta{ display:inline-flex; align-items:center; gap:3px; font-family:var(--font-mono); font-weight:var(--fw-medium); }
.tsm-stat__delta svg{ width:13px; height:13px; }
.tsm-stat__delta--up{ color:var(--status-success-text); }
.tsm-stat__delta--down{ color:var(--status-danger-text); }
.tsm-stat__delta--flat{ color:var(--text-muted); }

/* PostureMeter (radial gauge) */
.tsm-posture{ display:inline-flex; flex-direction:column; align-items:center; gap:8px; font-family:var(--font-sans); }
.tsm-posture__ring{ position:relative; display:grid; place-items:center; }
.tsm-posture__ring svg{ transform:rotate(-90deg); display:block; }
.tsm-posture__track{ stroke:var(--slate-100); }
.tsm-posture__value-circle{ transition:stroke-dashoffset var(--dur-slow) var(--ease-out); }
.tsm-posture__center{ position:absolute; display:flex; flex-direction:column; align-items:center; line-height:1; }
.tsm-posture__num{ font-family:var(--font-display); font-weight:var(--fw-semibold); color:var(--text-strong); letter-spacing:var(--tracking-tight); }
.tsm-posture__pct{ font-size:0.5em; color:var(--text-muted); font-weight:var(--fw-medium); }
.tsm-posture__label{ font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--text-subtle); }

/* ===========================================================================
   BRAND MARK + LOCKUP
   ========================================================================= */
.tsm-mark{ width:auto; height:1em; }
.tsm-lockup{ display:inline-flex; align-items:center; gap:0.5em; text-decoration:none; }
.tsm-lockup:hover{ text-decoration:none; }
.tsm-lockup .tsm-mark{ height:2.2em; }
.tsm-lockup__words{ display:flex; flex-direction:column; gap:2px; line-height:1; }
.tsm-lockup__name{ font-family:var(--font-display); font-weight:var(--fw-semibold); color:var(--text-strong); font-size:1.05rem; letter-spacing:0.11em; padding-left:0.05em; }
.tsm-lockup__tag{ font-family:var(--font-mono); font-weight:var(--fw-medium); color:var(--text-muted); font-size:0.5rem; letter-spacing:0.14em; text-transform:uppercase; }

/* ===========================================================================
   NAV (global include)
   ========================================================================= */
.tsm-nav{ position:fixed; top:0; left:0; right:0; z-index:50; height:var(--nav-h); background:color-mix(in srgb, var(--surface-card) 88%, transparent); backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--border-subtle); }
.tsm-nav__in{ display:flex; align-items:center; gap:24px; height:100%; max-width:var(--container-lg); margin:0 auto; padding:0 32px; }
.tsm-nav__spacer{ flex:1; }
.tsm-nav__links{ display:flex; gap:26px; align-items:center; }
.tsm-nav__links a{ font-size:var(--text-sm); font-weight:var(--fw-medium); color:var(--text-body); }
.tsm-nav__links a:hover{ color:var(--text-strong); text-decoration:none; }
.tsm-nav__toggle{ display:none; width:44px; height:44px; align-items:center; justify-content:center; background:none; border:1px solid var(--border-default); border-radius:var(--radius-sm); color:var(--text-strong); cursor:pointer; }
.tsm-nav__toggle svg{ width:22px; height:22px; }
.tsm-nav__link{ font-size:var(--text-sm); font-weight:var(--fw-medium); color:var(--text-body); }
.tsm-nav__link:hover{ color:var(--text-strong); text-decoration:none; }

/* Dropdown ------------------------------------------------------------------- */
.tsm-nav__item{ position:relative; display:flex; align-items:center; }
.tsm-nav__item--dd > .tsm-nav__btn{ display:inline-flex; align-items:center; gap:4px; padding:0; background:none; border:0; font:inherit; font-size:var(--text-sm); font-weight:var(--fw-medium); color:var(--text-body); cursor:pointer; line-height:1; }
.tsm-nav__item--dd > .tsm-nav__btn:hover{ color:var(--text-strong); }
.tsm-nav__chev{ width:12px; height:12px; opacity:.7; transition:transform .15s ease; }
.tsm-nav__item.is-open .tsm-nav__chev{ transform:rotate(180deg); }
.tsm-nav__dd{ position:absolute; top:calc(100% + 10px); left:-12px; min-width:300px; display:none; flex-direction:column; gap:2px; background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); padding:8px; z-index:60; }
.tsm-nav__dd::before{ content:""; position:absolute; left:0; right:0; top:-10px; height:10px; }
.tsm-nav__dd a{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:var(--radius-sm); font-size:var(--text-sm); color:var(--text-strong); }
.tsm-nav__dd a:hover{ background:var(--slate-50); text-decoration:none; }
.tsm-nav__dd-t{ font-weight:var(--fw-semibold); color:var(--text-strong); }
.tsm-nav__dd a:hover .tsm-nav__dd-t{ color:var(--green-700); }
.tsm-nav__dd-s{ font-size:var(--text-xs); color:var(--text-muted); }
@media (hover:hover) and (min-width:992px){
  .tsm-nav__item--dd:hover > .tsm-nav__dd{ display:flex; }
  .tsm-nav__item--dd:hover > .tsm-nav__btn{ color:var(--text-strong); }
  .tsm-nav__item--dd:hover .tsm-nav__chev{ transform:rotate(180deg); }
}
.tsm-nav__item.is-open > .tsm-nav__dd{ display:flex; }

/* ===========================================================================
   NIS-2 COMBO-BANNER (Homepage, direkt nach Hero)
   ========================================================================= */
.tsm-nis2{ padding:48px 0 8px; background:var(--surface-page); }
.tsm-nis2__in{ max-width:var(--container-lg); margin:0 auto; padding:0 32px; }
.tsm-nis2__head{ display:flex; flex-direction:column; gap:6px; margin-bottom:22px; }
.tsm-nis2__head .tsm-eyebrow{ color:var(--green-700); }
.tsm-nis2__head h2{ font-size:var(--text-3xl); margin:0; letter-spacing:var(--tracking-tight); }
.tsm-nis2__head p{ font-size:var(--text-md); color:var(--text-muted); margin:6px 0 0; max-width:60ch; }
.tsm-nis2__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tsm-nis2-card{ display:flex; flex-direction:column; gap:10px; background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow-sm); transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; position:relative; overflow:hidden; }
.tsm-nis2-card:hover{ border-color:var(--green-200, #BBE6D4); box-shadow:var(--shadow-md); transform:translateY(-1px); }
.tsm-nis2-card__badge{ display:inline-flex; align-items:center; gap:6px; align-self:flex-start; font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; border-radius:999px; background:var(--green-50); color:var(--green-700); }
.tsm-nis2-card h3{ font-size:var(--text-xl); margin:0; letter-spacing:var(--tracking-tight); }
.tsm-nis2-card__price{ display:flex; align-items:baseline; gap:6px; font-family:var(--font-display); }
.tsm-nis2-card__price b{ font-size:var(--text-2xl); color:var(--text-strong); font-weight:var(--fw-semibold); }
.tsm-nis2-card__price span{ font-size:var(--text-sm); color:var(--text-muted); }
.tsm-nis2-card p{ font-size:var(--text-sm); color:var(--text-body); line-height:var(--lh-normal); margin:0; }
.tsm-nis2-card ul{ list-style:none; padding:0; margin:4px 0 6px; display:flex; flex-direction:column; gap:6px; }
.tsm-nis2-card li{ display:flex; align-items:flex-start; gap:8px; font-size:var(--text-sm); color:var(--text-body); }
.tsm-nis2-card li svg{ width:14px; height:14px; color:var(--green-600); flex:none; margin-top:3px; }
.tsm-nis2-card__cta{ margin-top:auto; align-self:flex-start; }
.tsm-nis2-card--featured{ border-color:var(--green-200, #BBE6D4); background:linear-gradient(180deg, #F4FBF7 0%, var(--surface-card) 70%); }
.tsm-nis2-card--featured::after{ content:"Empfohlen"; position:absolute; top:14px; right:14px; font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.08em; text-transform:uppercase; color:var(--green-700); background:#fff; border:1px solid var(--green-200, #BBE6D4); border-radius:999px; padding:3px 8px; }
.tsm-nis2-card__bsi{ display:flex; align-items:flex-start; gap:8px; font-size:var(--text-xs)!important; color:var(--text-strong)!important; background:#F0F9F5; border:1px solid #BBE6D4; border-radius:var(--radius-sm); padding:8px 10px; line-height:var(--lh-normal)!important; }
.tsm-nis2-card__bsi svg{ width:15px; height:15px; flex:none; color:var(--green-700); margin-top:1px; }
.tsm-nis2-card__bsi b{ color:var(--green-700); font-weight:var(--fw-semibold); }

/* Sticky NIS-2 Bar ----------------------------------------------------------- */
.tsm-nis2-stick{ position:fixed; left:0; right:0; bottom:0; z-index:55; padding:10px 0; background:color-mix(in srgb, var(--slate-900) 96%, transparent); color:#fff; transform:translateY(110%); transition:transform .25s ease; box-shadow:0 -8px 28px rgba(15,23,42,.18); }
.tsm-nis2-stick.is-open{ transform:translateY(0); }
.tsm-nis2-stick__in{ max-width:var(--container-lg); margin:0 auto; padding:0 32px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.tsm-nis2-stick__txt{ flex:1; font-size:var(--text-sm); color:#E2E8F0; }
.tsm-nis2-stick__txt b{ color:#fff; }
.tsm-nis2-stick a.tsm-btn{ --_bg:var(--green-700); --_fg:#fff; --_bd:transparent; --_bgh:var(--green-900); --_bga:var(--green-900); }
.tsm-nis2-stick__close{ background:none; border:0; color:#94A3B8; cursor:pointer; padding:6px; line-height:0; border-radius:var(--radius-sm); }
.tsm-nis2-stick__close:hover{ color:#fff; background:rgba(255,255,255,.08); }
.tsm-nis2-stick__close svg{ width:18px; height:18px; }

/* ===========================================================================
   FOOTER (global include)
   ========================================================================= */
.tsm-footer{ padding:48px 0 40px; border-top:1px solid var(--border-subtle); background:var(--surface-page); }
.tsm-footer__in{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; max-width:var(--container-lg); margin:0 auto; padding:0 32px; }
.tsm-footer__col h4{ font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--text-subtle); font-weight:var(--fw-medium); margin:0 0 12px; }
.tsm-footer__col a{ display:block; font-size:var(--text-sm); color:var(--text-body); padding:4px 0; }
.tsm-footer__col a:hover{ color:var(--text-strong); text-decoration:none; }
.tsm-footer__intro p{ font-size:var(--text-sm); color:var(--text-muted); margin:14px 0 0; max-width:36ch; line-height:var(--lh-normal); }
.tsm-footer__bottom{ max-width:var(--container-lg); margin:28px auto 0; padding:18px 32px 0; border-top:1px solid var(--border-subtle); display:flex; gap:16px; flex-wrap:wrap; }
.tsm-footer__bottom small{ font-size:var(--text-xs); color:var(--text-subtle); }
.tsm-footer__bottom .tsm-footer__spacer{ flex:1; }

/* ===========================================================================
   HOMEPAGE SECTIONS
   ========================================================================= */
.site__hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--border-subtle); background:var(--surface-page); }
.site__hero-grid{ display:grid; grid-template-columns:1.25fr 0.75fr; gap:40px; align-items:center; padding:84px 0 88px; max-width:var(--container-lg); margin:0 auto; padding-left:32px; padding-right:32px; }
.site__hero-texture{ position:absolute; inset:0; pointer-events:none; opacity:0.5;
  background-image:radial-gradient(circle at 78% 30%, var(--green-50) 0%, transparent 42%),
    repeating-linear-gradient(0deg, transparent 0 38px, var(--slate-100) 38px 39px),
    repeating-linear-gradient(90deg, transparent 0 38px, var(--slate-100) 38px 39px);
  -webkit-mask-image:linear-gradient(120deg, transparent 30%, #000 90%); mask-image:linear-gradient(120deg, transparent 30%, #000 90%); }
.site__hero h1{ font-size:var(--text-5xl); line-height:var(--lh-tight); margin:16px 0 0; max-width:14ch; }
.site__hero p{ font-size:var(--text-lg); line-height:var(--lh-relaxed); color:var(--text-body); max-width:50ch; margin:20px 0 0; }
.site__hero-cta{ display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; }
.site__hero-col{ position:relative; }
.site__hero-panel{ position:relative; background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); padding:26px; display:flex; flex-direction:column; gap:18px; }
.site__hero-panel-head{ display:flex; align-items:center; justify-content:space-between; }
.site__hero-panel-rows{ display:flex; flex-direction:column; gap:10px; }
.site__hero-row{ display:flex; align-items:center; gap:10px; font-size:var(--text-sm); color:var(--text-body); }
.site__hero-row svg{ width:16px; height:16px; flex:none; color:var(--text-muted); }
.site__hero-row .nm{ flex:1; color:var(--text-strong); font-weight:var(--fw-medium); }

.site__trust{ padding:30px 0; border-bottom:1px solid var(--border-subtle); }
.site__trust-in{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; max-width:var(--container-lg); margin:0 auto; padding:0 32px; }
.site__trust-lab{ font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--text-subtle); }
.site__trust-fw{ display:flex; gap:10px; flex-wrap:wrap; }

.site__services{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:38px; }
.site__svc-ic{ width:40px; height:40px; border-radius:var(--radius-md); display:grid; place-items:center; background:var(--green-50); color:var(--green-700); margin-bottom:4px; }
.site__svc-ic svg{ width:20px; height:20px; }
.site__svc h3{ font-size:var(--text-xl); margin:0; }
.site__svc p{ font-size:var(--text-sm); color:var(--text-body); line-height:var(--lh-normal); margin:8px 0 0; }
.site__svc ul{ list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; gap:7px; }
.site__svc li{ display:flex; align-items:center; gap:8px; font-size:var(--text-sm); color:var(--text-muted); }
.site__svc li svg{ width:15px; height:15px; color:var(--green-600); flex:none; }

.site__stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:38px; }

.site__about{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:40px; align-items:center; max-width:var(--container-lg); margin:0 auto; padding:0 32px; }
.site__about-card{ background:var(--slate-900); color:var(--text-on-inverse); border-radius:var(--radius-xl); padding:34px; display:flex; flex-direction:column; gap:14px; }
.site__about-avatar{ width:64px; height:64px; border-radius:50%; background:var(--green-600); color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:24px; }
.site__about-card .nm{ font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--text-xl); color:#fff; }
.site__about-card .rl{ font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--slate-400); }
.site__about-quote{ font-size:var(--text-md); line-height:var(--lh-relaxed); color:var(--slate-200); }
.site__about h2{ font-size:var(--text-3xl); margin:10px 0 0; }
.site__about p{ font-size:var(--text-md); color:var(--text-body); line-height:var(--lh-relaxed); margin:14px 0 0; }

.site__cta{ background:var(--green-700); color:#fff; border-radius:var(--radius-2xl); padding:56px; text-align:center; position:relative; overflow:hidden; }
.site__cta h2{ color:#fff; font-size:var(--text-4xl); margin:0 auto; max-width:18ch; }
.site__cta p{ font-size:var(--text-lg); color:var(--green-100); margin:16px auto 0; max-width:48ch; }
.site__cta-actions{ display:flex; gap:12px; justify-content:center; margin-top:28px; flex-wrap:wrap; }
.site__cta .tsm-btn--secondary{ --_bg:var(--white); --_fg:var(--green-700); --_bd:transparent; }
.site__cta .tsm-btn--ghost{ --_fg:#fff; --_bgh:rgba(255,255,255,0.14); --_bga:rgba(255,255,255,0.2); }

/* ===========================================================================
   LEGAL DOCUMENTS (AGB / Servicevertrag / AVV — legacy markup, on-brand styling)
   ========================================================================= */
body.legal .hero{ display:none; } /* redundant empty hero on legal pages */
body.legal .page-header{ max-width:var(--container-lg); margin:0 auto; padding:64px 32px 8px; text-align:left; }
body.legal .page-header h1{ font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--text-4xl); color:var(--text-strong); letter-spacing:var(--tracking-tight); line-height:var(--lh-tight); margin:0; }
body.legal .page-header p{ font-size:var(--text-lg); color:var(--text-muted); margin:14px 0 0; }
.legal-content{ max-width:820px; margin:0 auto; padding:24px 32px 76px; }
.legal-page{ display:flex; flex-direction:column; gap:8px; }
.legal-hint{ display:flex; gap:12px; align-items:flex-start; background:var(--status-info-soft); border:1px solid var(--steel-100); border-radius:var(--radius-md); padding:var(--space-4); margin:8px 0 20px; font-size:var(--text-sm); color:var(--text-body); line-height:var(--lh-normal); }
.legal-hint strong{ color:var(--text-strong); }
.legal-toc{ background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); padding:20px 24px; margin:0 0 28px; }
.legal-toc h3{ font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--text-subtle); font-weight:var(--fw-medium); margin:0 0 12px; }
.legal-toc ol{ margin:0; padding-left:20px; display:grid; gap:6px; }
.legal-toc li{ font-size:var(--text-sm); }
.legal-toc a{ color:var(--text-link); }
.legal-section{ padding:18px 0; border-top:1px solid var(--border-subtle); }
.legal-section:first-of-type{ border-top:none; }
.legal-section h2{ font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--text-2xl); color:var(--text-strong); letter-spacing:var(--tracking-tight); margin:0 0 10px; }
.legal-section h3{ font-size:var(--text-lg); color:var(--text-strong); margin:18px 0 6px; }
.legal-section p,.legal-section li{ font-size:var(--text-md); color:var(--text-body); line-height:var(--lh-relaxed); margin:0 0 10px; }
.legal-section ul,.legal-section ol{ padding-left:20px; margin:0 0 12px; }
.legal-section strong{ color:var(--text-strong); }
.legal-section a{ color:var(--text-link); }
.legal-section table{ width:100%; border-collapse:collapse; font-size:var(--text-sm); margin:12px 0; }
.legal-section th,.legal-section td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--border-subtle); }
.legal-section th{ font-family:var(--font-mono); font-size:var(--text-2xs); letter-spacing:.08em; text-transform:uppercase; color:var(--text-subtle); }
.btn-print{ display:inline-flex; align-items:center; gap:8px; height:var(--control-sm); padding:0 12px; font-family:var(--font-sans); font-weight:var(--fw-semibold); font-size:var(--text-sm); color:var(--slate-800); background:var(--white); border:1px solid var(--border-default); border-radius:var(--radius-md); box-shadow:var(--shadow-xs); cursor:pointer; }
.btn-print:hover{ background:var(--slate-50); }

/* ===========================================================================
   RESPONSIVE — mobile-first / 375px (the kit had no breakpoints)
   ========================================================================= */
@media (max-width:960px){
  .tsm-grid-4,.site__stats{ grid-template-columns:repeat(2,1fr); }
  .site__hero-grid{ grid-template-columns:minmax(0,1fr); gap:32px; padding-top:56px; padding-bottom:56px; }
  .site__about{ grid-template-columns:1fr; gap:28px; }
  .tsm-footer__in{ grid-template-columns:1fr 1fr; gap:24px; }
}
@media (max-width:760px){
  .tsm-nav__links{ display:none; }
  .tsm-nav__toggle{ display:inline-flex; }
  .tsm-nav.is-open .tsm-nav__links{ display:flex; position:absolute; top:var(--nav-h); left:0; right:0; flex-direction:column; gap:0; background:var(--surface-card); border-bottom:1px solid var(--border-subtle); padding:8px 0; max-height:calc(100vh - var(--nav-h)); overflow-y:auto; }
  .tsm-nav.is-open .tsm-nav__links > a{ padding:14px 32px; min-height:48px; display:flex; align-items:center; }
  .tsm-nav.is-open .tsm-nav__links .tsm-btn{ margin:8px 32px; }
  .tsm-nav.is-open .tsm-nav__item--dd{ display:flex; flex-direction:column; align-items:stretch; }
  .tsm-nav.is-open .tsm-nav__item--dd > .tsm-nav__btn{ width:100%; padding:14px 32px; justify-content:space-between; min-height:48px; }
  .tsm-nav.is-open .tsm-nav__item--dd > .tsm-nav__dd{ position:static; display:none; box-shadow:none; border:0; border-radius:0; padding:0 0 8px; background:var(--slate-50); }
  .tsm-nav.is-open .tsm-nav__item.is-open > .tsm-nav__dd{ display:flex; }
  .tsm-nav.is-open .tsm-nav__item--dd > .tsm-nav__dd a{ padding:12px 32px 12px 44px; min-height:48px; }
  .tsm-section{ padding:52px 0; }
  .tsm-container,.site__hero-grid,.site__trust-in,.site__about,.tsm-nav__in,.tsm-footer__in,.tsm-nis2__in{ padding-left:20px; padding-right:20px; }
  .site__services,.tsm-grid-2,.tsm-grid-3{ grid-template-columns:1fr; }
  .tsm-nis2__grid{ grid-template-columns:1fr; }
  .tsm-nis2{ padding:36px 0 8px; }
  .site__cta{ padding:36px 22px; }
  .tsm-nis2-stick__in{ padding:0 20px; gap:10px; }
  .tsm-nis2-stick__txt{ font-size:var(--text-xs); flex:1 1 100%; }
}
@media (max-width:520px){
  .tsm-grid-4,.site__stats{ grid-template-columns:1fr; }
  .tsm-footer__in{ grid-template-columns:1fr; }
  :root{ --text-5xl:2.75rem; --text-4xl:2.25rem; --text-3xl:1.875rem; }
}
@media (prefers-reduced-motion:reduce){ *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; } }

/* ===========================================================================
   LEGACY COMPATIBILITY LAYER
   Re-points the old "Pristine Shield" (light) and "Sentinel Lens" (dark) design
   tokens at the TSMONDO palette/fonts. Because tsmondo.css is linked AFTER the
   old stylesheet, these :root values win — so legacy pages recolor to TSMONDO
   without touching their markup. Force light; the brand is light-only.
   ========================================================================= */
:root, html[data-theme="dark"]{
  /* Pristine Shield (light) */
  --bg: var(--slate-50);
  --bg-card: var(--white);
  --text: var(--slate-900);
  --text-muted: var(--slate-600);
  --text-sub: var(--slate-500);
  --primary: var(--green-600);
  --primary-light: var(--green-500);
  --primary-dark: var(--green-700);
  --primary-container: var(--green-200);
  --border: var(--slate-200);
  --surface: var(--white);
  --nav-bg: rgba(255,255,255,0.85);
  --glass: var(--white);
  --glass-border: var(--slate-200);
  --glow: rgba(21,132,99,0.10);
  --glow-strong: rgba(21,132,99,0.18);
  --grid-color: rgba(139,154,162,0.08);
  --accent: var(--green-500);
  --danger: var(--red-600);
  --secondary: var(--coral-500);
  --shadow: var(--shadow-sm);
  --shadow-glow: var(--shadow-brand);
  --hero-gradient-start: var(--slate-100);
  --hero-gradient-end: var(--green-600);
  --footer-bg: var(--slate-50);
  --elevated-bg: var(--slate-100);
  --form-bg: var(--slate-50);
  --input-bg: var(--white);
  --input-border: var(--slate-300);
  --input-text: var(--slate-900);
  --nav-cta-text: #fff;
  --btn-primary-text: #fff;
  --logo-filter: none;
  /* Sentinel Lens (was dark) — forced to light TSMONDO */
  --sl-bg: var(--slate-50);
  --sl-bg-elevated: var(--white);
  --sl-bg-card: var(--white);
  --sl-primary: var(--green-600);
  --sl-primary-light: var(--green-500);
  --sl-primary-dark: var(--green-700);
  --sl-text: var(--slate-900);
  --sl-text-muted: var(--slate-600);
  --sl-text-bright: var(--slate-900);
  --sl-subtext: var(--slate-500);
  --sl-accent: var(--green-500);
  --sl-danger: var(--red-600);
  --sl-secondary: var(--coral-500);
  --sl-border: var(--slate-200);
  --sl-glow: rgba(21,132,99,0.20);
  --sl-glow-strong: rgba(21,132,99,0.40);
  --sl-glass: var(--white);
  --sl-glass-border: var(--slate-200);
  --sl-grid-color: rgba(139,154,162,0.05);
  /* style.css (oldest, Material-ish names) */
  --surface-dim: var(--slate-100);
  --surface-variant: var(--slate-100);
  --surface-lowest: var(--slate-100);
  --on-surface: var(--slate-900);
  --on-surface-var: var(--slate-600);
  --on-surface-muted: var(--slate-500);
  --primary-mid: var(--green-600);
  --header-bg: rgba(255,255,255,0.92);
  --outline-var: var(--slate-200);
  --glow-primary: rgba(21,132,99,0.05);
  --glow-secondary: rgba(70,184,148,0.04);
  --grid-line-color: rgba(17,23,26,0.04);
  --primary-subtle-border: rgba(21,132,99,0.18);
  --gray-900: var(--slate-900);
  --gray-800: var(--slate-800);
  --gray-700: var(--slate-700);
  --gray-600: var(--slate-600);
  --gray-500: var(--slate-500);
  --gray-400: var(--slate-300);
  --gray-300: var(--slate-200);
  --gray-200: var(--slate-100);
  --gray-100: var(--slate-50);
}
/* Legacy pages: switch body type to IBM Plex, neutralize dark, hide old toggles */
body{ font-family:var(--font-sans); color:var(--text-body); background:var(--surface-page); }
html[data-theme="dark"] body{ background:var(--surface-page); color:var(--text-body); }
.theme-toggle, #themeToggle, #theme-toggle, .theme-switcher{ display:none !important; }
/* Legacy primary buttons → brand green with the right text color */
.btn-primary, .cta-button, .nav-cta{ color:#fff; }

/* Inline cookie banner (#cookieConsent) — force light/on-brand (overrides inline dark styles) */
#cookieConsent{ background:var(--surface-card)!important; color:var(--text-body)!important; border-top:1px solid var(--border-subtle); box-shadow:0 -4px 20px rgba(17,23,26,0.10)!important; font-family:var(--font-sans)!important; }
#cookieConsent strong{ color:var(--text-strong)!important; }
#cookieConsent a{ color:var(--text-link)!important; }
#cookieConsent button[onclick*="accept"]{ background:var(--green-600)!important; color:#fff!important; border:none!important; }
#cookieConsent button[onclick*="reject"]{ background:transparent!important; color:var(--text-body)!important; border:1px solid var(--border-default)!important; }

/* Gradient-text hero/page-header titles → solid dark for contrast on the now-light bg */
.page-header h1, .hero h1{ background:none!important; -webkit-background-clip:border-box!important; -webkit-text-fill-color:var(--text-strong)!important; color:var(--text-strong)!important; }
.page-header .sl-eyebrow, .page-header .breadcrumb, .page-header .eyebrow, .sl-breadcrumb{ color:var(--green-700)!important; opacity:1!important; }


/* FIX 2026-06-25 (Website-Session): Outline-CTA (.cta-button-secondary) bekam durch .cta-button{color:#fff} unsichtbare weisse Schrift. Hoehere Spezifitaet stellt die Akzentfarbe wieder her. */
.cta-button.cta-button-secondary{color:var(--primary,#158463);background:transparent;}

/* FIX 2026-06-25: Nav-Labels einzeilig halten (NIS-2 / Ueber mich / Security Tools brachen intern um) */
.tsm-nav__link,.tsm-nav__links a,.tsm-nav__btn,.tsm-nav__item--dd>.tsm-nav__btn{white-space:nowrap;}
.tsm-nav__in{gap:18px;padding:0 24px;}
.tsm-nav__links{gap:18px;}


/* === MoneyPage Mobil-Nav Fix 2026-07-09 ===
   Money-Pages (bro-main) laden zusaetzlich das Legacy /style.css mit
   @media(max-width:768px){nav{display:none}} sowie einem overflow-Clipping.
   Zusammen mit dem backdrop-filter des tsm-nav wird das aufgeklappte Mobil-Menue
   auf die Nav-Hoehe abgeschnitten. Zentral erzwingen: Nav sichtbar + nicht clippen. */
@media (max-width: 768px){
  .tsm-nav{ display:block !important; overflow:visible !important; z-index:1100 !important; }
  .tsm-nav__in{ overflow:visible !important; }
}

/* ---- M5-Mobile-Fixes (2026-08-17) --------------------------------------
   1. Lange deutsche Komposita sprengen Grid-/Flex-Spalten. 'anywhere' statt
      'break-word', weil nur 'anywhere' die min-content-Breite veraendert und
      damit den Ueberlauf wirklich aufloest (gemessen bei 320px auf der Startseite).
   2. Touch-Targets: das Design-System fordert mindestens 44px Hoehe.
      Betrifft Buttons und CTA-Links, nicht Fliesstext-Links. */
h1,h2,h3,h4,.tsm-eyebrow,.tsm-lede,.tsm-card__title,.tsm-stat__label{overflow-wrap:anywhere;hyphens:auto;}
p,li,td,th,strong,em,figcaption,dd,dt{overflow-wrap:anywhere;}
.tsm-btn,.tsm-nav__btn,button.tsm-btn,a.tsm-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
.tsm-nav__dd a[role=menuitem]{min-height:44px;display:flex;flex-direction:column;justify-content:center;}
@media (max-width:360px){.tsm-eyebrow{font-size:0.62rem;letter-spacing:0.06em;}}
/* Buttons tragen white-space:nowrap. Auf sehr schmalen Geraeten sprengt ein
   langer CTA-Text damit den Viewport (gemessen: 366px Button bei 320px Breite).
   Unterhalb von 400px darf der Text deshalb umbrechen. */
@media (max-width:400px){.tsm-btn,.tsm-btn--lg{white-space:normal;max-width:100%;text-align:center;height:auto;}}

/* === W115 Navigations-Umbruchpunkt (2026-08-19) =========================
   Gemessen in Chromium mit den echten Webfonts, drei Seitentypen, Ergebnis
   auf allen dreien identisch:
     ab 1091 px  steht die Desktop-Leiste ungestaucht
     ab  953 px  bleibt sie noch innerhalb der Container-Polsterung
     ab  929 px  liegt "Beratung anfragen" gerade noch im Viewport
     ab  856 px  ist der Mittelpunkt des Knopfes noch treffbar
     darunter    ist der Knopf abgeschnitten und nicht mehr bedienbar
   Der Hamburger klappte aber erst bei 760 px auf. Zwischen 761 und 991 px
   war der wichtigste Handlungsaufruf der Seite deshalb unerreichbar.
   Der Mobil-Zustand der Navigation gilt jetzt bis 991 px.

   Bewusst nur Navigations-Regeln: der bestehende 760-px-Block enthält auch
   Raster-, Abstands- und Fußzeilen-Regeln. Die bleiben unberührt, damit
   sich zwischen 761 und 991 px außer der Navigation nichts verschiebt.
   Die Regeln sind eine wortgleiche Spiegelung der Navigations-Regeln aus
   dem 760-px-Block, damit beide Zustände nicht auseinanderlaufen. */
@media (min-width:761px) and (max-width:991px){
  .tsm-nav__links{ display:none; }
  .tsm-nav__toggle{ display:inline-flex; }
  .tsm-nav{ overflow:visible; }
  .tsm-nav__in{ overflow:visible; }
  .tsm-nav.is-open .tsm-nav__links{ display:flex; position:absolute; top:var(--nav-h); left:0; right:0; flex-direction:column; gap:0; background:var(--surface-card); border-bottom:1px solid var(--border-subtle); padding:8px 0; max-height:calc(100vh - var(--nav-h)); overflow-y:auto; }
  .tsm-nav.is-open .tsm-nav__links > a{ padding:14px 32px; min-height:48px; display:flex; align-items:center; }
  .tsm-nav.is-open .tsm-nav__links .tsm-btn{ margin:8px 32px; }
  .tsm-nav.is-open .tsm-nav__item--dd{ display:flex; flex-direction:column; align-items:stretch; }
  .tsm-nav.is-open .tsm-nav__item--dd > .tsm-nav__btn{ width:100%; padding:14px 32px; justify-content:space-between; min-height:48px; }
  .tsm-nav.is-open .tsm-nav__item--dd > .tsm-nav__dd{ position:static; display:none; box-shadow:none; border:0; border-radius:0; padding:0 0 8px; background:var(--slate-50); }
  .tsm-nav.is-open .tsm-nav__item.is-open > .tsm-nav__dd{ display:flex; }
  .tsm-nav.is-open .tsm-nav__item--dd > .tsm-nav__dd a{ padding:12px 32px 12px 44px; min-height:48px; }
}
/* === Ende W115 ======================================================== */

/* === W120 Nav-CTA-Kontrast (2026-08-19) =================================
   .tsm-nav__links a färbt jeden Link in der Leiste mit var(--text-body).
   Der Selektor hat (0,1,1) und schlägt damit .tsm-btn (0,1,0) — der Knopf
   "Beratung anfragen" stand deshalb in Slate-700 auf Green-600: 2,07:1.
   Der Zusatzselektor gibt dem Knopf seine eigene Buttonfarbe zurück.
   --_fg ist die Variable, die .tsm-btn und die Varianten auf demselben
   Element setzen, also bleibt jede Variante richtig. Gemessen nachher:
   #FFFFFF auf #158463 = 4,65:1, im Hover #FFFFFF auf #11704F = 6,08:1.
   Nur Farbe: white-space:nowrap aus .tsm-btn und die W115-Regeln oben
   bleiben unberührt. */
.tsm-nav__links a.tsm-btn{ color:var(--_fg); }
.tsm-nav__links a.tsm-btn:hover{ color:var(--_fg); }
/* === Ende W120 ======================================================== */

/* === W126 Kontrast- und Bannerreste (2026-08-19) ======================
   Alle drei Punkte stammen aus dem W120-Protokoll, Abschnitt 9.
   Angehaengter Block, weil tsmondo.css als letztes Blatt geladen wird:
   style.css bleibt unveraendert, die W115-/W120-Bloecke darueber auch.

   1  .feature-icon trug weiss auf --accent (= --green-500 #1F9E76):
      3,38:1. Das Zeichen wird als Text gerendert, Schwelle 4,5.
      Neu --green-700 (#11704F): 6,08:1.
   2  .page-header .btn-outline stand mit --primary (--green-600 #158463)
      auf --surface-dim (--slate-100 #E9EDEF): 3,95:1 bei 16 px/600.
      Neu --green-700 auf demselben Grund: 5,16:1.
      Die Dark-Mode-Regel in style.css traegt !important und bleibt vorn.
   3  Die Knopfzeile des Einwilligungs-Banners stand auf flex-shrink:0
      und lief bei 320 px 25,22 px ueber den Rand. Unter 480 px darf sie
      jetzt schrumpfen und umbrechen, das Banner-Polster geht von 2rem
      auf 1rem. Die Inline-Stile im Markup brauchen dafuer !important.
      Funktion, Beschriftung und Skript des Banners bleiben unberuehrt. */
.feature-icon{ background:var(--green-700); color:var(--white); }
.page-header .btn-outline{ border-color:var(--green-700); color:var(--green-700); }
.page-header .btn-outline:hover{ background:var(--green-700); color:var(--white); }
@media (max-width:480px){
  #cookieConsent{ padding-left:1rem !important; padding-right:1rem !important; }
  #cookieConsent > div > div{ flex-shrink:1 !important; flex-wrap:wrap !important; }
  #cookieConsent > div > div > button{ flex:1 1 auto; min-width:0; }
}
/* === Ende W126 ======================================================== */