/* Lokale Webfonts – erwartet im Unterordner ./fonts/ */
  @font-face {
    font-family:'Poppins';
    src:url('../fonts/Poppins-SemiBold.ttf') format('truetype');
    font-style:normal; font-weight:600; font-display:swap;
  }
  @font-face {
    font-family:'Poppins';
    src:url('../fonts/Poppins-Bold.ttf') format('truetype');
    font-style:normal; font-weight:700; font-display:swap;
  }
  @font-face {
    font-family:'Poppins';
    src:url('../fonts/Poppins-ExtraBold.ttf') format('truetype');
    font-style:normal; font-weight:800; font-display:swap;
  }
  @font-face {
    font-family:'Poppins';
    src:url('../fonts/Poppins-Black.ttf') format('truetype');
    font-style:normal; font-weight:900; font-display:swap;
  }

  @font-face {
    font-family:'IBM Plex Sans';
    src:url('../fonts/IBMPlexSans-Regular.ttf') format('truetype');
    font-style:normal; font-weight:400; font-display:swap;
  }
  @font-face {
    font-family:'IBM Plex Sans';
    src:url('../fonts/IBMPlexSans-Italic.ttf') format('truetype');
    font-style:italic; font-weight:400; font-display:swap;
  }
  @font-face {
    font-family:'IBM Plex Sans';
    src:url('../fonts/IBMPlexSans-Medium.ttf') format('truetype');
    font-style:normal; font-weight:500; font-display:swap;
  }
  @font-face {
    font-family:'IBM Plex Sans';
    src:url('../fonts/IBMPlexSans-SemiBold.ttf') format('truetype');
    font-style:normal; font-weight:600; font-display:swap;
  }
  @font-face {
    font-family:'IBM Plex Sans';
    src:url('../fonts/IBMPlexSans-Bold.ttf') format('truetype');
    font-style:normal; font-weight:700; font-display:swap;
  }

  @font-face {
    font-family:'IBM Plex Mono';
    src:url('../fonts/IBMPlexMono-Regular.ttf') format('truetype');
    font-style:normal; font-weight:400; font-display:swap;
  }
  @font-face {
    font-family:'IBM Plex Mono';
    src:url('../fonts/IBMPlexMono-Medium.ttf') format('truetype');
    font-style:normal; font-weight:500; font-display:swap;
  }
  @font-face {
    font-family:'IBM Plex Mono';
    src:url('../fonts/IBMPlexMono-SemiBold.ttf') format('truetype');
    font-style:normal; font-weight:600; font-display:swap;
  }
  @font-face {
    font-family:'IBM Plex Mono';
    src:url('../fonts/IBMPlexMono-Bold.ttf') format('truetype');
    font-style:normal; font-weight:700; font-display:swap;
  }
  html { scroll-behavior:smooth; }
  /* Sichtbarer Fokus-Rahmen für Tastaturnutzung auf allen interaktiven
     Elementen (Buttons, Links, Pills, Regler, Schalter). Nur bei
     Tastaturfokus sichtbar (:focus-visible), nicht bei Mausklick. */
  a:focus-visible, button:focus-visible, input:focus-visible,
  .csm-pill:focus-visible, .csm-tool-btn:focus-visible,
  .csm-slider:focus-visible, .csm-toggle-switch input:focus-visible + .csm-toggle-track {
    outline:2.5px solid var(--gold); outline-offset:2px;
  }
  .csm-toggle-switch input:focus-visible + .csm-toggle-track { outline-offset:3px; }
  :root {
    --ink:#142248; --ink-soft:#5B6178; --paper:#F2F3F8; --panel:#FFFFFF;
    --panel-line:#DCE1EC; --petrol:#142248; --petrol-dark:#0B1530;
    --petrol-tint:#E4E8F2; --gold:#FF4000; --gold-text:#D93600;
    --accent-on-dark:#FF8A5B; --danger:#8C3B2E; --radius:2px;
    /* Kennfarben der vier Software-Lösungen für die Tool-Flächen in der Matrix */
    /* Aus den Original-Logos ermittelte Kennfarben: parsX = dunkles Navy des
       Schriftzugs, BOOXITE = Hellrot des "X", icefox = Hellblau der
       Origami-Tierlogos (dieselbe Linienfarbe in allen drei Logos). */
    --tool-parsx:#1C2444; --tool-icefox:#A4C8E4; --tool-booxite:#E84018;
    /* Dunklere Variante von icefox' Hellblau — nur für Textstellen auf
       hellem Grund (Produktkarte oben), da das reguläre Hellblau dort
       schwer lesbar ist. */
    --tool-icefox-onLight:#2874AF;
    /* Helle Variante von parsX' dunklem Navy — nur für Überschriften auf
       dunklem Grund (rechter Rahmen in Schritt 2), da das reguläre Navy dort
       kaum lesbar wäre. */
    --tool-parsx-onDark:#A9ACC2;
  }
  .csm * { box-sizing:border-box; }
  .csm {
    font-family:'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
    color:var(--ink); background:var(--paper); padding:clamp(20px,4vw,48px);
    line-height:1.5; -webkit-font-smoothing:antialiased;
  }
  .csm-wrap { max-width:1280px; margin:0 auto; }

  /* ---------- Header ---------- */
  /* ---------- Produkt-Vorstellung ---------- */
  .csm-intro { margin-bottom:8px; }
  .csm-product-row {
    display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-top:22px;
  }
  @media (max-width: 760px) { .csm-product-row { grid-template-columns:1fr; } }
  .csm-product-card {
    background:var(--panel); border:1px solid var(--panel-line); border-top:4px solid var(--panel-line);
    padding:20px 18px; display:flex; flex-direction:column;
  }
  .csm-product-logo { height:76px; width:auto; display:block; margin:0 0 18px; align-self:flex-start; }
  .csm-product-link {
    display:inline-flex; align-items:center; gap:6px; margin-top:14px; align-self:flex-start;
    font-family:'IBM Plex Sans', sans-serif; font-size:12.5px; font-weight:600;
    padding:8px 14px; border-radius:var(--radius); border:1.5px solid; text-decoration:none;
    transition:background .15s ease, color .15s ease;
  }
  .csm-product-link[data-tool="parsx"] { color:var(--tool-parsx); border-color:var(--tool-parsx); }
  .csm-product-link[data-tool="parsx"]:hover { background:var(--tool-parsx); color:#fff; }
  .csm-product-link[data-tool="booxite"] { color:var(--tool-booxite); border-color:var(--tool-booxite); }
  .csm-product-link[data-tool="booxite"]:hover { background:var(--tool-booxite); color:#fff; }
  .csm-product-link[data-tool="icefox"] { color:var(--tool-icefox-onLight); border-color:var(--tool-icefox-onLight); }
  .csm-product-link[data-tool="icefox"]:hover { background:var(--tool-icefox-onLight); color:#fff; }
  .csm-product-desc { font-size:13.5px; color:var(--ink-soft); line-height:1.6; margin:0; }
  .csm-product-desc + .csm-product-desc { margin-top:10px; }
  .csm-product-desc:last-of-type { margin-bottom:auto; }

  /* ---------- Überleitung ---------- */
  .csm-transition {
    margin:34px 0 40px; padding:22px clamp(16px,4vw,40px); text-align:center;
    background:var(--petrol-dark); color:#ECEEF6;
  }
  .csm-transition p {
    margin:0; font-family:'Poppins', sans-serif; font-size:clamp(16px,2.1vw,20px);
    font-weight:600; line-height:1.5; max-width:760px; margin-inline:auto;
  }
  .csm-transition strong { color:var(--accent-on-dark); }
  .csm-transition-arrow {
    display:block; margin-top:14px; font-size:20px; color:var(--accent-on-dark);
  }

  .csm-title-h2 { font-size:clamp(20px, 2.6vw, 28px); }

  .csm-head { margin-bottom:26px; border-bottom:1px solid var(--panel-line); padding-bottom:20px; }
  .csm-eyebrow {
    font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--petrol-dark); margin:0 0 10px;
  }
  .csm-title {
    font-family:'Poppins', ui-sans-serif, sans-serif; font-weight:800;
    font-size:clamp(24px,3.2vw,34px); margin:0 0 8px; letter-spacing:-0.01em;
  }
  .csm-sub { margin:0; color:var(--ink-soft); max-width:700px; font-size:14.5px; }
  .csm-sub + .csm-sub { margin-top:10px; }

  /* ---------- Reihe 1: Eingabe | Matrix ---------- */
  .csm-row-top {
    display:grid; grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
    gap:22px; align-items:start; margin-bottom:28px;
  }
  @media (max-width: 1000px) { .csm-row-top { grid-template-columns: 1fr; } }

  .csm-panel-title { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:6px; }
  .csm-panel-title h2 { font-family:'Poppins', ui-sans-serif, sans-serif; font-weight:700; font-size:17px; margin:0; }

  .csm-section {
    background:var(--panel); border:1px solid var(--panel-line); border-left:3px solid var(--petrol);
    padding:18px clamp(14px,2.4vw,22px) 20px; margin-bottom:16px;
  }
  .csm-section-hint { margin:0 0 16px; font-size:12.5px; color:var(--ink-soft); }

  /* ---------- Achsen-Slider ---------- */
  .csm-axis-block { margin-bottom:20px; }
  .csm-axis-block:last-child { margin-bottom:0; }

  .csm-section-divider { height:1px; background:var(--panel-line); margin:18px 0; }

  /* Ausklappbarer "Weitere Angaben"-Bereich am Ende von "Verortung" */
  .csm-collapse-toggle {
    display:flex; align-items:center; justify-content:space-between; width:100%;
    margin-top:20px; padding:10px 2px; border:none; border-top:1px solid var(--panel-line);
    background:none; cursor:pointer; text-align:left;
    font-family:'Poppins', ui-sans-serif, sans-serif; font-size:17px; font-weight:700; color:var(--petrol);
  }
  .csm-collapse-chevron { transition:transform .2s ease; font-size:20px; line-height:1; }
  .csm-collapse-toggle[aria-expanded="true"] .csm-collapse-chevron { transform:rotate(180deg); }
  .csm-collapsible { padding-top:14px; }
  .csm-collapsible[hidden] { display:none; }
  .csm-subheading {
    font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--ink-soft); margin:0 0 14px;
  }

  .csm-toggle-list { display:flex; flex-direction:column; gap:14px; }
  .csm-toggle-row { display:flex; align-items:center; gap:12px; cursor:pointer; }
  .csm-toggle-switch { position:relative; display:inline-block; width:38px; height:22px; flex:0 0 auto; }
  .csm-toggle-switch input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
  .csm-toggle-track {
    position:absolute; inset:0; background:var(--panel-line); border-radius:20px; transition:background .15s ease;
  }
  .csm-toggle-track::after {
    content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
    background:#fff; box-shadow:0 1px 2px rgba(20,34,72,.3); transition:transform .15s ease;
  }
  .csm-toggle-switch input:checked + .csm-toggle-track { background:var(--petrol); }
  .csm-toggle-switch input:checked + .csm-toggle-track::after { transform:translateX(16px); }
  .csm-toggle-label { font-size:13px; line-height:1.4; }
  .csm-axis-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px; gap:8px; }
  .csm-axis-title { font-size:13px; font-weight:700; }
  .csm-axis-title > span:first-child { font-family:'IBM Plex Mono', monospace; font-weight:700; color:var(--petrol); margin-right:5px; }

  .csm-info-wrap { position:relative; display:inline-flex; margin-left:2px; }
  .csm-info-btn {
    width:15px; height:15px; flex:0 0 auto; border-radius:50%;
    border:1px solid var(--petrol); background:#fff; color:var(--petrol);
    font-family:'IBM Plex Mono', monospace; font-size:9.5px; font-weight:700; line-height:1;
    display:flex; align-items:center; justify-content:center; padding:0; cursor:help;
    transition:background .15s ease, color .15s ease;
  }
  .csm-info-btn:hover, .csm-info-btn:focus-visible { background:var(--petrol); color:#fff; outline:none; }
  .csm-info-popup {
    position:absolute; left:0; top:calc(100% + 8px); z-index:60;
    width:240px; max-width:min(240px, 80vw); background:#fff; color:var(--ink); font-weight:400;
    border:1px solid var(--panel-line); border-radius:var(--radius);
    box-shadow:0 6px 18px rgba(11,21,48,.28);
    padding:10px 12px; font-size:12.5px; line-height:1.5;
    white-space:pre-wrap;
    opacity:0; visibility:hidden; transform:translateY(4px);
    transition:opacity .15s ease, transform .15s ease, visibility .15s;
    pointer-events:none;
  }
  .csm-info-popup.is-open { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
  .csm-axis-lean { font-family:'IBM Plex Mono', monospace; font-size:11.5px; font-weight:600; color:var(--gold-text); white-space:nowrap; }

  .csm-slider { -webkit-appearance:none; appearance:none; width:100%; height:5px; border-radius:3px;
    background:linear-gradient(90deg, var(--petrol-tint), var(--petrol-tint)); outline:none; margin:10px 0 6px; }
  .csm-slider::-webkit-slider-thumb {
    -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%;
    background:var(--gold); border:2px solid #fff; box-shadow:0 0 0 1px var(--gold); cursor:pointer;
  }
  .csm-slider::-moz-range-thumb {
    width:18px; height:18px; border-radius:50%; background:var(--gold); border:2px solid #fff;
    box-shadow:0 0 0 1px var(--gold); cursor:pointer;
  }
  .csm-axis-poles { display:flex; justify-content:space-between; gap:10px; font-size:11px; color:var(--ink-soft); }
  .csm-axis-poles span:last-child { text-align:right; }

  /* ---------- Verlagsprogramm: Segment-Pills ---------- */
  .csm-segment-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px; }
  .csm-segment-head span:first-child {
    font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
  }
  .csm-segment-counter { font-family:'IBM Plex Mono', monospace; font-size:12.5px; font-weight:700; color:var(--gold-text); }

  .csm-pills { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:4px; }
  .csm-pill {
    display:inline-flex; align-items:center; gap:8px; padding:9px 15px 9px 9px;
    border-radius:24px; border:1.5px solid var(--panel-line); background:#fff;
    font-family:'IBM Plex Sans', sans-serif; font-size:13px; font-weight:600; color:var(--ink);
    cursor:pointer; transition:border-color .15s ease, background .15s ease, color .15s ease;
    position:relative;
  }
  .csm-pill-check {
    width:18px; height:18px; border-radius:50%; border:1.5px solid var(--panel-line);
    display:flex; align-items:center; justify-content:center; flex:0 0 auto;
    font-size:11px; color:transparent; background:#fff;
  }
  /* Mouseover-Popup je Verlagssegment (gleiche Gestaltung wie im
     BOOXITE-Einsparrechner). */
  .csm-pill-tooltip {
    position:absolute; bottom:calc(100% + 10px); left:0;
    width:220px; max-width:min(220px, 80vw); background:var(--ink); color:#ECEEF6; font-family:'IBM Plex Sans', sans-serif;
    font-size:12px; font-weight:400; line-height:1.5; text-align:left; white-space:normal;
    padding:10px 12px; border-radius:6px; box-shadow:0 8px 20px rgba(11,21,48,.28);
    opacity:0; visibility:hidden; transition:opacity .15s ease; pointer-events:none; z-index:20;
  }
  .csm-pill-tooltip::after {
    content:''; position:absolute; top:100%; left:16px;
    border:6px solid transparent; border-top-color:var(--ink);
  }
  .csm-pill:hover .csm-pill-tooltip, .csm-pill:focus-visible .csm-pill-tooltip {
    opacity:1; visibility:visible;
  }
  .csm-pill.is-active { border-color:var(--gold); background:#FFF3EE; color:var(--gold-text); }
  .csm-pill.is-active .csm-pill-check { background:var(--gold); border-color:var(--gold); color:#fff; }
  .csm-pill.is-disabled { opacity:.45; cursor:not-allowed; }

  .csm-field-value { font-family:'IBM Plex Mono', monospace; font-weight:700; color:var(--gold-text); }
  .csm-minmax { display:flex; justify-content:space-between; font-size:10.5px; color:#AEB6D0; margin-top:2px; }
  .csm-slider-hint { display:none; font-size:11px; color:var(--ink-soft); margin:2px 0 6px; font-style:italic; }
  #csm-slider-titel:disabled + .csm-slider-hint { display:block; }

  .csm-empty-hint { font-size:12.5px; color:var(--ink-soft); font-style:italic; margin-top:6px; }

  /* ---------- Matrix-Visualisierung ---------- */
  .csm-matrix-card {
    background:var(--panel); border:1px solid var(--panel-line);
    padding:clamp(16px,3vw,26px); min-height:440px; display:flex; flex-direction:column;
  }
  .csm-matrix-svg-wrap {
    display:flex; align-items:center; justify-content:center;
    background:radial-gradient(ellipse at 50% 38%, #ffffff 0%, var(--paper) 100%);
    border-radius:6px; padding:14px; overflow-x:auto;
  }
  .csm-matrix-svg-wrap svg { width:100%; height:auto; max-width:560px; min-width:380px; display:block; margin:0 auto; }
  /* Auf sehr schmalen Bildschirmen: Grafik von links scrollbar (statt
     zentriert, sonst wäre der linke Teil nicht erreichbar) und die langen
     Achsen-Obertitel ausblenden — die kurzen Pol-Beschriftungen bleiben. */
  @media (max-width: 420px) {
    .csm-matrix-svg-wrap { justify-content:flex-start; }
    .csm-axis-label-strong { display:none; }
  }

  /* Tool-Auswahl unterhalb der Grafik */
  .csm-tool-buttons { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:16px; }
  .csm-tool-btn {
    position:relative; overflow:hidden; isolation:isolate; flex:0 1 150px; min-width:130px;
    font-family:'IBM Plex Sans', sans-serif; font-size:13px; font-weight:600; text-align:center;
    padding:10px 14px; border-radius:var(--radius); border:1.5px solid var(--panel-line);
    background:#fff; color:var(--ink); cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease;
  }
  .csm-tool-btn:hover { border-color:var(--ink-soft); }
  /* Eignungs-Füllstand: wächst von links, sobald ein Verlagssegment gewählt ist */
  .csm-tool-btn-fill {
    position:absolute; left:0; top:0; bottom:0; width:0%; z-index:0;
    transition:width .3s ease;
  }
  .csm-tool-btn-label {
    position:relative; z-index:1; text-shadow:0 0 3px #fff, 0 0 3px #fff;
  }
  .csm-tool-btn[data-tool="parsx"] .csm-tool-btn-fill { background:var(--tool-parsx); }
  .csm-tool-btn[data-tool="icefox"] .csm-tool-btn-fill { background:var(--tool-icefox); }
  .csm-tool-btn[data-tool="booxite"] .csm-tool-btn-fill { background:var(--tool-booxite); }
  /* Aktiv/angeklickt: zusätzlicher Ring in der Tool-Farbe, unabhängig vom Füllstand */
  .csm-tool-btn[data-tool="parsx"].is-active { border-color:var(--tool-parsx); box-shadow:0 0 0 2px var(--tool-parsx); }
  .csm-tool-btn[data-tool="icefox"].is-active { border-color:var(--tool-icefox); box-shadow:0 0 0 2px var(--tool-icefox); }
  .csm-tool-btn[data-tool="booxite"].is-active { border-color:var(--tool-booxite); box-shadow:0 0 0 2px var(--tool-booxite); }

  /* Tool-Flächen in der Matrix: unsichtbar, bis der zugehörige Button aktiv ist */
  /* Tool-Flächen in der Matrix: unsichtbar, bis der zugehörige Button aktiv
     ist. Die Transparenz wird auf die GRUPPE (pro Tool) angewendet, nicht auf
     jede einzelne Teilfläche — sonst würden sich überlappende Teilflächen
     (z. B. Front- und Dachfläche benachbarter Felder bei icefox) gegenseitig
     abdunkeln und die Fläche wirkt fälschlich "doppelt transparent". */
  .csm-tool-overlay-group { opacity:0; pointer-events:none; transition:opacity .2s ease; isolation:isolate; }
  .csm-tool-overlay-group.is-active { opacity:.4; }
  .csm-tool-overlay-shape { stroke:none; }
  .csm-tool-overlay-shape[data-tool="parsx"] { fill:var(--tool-parsx); }
  .csm-tool-overlay-shape[data-tool="icefox"] { fill:var(--tool-icefox); }
  .csm-tool-overlay-shape[data-tool="booxite"] { fill:var(--tool-booxite); }

  .csm-oct-cell { fill:var(--panel); stroke:var(--panel-line); stroke-width:1.5; rx:4; }
  .csm-oct-cell.is-depth { fill:url(#csmDepthGrad); }
  .csm-oct-edge { stroke:var(--panel-line); stroke-width:1.5; fill:none; }
  /* Z-Achse: sobald benötigt, sofort voll sichtbar (kein proportionales
     Ein-/Ausblenden wie bei der übrigen Tiefen-Ebene). */
  #csm-z-axis-group { opacity:0; transition:opacity .2s ease; }
  #csm-z-axis-group.is-visible { opacity:1; }
  /* Verbindungslinien zwischen vorderer und hinterer Ebene: dunkler als die
     graue Tiefen-Fläche, damit sie darauf sichtbar bleiben. */
  .csm-depth-connector { stroke:var(--ink-soft); stroke-width:1.5; fill:none; }
  .csm-axis-arrow { stroke:var(--petrol); stroke-width:2.5; fill:none; marker-end:url(#csmArrow); }
  .csm-axis-label { font-family:'IBM Plex Sans', sans-serif; font-size:11.5px; fill:var(--ink-soft); }
  .csm-axis-label-strong { font-weight:700; fill:var(--petrol); }

  /* Tiefen-Ebene: unsichtbar bei Z=0, blendet sich mit dem Z-Regler ein
     (siehe JS: opacity wird auf state.z/100 gesetzt) */
  #csm-depth-layer { opacity:0; transition:opacity .2s ease; }

  /* Verlags-Marker: Icon in einem Kreis (bei Z=0) bzw. einer Kugel (Z>0),
     dessen Größe die Titelzahl abbildet und dessen Position sich mit den
     X/Y/Z-Reglern verschiebt. Erst sichtbar, sobald ein Segment gewählt
     wurde. Kein roter Rahmen mehr — die Achsen-Position wird stattdessen
     über die drei roten Punkte auf den Achsen selbst angezeigt. */
  .csm-marker-circle {
    fill:var(--petrol); stroke:none;
    transition:cx .25s ease, cy .25s ease, r .25s ease, fill .2s ease;
  }
  .csm-marker-circle.is-sphere { fill:url(#csmSphereGrad); }
  .csm-marker-el { transition:opacity .2s ease; opacity:1; }
  .csm-marker-el.is-hidden { opacity:0; }

  /* Roter Punkt auf jeder der drei Achsen an der Stelle, die dem jeweiligen
     Reglerwert entspricht. */
  .csm-axis-dot {
    fill:#DC2626; stroke:#fff; stroke-width:1.5; opacity:0;
    transition:cx .25s ease, cy .25s ease, opacity .2s ease;
  }
  .csm-axis-dot.is-visible { opacity:1; }

  .csm-matrix-legend { text-align:center; margin-top:10px; }
  .csm-matrix-legend .csm-field-value { font-family:'Poppins', sans-serif; font-size:16px; }
  .csm-matrix-legend-sub { font-size:12px; color:var(--ink-soft); margin-top:4px; }

  .csm-jump-btn {
    display:flex; align-items:center; justify-content:center; gap:6px;
    margin:18px auto 0; width:fit-content; max-width:100%;
    font-family:'IBM Plex Sans', sans-serif; font-size:13px; font-weight:600;
    padding:10px 20px; border-radius:var(--radius); border:1.5px solid var(--petrol);
    background:#fff; color:var(--petrol); text-decoration:none; cursor:pointer;
    transition:background .15s ease, color .15s ease;
  }
  .csm-jump-btn:hover { background:var(--petrol); color:#fff; }

  /* ---------- Kalkulation / Ergebnis ---------- */
  .csm-calc-head { margin:8px 0 16px; }
  .csm-calc-title { font-family:'Poppins', sans-serif; font-weight:700; font-size:19px; margin:0; }
  .csm-calc-row { display:grid; grid-template-columns: 1fr 1fr; gap:22px; }
  @media (max-width: 780px) { .csm-calc-row { grid-template-columns:1fr; } }

  .csm-ledger {
    background:var(--petrol-dark); color:#ECEEF6; padding:22px 20px 20px; position:relative; overflow:hidden;
    display:flex; flex-direction:column;
  }
  .csm-stitch {
    position:absolute; top:0; left:0; right:0; height:9px;
    background-image: repeating-linear-gradient(90deg, transparent 0 6px, rgba(255,64,0,.45) 6px 8px, transparent 8px 16px);
    opacity:.6;
  }
  .csm-ledger-heading {
    font-family:'Poppins', sans-serif; font-weight:700; font-size:16px; line-height:1.35; margin:4px 0 6px;
  }
  .csm-ledger-strategy { font-family:'Poppins', sans-serif; font-weight:700; font-size:20px; color:var(--accent-on-dark); margin:2px 0 8px; }
  .csm-tech-block { margin-bottom:14px; }
  .csm-tech-block:last-child { margin-bottom:0; }
  .csm-tech-block + .csm-tech-block { padding-top:14px; border-top:1px solid rgba(255,255,255,.14); }
  .csm-ledger-desc { font-size:12.5px; color:#C7CCE0; line-height:1.6; margin:14px 0 10px; }
  .csm-ledger-examples { font-size:11.5px; color:#8E96B8; margin:0; }
  .csm-ledger-examples b { color:#A6ACC9; font-weight:600; }

  .csm-block-title {
    font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.12em;
    text-transform:uppercase; color:#8E96B8; margin:14px 0 10px;
  }
  .csm-divider { height:1px; background:rgba(255,255,255,.14); margin:16px 0; }

  .csm-metrics { display:grid; gap:9px; }
  .csm-metric-row {
    display:flex; justify-content:space-between; align-items:baseline;
    border-top:1px solid rgba(255,255,255,.14); padding-top:8px; font-size:12.5px;
  }
  .csm-metric-row span:first-child { color:#A6ACC9; padding-right:10px; flex:1 1 auto; min-width:0; }
  .csm-metric-row span:last-child { font-family:'IBM Plex Mono', monospace; font-weight:700; white-space:nowrap; flex:0 0 auto; }

  .csm-next-steps { margin:6px 0 0; padding-left:18px; font-size:12px; color:#C7CCE0; line-height:1.7; }
  .csm-ledger-note { font-size:11px; color:#7A8199; margin-top:14px; line-height:1.5; }

  /* Zusätzliche Hinweistexte aus "Weitere Angaben" (E-Books, Novitäten,
     KI-Pläne) im linken Rahmen. */
  .csm-strategy-note {
    font-size:12px; color:#C7CCE0; line-height:1.6; margin-top:12px;
    padding-left:10px; border-left:2px solid var(--accent-on-dark);
  }

  .csm-cta-btn {
    display:flex; align-items:center; justify-content:center; gap:6px;
    margin-top:0; width:100%; box-sizing:border-box;
    font-family:'IBM Plex Sans', sans-serif; font-size:13px; font-weight:700;
    padding:12px 16px; border-radius:var(--radius); border:none; cursor:pointer;
    background:var(--accent-on-dark); color:var(--petrol-dark); text-decoration:none;
    transition:opacity .15s ease;
  }
  .csm-cta-btn:hover { opacity:.85; }
  .csm-cta-btn + .csm-cta-btn { margin-top:10px; }
  /* Buttons werden über Flexbox an das untere Ende des jeweiligen Rahmens
     gedrückt, damit beide Rahmen unabhängig von ihrer Textlänge auf
     gleicher Höhe enden. */
  .csm-ledger > .csm-cta-btn { margin-top:auto; }
  #csm-tech-cta { margin-top:auto; padding-top:18px; }


/* Divi-Überschriften innerhalb der Matrix überschreiben */
.csm h2 {
    font-family: 'Poppins', ui-sans-serif, sans-serif !important;
    font-weight: 700 !important;
}