/* ==========================================================================
   k24 Theme – Shopware
   --------------------------------------------------------------------------
   Einmal global im Theme laden (wie die Schriften). Content-Seiten bringen
   dann kein <style> mehr mit.

   Geltungsbereich: nur .k24-blog. Header, Listing und Checkout bleiben
   unangetastet. Im Shop den CMS-Content in <div class="k24-blog"> packen.

   Reihenfolge im Theme:
     1. Bootstrap 5 (liefert Shopware bereits)
     2. diese Datei
     3. k24-bootstrap.css  (setzt Bootstrap-Reboot in der Insel zurueck)

   Erzeugen: python tools/_theme_bauen.py
   Hand-Aenderungen hier werden beim naechsten Lauf ueberschrieben.
   ========================================================================== */

/* Schriften: Theme (dinot). Kein @font-face in dieser Datei. */


    .k24-blog {
      --brand-primary: #F18700;
      --brand-dark: #46322B;
      --brand-text: #46322b;
      --brand-heading: #46322B;
      --brand-contrast: #141414;
      --brand-light-grey: #F5F5F5;
      --brand-bg: #F5F5F5;
      --brand-caption: #6A6A6A;
      --brand-border: #EDEDED;
      --brand-line: #C7C2C0;
      --font-body: "dinot", "Kamdi24 DIN OT", "Open Sans", sans-serif;
      --font-decorative: "dinot", "Kamdi24 DIN OT", "Open Sans", sans-serif;
      --font-size-xs: 12px;
      --font-size-sm: 14px;
      --font-size-note: 13px;
      --font-size-base: 16px;
      --font-size-p: 16px;
      --font-size-lg: 18px;
      --font-size-xl: 20px;
      --font-size-h3: 18px;
      --font-size-h2: 24px;
      --font-size-h1: 30px;
      --font-size-hero: 40px;
      --line-height-base: 24px;
      --line-height-sm: 20px;
      --line-height-heading: 1.25;
      --line-height-relaxed: 1.6;
      /* Abstandsraster: padding/margin/gap in 4er-Schritten. Naechste 4;
         bei Gleichstand die 8er-Stufe. Ausnahmen: 1-2 px optisch,
         abgeleitete Masse (35+16=51), Foto-Overlap. */
      /* Vertikaler Abstand zwischen aufeinanderfolgenden Content-Modulen
         (Sektion, Advisor, TOC, Inline-CTA, Cluster, Abschluss). Innenabstaende
         eines Moduls bleiben kleiner. */
      --k24-modul-abstand: 84px;
      /* Abstand eines Bausteins innerhalb einer Sektion nach oben und unten.
         Oben und unten der gleiche Wert: Benachbarte Aussenabstaende fallen
         zusammen, also aendert der Wert nichts, wo ohnehin ein Baustein folgt -
         er greift nur da, wo als naechstes ein Absatz kommt. Der hat oben
         keinen Abstand und klebte sonst am Baustein. */
      --k24-baustein-abstand: 20px;
      /* Radius-System – einheitlich 8px (abgestimmt auf die Logo-Außenecke ≈7,5px) */
      --radius-brand: 8px;
      --radius-pill: 20px;
      /* Ein Pfeil fuer alle Weiterfuehrungen: derselbe Winkel wie im FAQ, nur
         nach rechts gedreht. Buttons, Linklisten und Themencluster teilen ihn,
         damit "hier geht es weiter" ueberall gleich aussieht. Gezeichnet als
         Strich mit 2.6 Einheiten Breite - er steht neben fetter Schrift und wuerde
         als Haarlinie daneben duenn wirken. Der Winkel im FAQ bleibt schlanker:
         dort ist er Zustandsanzeige, nicht Teil einer Linkzeile. */
      --icon-chevron-rechts: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23F18700' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 2.5L11 8l-5.5 5.5'/%3E%3C/svg%3E");
      /* ---------- Icons aus templates/Icons ---------- */
      /* Erzeugt von tools/_icons_zu_css.py - nicht von Hand aendern.
         Quelle sind die SVG der Grafik; Aenderungen dort und Skript erneut
         laufen lassen. Die Toene sind auf die Seitenfarben gezogen, weil
         Illustrator sie minimal anders exportiert. */
      --icon-hinweis-tip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cg fill='none' stroke='%23F18700' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.56px'%3E %3Ccircle cx='11' cy='10.6' r='4.6'/%3E %3Cpath d='M13.41,17.28c-.72.23-1.54.35-2.4.35s-1.68-.13-2.4-.35'/%3E %3Cpath d='M12.87,19.72c-.56.12-1.2.18-1.87.18s-1.31-.07-1.87-.18'/%3E %3Cline x1='20.14' y1='10.59' x2='17.89' y2='10.59'/%3E %3Cline x1='4.11' y1='10.59' x2='1.86' y2='10.59'/%3E %3Cline x1='11' y1='1.45' x2='11' y2='3.7'/%3E %3Cline x1='17.46' y1='17.06' x2='15.87' y2='15.47'/%3E %3Cline x1='6.13' y1='5.72' x2='4.54' y2='4.13'/%3E %3Cline x1='17.46' y1='4.13' x2='15.87' y2='5.72'/%3E %3Cline x1='6.13' y1='15.47' x2='4.54' y2='17.06'/%3E %3C/g%3E%3C/svg%3E");
      --icon-hinweis-achtung: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E %3Crect fill='none' stroke='%23CD1719' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.56px' x='3.96' y='3.96' width='14.09' height='14.09' transform='translate(11 -4.56) rotate(45)'/%3E %3Cpath fill='%23CD1719' d='M11.01,17.07c-.28,0-.51-.09-.68-.26-.17-.18-.26-.4-.26-.67s.09-.49.26-.67c.17-.18.39-.26.68-.26s.51.09.67.26c.16.18.25.4.25.67s-.08.5-.25.67c-.16.18-.39.26-.67.26ZM11.01,13.97c-.14,0-.25-.04-.33-.14-.09-.09-.13-.23-.14-.41l-.34-7.6c-.01-.27.05-.49.2-.65.14-.16.35-.25.62-.25s.46.08.59.25c.14.16.2.38.19.65l-.34,7.6c0,.18-.04.32-.12.41-.08.09-.19.14-.32.14Z'/%3E %3C/svg%3E");
      --icon-hinweis-recht: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cg fill='%231B7797'%3E %3Cpath d='M13.3,14.55l-.26-.1.25-.12c.99-.51,2.16-1.73,2.16-3.48,0-2.14-1.03-3.5-3.17-4.16l-1.62-.48c-1.19-.36-1.81-1.04-1.81-1.99,0-1.21.79-1.9,2.15-1.9,1.03,0,1.74.39,2.04,1.14.15.38.48.61.84.61h.25c.29,0,.56-.14.73-.38.16-.24.2-.52.11-.79-.55-1.51-2-2.38-3.96-2.38-2.48,0-4.15,1.52-4.15,3.77,0,1.42.57,2.33,1.86,2.97l.23.11-.23.11c-1,.5-2.16,1.71-2.16,3.48,0,2.15,1.02,3.5,3.15,4.16l1.61.48c1.2.37,1.88,1.15,1.88,2.15,0,1.27-.85,2.06-2.22,2.06-1.03,0-1.79-.43-2.12-1.21-.15-.38-.47-.61-.82-.61h-.33c-.29,0-.55.14-.72.38-.17.24-.21.53-.11.79.55,1.57,2.09,2.49,4.1,2.49s4.27-1.24,4.27-3.96c0-1.87-1.06-2.73-1.95-3.13ZM11,13.51c-.71,0-1.3-.24-1.72-.69-.47-.49-.69-1.1-.69-1.9,0-.85.2-1.42.69-1.92.42-.45,1.01-.69,1.72-.69.67,0,1.22.22,1.7.68.48.46.71,1.07.71,1.93,0,1.03-.37,1.56-.7,1.9-.43.45-1,.69-1.71.69Z'/%3E %3C/g%3E%3C/svg%3E");
      --icon-hinweis-rechnen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cg fill='none' stroke='%2348555C' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.56px'%3E %3Cline x1='7.34' y1='4.44' x2='7.34' y2='10.07'/%3E %3Cline x1='10.15' y1='7.25' x2='4.53' y2='7.25'/%3E %3Cline x1='17.34' y1='13.17' x2='13.26' y2='17.25'/%3E %3Cline x1='17.34' y1='17.25' x2='13.26' y2='13.17'/%3E %3Cline x1='9.77' y1='13.99' x2='4.91' y2='13.99'/%3E %3Cline x1='17.73' y1='7.2' x2='12.86' y2='7.2'/%3E %3Cline x1='9.77' y1='17.1' x2='4.91' y2='17.1'/%3E %3Crect x='1.15' y='1.15' width='19.71' height='19.71' transform='translate(22 0) rotate(90)'/%3E %3C/g%3E%3C/svg%3E");
      --icon-drucken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E %3Cpath fill='none' stroke='%23F18700' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.56px' d='M16.77,16.7h3.89v-6.32c0-1.09-.88-1.98-1.98-1.98H3.31c-1.09,0-1.98.89-1.98,1.98v6.32h3.9'/%3E %3Crect fill='none' stroke='%23F18700' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.56px' x='5.23' y='13.33' width='11.54' height='7.65'/%3E %3Crect fill='none' stroke='%23F18700' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.56px' x='5.23' y='1.53' width='11.54' height='6.87'/%3E %3Ccircle fill='%23F18700' cx='3.85' cy='10.87' r='.85'/%3E %3C/svg%3E");
      --icon-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cg fill='none' stroke='%23F18700' stroke-linecap='round' stroke-miterlimit='10' stroke-width='1.56px'%3E %3Cpolyline points='15.6 11.52 11 16.13 6.4 11.52'/%3E %3Cline x1='11' y1='.94' x2='11' y2='15.86'/%3E %3Cpolyline points='20.67 15.4 20.67 20.98 1.33 20.98 1.33 15.4'/%3E %3C/g%3E%3C/svg%3E");
      --icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cg fill='none' stroke='%23F18700' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.56px'%3E %3Cline x1='1.76' y1='1.76' x2='20.24' y2='20.24'/%3E %3Cline x1='20.24' y1='1.76' x2='1.76' y2='20.24'/%3E %3C/g%3E%3C/svg%3E");
      /* ---------- Ende Icons ---------- */
    }

    .k24-blog,
    .k24-blog button,
    .k24-blog input,
    .k24-blog select,
    .k24-blog textarea,
    .k24-blog table,
    .k24-blog th,
    .k24-blog td,
    .k24-blog label {
      font-family: var(--font-body);
    }

    .k24-blog {
      font-size: var(--font-size-base);
      font-weight: 400;
      color: var(--brand-text);
      background-color: #FFFFFF;
      line-height: var(--line-height-base);
      margin: 0;
      padding: 0;
      -webkit-font-smoothing: antialiased;
    }

    .k24-blog, .k24-blog * { box-sizing: border-box; }
    .k24-blog a { text-decoration: none; color: inherit; }

    .k24-blog {
      width: 100%;
      font-family: var(--font-body);
      font-size: var(--bs-body-font-size, var(--font-size-base));
      font-weight: 400;
      line-height: var(--bs-body-line-height, var(--line-height-base));
      color: var(--brand-text);
    }

    .k24-blog *,
    .k24-blog *::before,
    .k24-blog *::after {
      font-family: var(--font-body);
    }

    .k24-blog p {
      font-size: var(--bs-body-font-size, var(--font-size-base));
      line-height: var(--bs-body-line-height, var(--line-height-base));
      margin: 0 0 1rem 0;
      padding: 0;
    }

    /* Einstiegstext unter dem Titel: gleiche Schrift, Groesse und Farbe wie der
       Fliesstext - er ist Einstieg, nicht Auszeichnung. */
    .k24-blog .k24-lead {
      font-size: var(--font-size-base);
      line-height: var(--line-height-base);
      margin: 0 0 1rem;
      color: var(--brand-text);
    }

    .k24-container {
      max-width: 1140px;
      margin: 0 auto;
      padding: 0 24px;
    }

        .k24-toc-box {
      margin: 0;
      text-align: left;
      border: 1px solid var(--brand-line, #C7C2C0);
      border-radius: 12px;
      padding: 28px 40px;
    }
    .k24-toc-box .k24-toc-title {
      margin: 0 0 24px 0;
      font-size: 18px;
      line-height: var(--line-height-base);
      font-weight: 700;
      letter-spacing: 0;
      text-transform: uppercase;
      color: var(--brand-primary);
    }
    /* ===== Shop-Style-Isolation: Listen-Elemente ============================
       Jedes <li> traegt die eigene Klasse .k24-li, jede Liste eine eigene
       k24-Klasse. Dieser Reset neutralisiert die vom Shop-Theme geerbten
       Listen-Styles. Die spezifischeren k24-Listenregeln (bzw. !important bei
       den CTA-Listen) setzen danach das gewuenschte Aussehen. Reset steht
       bewusst VOR allen Listen-Designregeln, damit diese bei gleicher
       Spezifitaet gewinnen. */
    .k24-blog .k24-li {
      margin: 0;
      padding: 0;
      border: 0;
      background: none;
      color: inherit;
      font-size: inherit;
      font-weight: inherit;
      font-style: inherit;
      line-height: inherit;
      list-style: none;
      text-align: left;
      text-indent: 0;
      text-transform: none;
      letter-spacing: normal;
    }

    /* Aufzaehlungen: Fliesstext-Liste (k24-article-list) und FAQ-Liste
       (k24-faq-list) brauchen eigene Klassen, weil der Reset in .k24-li oben die
       Bullets des Shop-Themes entfernt. Beide tragen denselben Punkt-Marker, der
       darum nur einmal steht: Farbe und Groesse aendern sich hier an einer
       Stelle fuer beide Listen. Unterschiedlich bleibt allein der Aussenabstand
       - im Fliesstext braucht die Liste Luft zum Absatz, in der FAQ-Antwort
       sitzt sie enger. */
    .k24-blog .k24-faq-list {
      margin: 8px 0;
      padding: 0;
      list-style: none;
    }
    .k24-blog .k24-article-list {
      margin: 12px 0 16px;
      padding: 0;
      list-style: none;
    }
    .k24-blog .k24-faq-list .k24-li,
    .k24-blog .k24-article-list .k24-li {
      position: relative;
      margin: 0 0 8px;
      padding-left: 16px;
      font-size: var(--bs-body-font-size, var(--font-size-base));
      line-height: var(--line-height-base);
      color: var(--brand-text);
    }
    .k24-blog .k24-faq-list .k24-li:last-child,
    .k24-blog .k24-article-list .k24-li:last-child {
      margin-bottom: 0;
    }
    .k24-blog .k24-faq-list .k24-li::before,
    .k24-blog .k24-article-list .k24-li::before {
      content: "";
      position: absolute;
      left: 2px;
      top: 0.35em;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--brand-primary);
    }

    /* Zweispaltige Aufzaehlung: Ab sechs Punkten wird die einspaltige Liste zu
       einer langen Kolonne und schiebt den Abschnitt unter die Falz. Wie beim
       Inhaltsverzeichnis uebernehmen CSS-Spalten die Aufteilung, damit die
       Lesefolge senkrecht bleibt (erst die linke Spalte, dann die rechte).
       Bis fuenf Punkte bleibt die Liste einspaltig, mehr als acht Punkte
       gehoeren aufgeteilt oder gekuerzt. */
    .k24-blog .k24-article-list--zwei {
      column-count: 2;
      column-gap: 40px;
    }
    .k24-blog .k24-article-list--zwei .k24-li {
      break-inside: avoid;
      margin-bottom: 12px;
    }

    /* Hoehere Spezifitaet (.k24-blog .k24-toc-box ...), damit das Shop-Theme
       die Liste nicht ueber z.B. ".cms-element-text ul { margin-bottom: 1rem }"
       wieder mit einem Bottom-Margin versieht. Sonst entsteht unterhalb des
       letzten Eintrags ein zusaetzlicher Abstand innerhalb des 28px-Paddings. */
    .k24-blog .k24-toc-box .k24-toc-list {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .k24-blog .k24-toc-box .k24-toc-list li {
      margin: 0;
      padding: 0;
      font-size: var(--font-size-p);
      line-height: var(--line-height-base);
    }
    .k24-blog .k24-toc-box .k24-toc-list li + li,
    .k24-blog .k24-toc-box li + li,
    .k24-blog .k24-toc-box .k24-li + .k24-li {
      margin-top: 16px;
    }
    /* Letzter Eintrag darf keinen Bottom-Margin vom Shop-Theme erben */
    .k24-blog .k24-toc-box .k24-toc-list,
    .k24-blog .k24-toc-box .k24-toc-list li:last-child {
      margin-bottom: 0;
    }
    .k24-toc-list a {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      line-height: var(--line-height-base);
      color: var(--brand-text);
      font-weight: 700;
    }
    /* Shop-Theme zeichnet sonst einen Unterstrich ueber den ganzen Link
       (inkl. Pfeil aus ::before) - hier hart unterdruecken. Listenlinks
       bleiben ohne Unterstrich; Bewegung zeigt der Pfeil. */
    .k24-toc-list a,
    .k24-toc-list a:link,
    .k24-toc-list a:visited,
    .k24-toc-list a:hover,
    .k24-toc-list a:focus,
    .k24-toc-list a:active,
    .k24-toc-list a::before,
    .k24-toc-list a span {
      text-decoration: none !important;
      border-bottom: none !important;
    }
    .k24-toc-list a::before {
      content: "";
      flex: 0 0 auto;
      width: 17px;
      height: 11px;
      position: relative;
      top: 0;
      margin-top: 4px;
      background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016.75%2010.77'%3E%3Cpolyline%20points='11.36%20.78%2015.97%205.38%2011.36%209.99'%20fill='none'%20stroke='%23f18703'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='1.56'/%3E%3Cline%20x1='.78'%20y1='5.38'%20x2='15.7'%20y2='5.38'%20fill='none'%20stroke='%23f18703'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='1.56'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      transition: transform 0.15s ease;
    }
    .k24-toc-box:not(.k24-cluster) .k24-toc-list a:hover::before {
      transform: translateX(3px);
    }
    .k24-toc-list a:hover {
      color: var(--brand-primary);
    }

    /* ========== 2. ARTIKEL-STRUKTUR & TYPO ========== */
    .k24-article-wrapper {
      padding: 0 0 60px;
    }
    /* Ein Rhythmus fuer alle Module: 84px zwischen direkten Geschwistern
       im Wrapper (und Advisor/TOC davor). Einzelne Module setzen ihren
       Aussenabstand nicht mehr selbst – sonst entstehen 20/28/40/60/84-Mixe. */
    .k24-blog .k24-container > .k24-advisor-block,
    .k24-blog .k24-container > .k24-toc-box:not(.k24-cluster),
    .k24-blog .k24-article-wrapper > *:not(details) {
      margin-top: 0 !important;
      margin-bottom: var(--k24-modul-abstand) !important;
    }
    .k24-blog .k24-article-wrapper > .k24-marken-cta,
    .k24-blog .k24-article-wrapper > *:last-child {
      margin-bottom: 0 !important;
    }
    .k24-article-section {
      margin-bottom: 0;
    }
    #k24-modelllinien {
      margin-bottom: 0;
    }
    .k24-article-text {
      margin-bottom: 0;
    }
    /* H1 gehoert nicht in den Seitencontent (dort H2). Spec fuer Shop-Titel
       bzw. Vorschau, sobald die H1 in .k24-blog steht. */
    .k24-blog h1 {
      font-size: var(--font-size-h1);
      font-family: inherit;
      font-weight: 700;
      line-height: var(--line-height-heading);
      color: var(--brand-heading);
      text-transform: uppercase;
      margin: 0 0 1.25rem 0;
      padding: 0;
    }
    .k24-article-section h2 {
      width: 100%;
      font-size: var(--font-size-h2);
      font-family: inherit;
      font-weight: 700;
      line-height: var(--line-height-heading);
      color: var(--brand-heading);
      text-align: start;
      text-transform: uppercase;
      margin: 0 0 1.25rem 0;
      padding: 0;
    }
    /* Neue H2-Abschnitte: 84px davor. Steht ein Eyebrow direkt davor,
       bleibt der 8px-Abstand Eyebrow–H2; der 84px-Rhythmus sitzt dann
       vor dem Eyebrow (Modulabstand der Sektion). */
    .k24-article-section > * + h2 {
      margin-top: var(--k24-modul-abstand);
    }
    .k24-article-section > .k24-section-eyebrow + h2 {
      margin-top: 0;
    }
    
    .k24-article-section h3 {
      font-size: var(--font-size-h3);
      font-weight: 600;
      line-height: var(--line-height-heading);
      color: var(--brand-heading);
      margin: 32px 0 16px 0;
    }

    /* Steht immer UEBER dem Haupttitel. Die zweite Selektorhaelfte gilt auch
       ausserhalb einer k24-article-section, damit Module wie Zitat oder
       Checkliste dieselbe Zeile bekommen. */
    .k24-article-section .k24-section-eyebrow,
    .k24-blog .k24-section-eyebrow {
      display: block;
      width: auto;
      font-size: 18px;
      font-weight: 700;
      line-height: 18px;
      letter-spacing: 0px;
      text-transform: uppercase;
      color: var(--brand-primary);
      margin: 0 0 8px 0;
    }
    
    .k24-article-section p {
      font-size: var(--bs-body-font-size, var(--font-size-base));
      line-height: var(--bs-body-line-height, var(--line-height-base));
      font-weight: 400;
      color: var(--brand-text);
      margin: 0 0 1rem 0;
      padding: 0;
    }

    .k24-article-section ul, .k24-article-section ol {
      font-size: var(--bs-body-font-size, var(--font-size-base));
      line-height: var(--bs-body-line-height, var(--line-height-base));
      color: var(--brand-text);
      margin-bottom: 32px;
      padding-left: 16px;
    }
    .k24-article-section li { margin-bottom: 8px; }
    .k24-article-section a:not(.k24-arrow-btn):not(.k24-model-link):not(.k24-typen-card__hit):not(.k24-bildzeile__link):not(.k24-system__title):not(.k24-bildtafel__link):not(.btn) {
      color: var(--brand-primary);
      font-weight: 700;
      text-decoration: none;
      border-bottom: 1px solid transparent;
      transition: border-color 0.2s;
    }
    .k24-article-section a:not(.k24-arrow-btn):not(.k24-model-link):not(.k24-typen-card__hit):not(.k24-bildzeile__link):not(.k24-system__title):not(.k24-bildtafel__link):not(.btn):hover {
      border-bottom-color: var(--brand-primary);
    }

    
    /* 20px ueber der ersten Zeile: Der Einstiegstext bringt nur 16px mit, der
       groessere Wert des Rasters gewinnt beim Zusammenfallen der Abstaende. */
    .k24-features-grid {
      margin-top: 20px;
    }
    .k24-features-grid ul {
      display: grid;
      grid-template-columns: 1fr 1fr;
      /* Zeilen 16px, Spalten 32px: Innerhalb der Aufzaehlung stehen die Zeilen
         eine Stufe enger als das Raster zum Text davor und danach (20px) - so
         haelt die Liste als Block zusammen. Nebeneinander braucht es mehr Luft,
         sonst laufen die beiden Spalten optisch zusammen. */
      gap: 16px 32px;
      padding-left: 0;
      list-style: none;
      /* Kein Modulabstand hier: Folgt Fliesstext, gilt dieselbe 20px-Stufe wie
         oben. Den 84px-Rhythmus zum naechsten Modul setzt die Sektion. */
      margin-bottom: 20px;
    }
    .k24-features-grid li {
      margin-bottom: 0;
      padding-left: 32px !important;
      position: relative;
    }
    .k24-features-grid li > strong:first-child {
      display: block;
      margin-bottom: 8px;
    }
    .k24-features-grid li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 20px;
      height: 20px;
      overflow: visible;
      background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6L9 17l-5-5' stroke='%23F18700' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }

    /* ========== INFO-/ZITAT-BLOCK ========== */
    .k24-quote-wrap {
      margin: var(--k24-modul-abstand) 0 var(--k24-baustein-abstand);
    }
    .k24-quote-wrap .k24-quote-heading {
      font-size: var(--font-size-h2);
      font-weight: 700;
      line-height: var(--line-height-heading);
      color: var(--brand-heading);
      text-transform: uppercase;
      margin: 0 0 1.25rem 0;
    }
    .k24-quote-block {
      display: flex;
      align-items: flex-start;
      gap: 24px;
      background-color: var(--brand-light-grey);
      border-radius: 12px;
      padding: 32px 36px;
      margin: 0;
      quotes: none;
    }
    /* Shopware/Bootstrap-Theme fügt blockquote oft ein eigenes Anführungszeichen via ::before hinzu – hier unterdrücken, da das Modul sein eigenes .k24-quote-mark mitbringt */
    .k24-quote-block::before,
    .k24-quote-block::after {
      content: none !important;
    }
    .k24-quote-block .k24-quote-mark {
      flex: 0 0 auto;
      font-family: var(--font-decorative);
      font-size: 64px;
      font-weight: 700;
      line-height: 1;
      color: var(--brand-primary);
    }
    .k24-quote-block .k24-quote-content {
      flex: 1 1 auto;
      min-width: 0;
    }
    .k24-quote-block p {
      font-size: var(--bs-body-font-size, var(--font-size-base));
      font-weight: 400;
      font-style: normal;
      line-height: var(--bs-body-line-height, var(--line-height-base));
      color: var(--brand-dark);
      margin: 0;
    }
    .k24-quote-block .k24-quote-cite {
      margin: 16px 0 0 0;
      font-size: var(--font-size-base);
      font-weight: 400;
      font-style: normal;
      line-height: var(--line-height-sm);
      color: var(--brand-text);
    }
    .k24-quote-block .k24-quote-cite strong {
      font-weight: 700;
      color: var(--brand-dark);
    }

    /* ========== 6. FAQ AKKORDEON ========== */
    .k24-faq-section { margin: 0; }
    .k24-faq-section h2,
    .k24-article-section h2 {
      color: var(--brand-heading);
    }
    .k24-faq-container {
      font-family: inherit;
      max-width: 100%;
    }
    .k24-faq-item {
      position: relative;
      background-color: #ffffff;
      border: 1px solid var(--brand-line, #C7C2C0);
      border-radius: 12px;
      margin-bottom: 12px;
      overflow: hidden;
    }
    .k24-faq-item:last-child {
      margin-bottom: 0;
    }
    .k24-faq-item[open] {
      border-color: var(--brand-line, #C7C2C0);
      box-shadow: inset 3px 0 0 var(--brand-primary);
    }
    .k24-faq-item[open]::before {
      content: none;
    }
    /* Titel und Koerper ohne eigene Flaeche, sonst decken sie den
       Innen-Schatten zu und die Kante bleibt eine gerade Linie. */
    .k24-faq-item[open] .k24-faq-button,
    .k24-faq-item[open] .k24-faq-body {
      background-color: transparent;
    }
    .k24-faq-item[open] .k24-faq-button:hover {
      background: linear-gradient(to right, transparent 3px, var(--brand-light-grey) 3px);
    }
    .k24-faq-button {
      width: 100%;
      padding: 16px 20px;
      font-family: inherit;
      font-size: var(--font-size-p);
      font-weight: 700;
      color: var(--brand-text);
      background-color: #ffffff;
      border: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      text-align: left;
      transition: background-color 0.2s ease;
      list-style: none;
    }
    .k24-faq-button::-webkit-details-marker {
      display: none;
    }
    .k24-faq-button:hover {
      background-color: var(--brand-light-grey);
    }
    .k24-faq-button::after {
      content: "";
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      margin-left: auto;
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F18700'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-size: 20px;
      transition: transform 0.35s ease-in-out;
    }
    .k24-faq-item[open] .k24-faq-button::after {
      transform: rotate(-180deg);
    }
    .k24-faq-body {
      overflow: hidden;
      padding: 16px 20px;
      background-color: #ffffff;
      color: var(--brand-text);
      font-family: inherit;
      font-size: var(--font-size-p);
      font-weight: 400;
      line-height: var(--line-height-base);
    }
    .k24-faq-body p {
      color: var(--brand-text);
      font-size: var(--bs-body-font-size, var(--font-size-base));
      line-height: var(--bs-body-line-height, var(--line-height-base));
      margin: 0 0 1rem 0;
      padding: 0;
    }
    .k24-faq-body li {
      color: var(--brand-text);
      font-size: var(--font-size-p);
      line-height: var(--line-height-base);
    }
    .k24-faq-body ul:last-child {
      margin-bottom: 0;
    }
    .k24-faq-body strong {
      color: var(--brand-text);
    }

    /* ========== RESPONSIVE ========== */
    @media (max-width: 768px) {
      .k24-blog h1 { font-size: 25px; }
      .k24-container { padding: 0 12px; }

      .k24-article-wrapper { padding: 0 0 32px; }
      .k24-article-section ul { font-size: var(--font-size-base); line-height: var(--line-height-base); }

      .k24-features-grid ul { grid-template-columns: 1fr; }

      .k24-quote-wrap { margin: var(--k24-modul-abstand) 0 var(--k24-baustein-abstand); }
      .k24-quote-block { padding: 24px 24px; gap: 16px; }
      .k24-quote-block .k24-quote-mark { font-size: 48px; }
    }

    /* ========== TOOLTIP ========== */
    .k24-tt {
      border-bottom: 1px dashed var(--brand-primary);
      cursor: help;
      white-space: nowrap;
    }
    #k24-tt-box {
      position: fixed;
      z-index: 9999;
      background: var(--brand-dark, #46322B);
      color: #fff;
      font-family: var(--font-body, "dinot", "Kamdi24 DIN OT", "Open Sans", sans-serif);
      font-size: var(--font-size-sm, 14px);
      line-height: var(--line-height-sm, 20px);
      padding: 8px 16px;
      border-radius: var(--radius-brand, 8px);
      max-width: 280px;
      pointer-events: none;
      box-shadow: 0 4px 16px rgba(0,0,0,0.28);
      display: none;
    }
    #k24-tt-box::after {
      content: '';
      position: absolute;
      bottom: -6px;
      left: var(--k24-arrow-left, 16px);
      border-width: 6px 6px 0;
      border-style: solid;
      border-color: var(--brand-dark, #46322B) transparent transparent;
    }

    /* ===== Shop-Style-Isolation: Tabellen-Elemente ==========================
       Jedes Tabellen-Element hat eine eigene k24-Klasse. Dieser Reset
       neutralisiert alle vom Shop-Theme geerbten Tag-Styles (td, th, tr ...),
       BEVOR die k24-Designregeln (höhere Spezifität) das gewünschte Aussehen
       wieder setzen. So koennen Shop-Styles die Tabelle nicht beeinflussen. */
    .k24-blog .k24-seg-table__head,
    .k24-blog .k24-seg-table__body,
    .k24-blog .k24-seg-table__row,
    .k24-blog .k24-seg-table__th,
    .k24-blog .k24-seg-table__td {
      margin: 0;
      border: 0;
      background: none;
      box-shadow: none;
      box-sizing: border-box;
      color: inherit;
      font: inherit;
      text-align: left;
      vertical-align: middle;
      white-space: normal;
      letter-spacing: normal;
      text-transform: none;
    }

    .k24-blog .k24-seg-table {
      width: 100%;
      box-sizing: border-box;
      /* Shop-Theme-Isolation: .seo-wrapper table setzt display:block + overflow:auto,
         wodurch das Tabellengitter zusammenschrumpft und nach links verrutscht.
         Echtes Tabellen-Layout erzwingen, damit width:100% die Spalten fuellt. */
      display: table !important;
      overflow: visible;
      border-collapse: collapse;
      margin: 12px 0 var(--k24-baustein-abstand);
      font-size: var(--font-size-sm);
      line-height: var(--line-height-sm);
    }
    /* Shop-Theme-Isolation: Der graue Kopf-Hintergrund muss auf den Zellen (th)
       selbst liegen, nicht nur auf der Zeile (tr). Bootstrap/Shopware malt einen
       weissen Zell-Hintergrund (.seo-wrapper table > * > th), der – da Zellen ueber
       der Zeile gerendert werden – das tr-Background sonst verdeckt (weisser Kopf). */
    .k24-blog .k24-seg-table thead tr,
    .k24-blog .k24-seg-table thead tr > th,
    .k24-blog .k24-seg-table thead tr > .k24-seg-table__th {
      background: var(--brand-bg) !important;
      border-bottom: 0 !important;
    }
    /* Erste Spalte linksbuendig, alle weiteren zentriert: Die erste Spalte
       fuehrt den Namen und liest sich wie Fliesstext, die uebrigen tragen
       kurze Messwerte und stehen darum mittig unter ihrem Kopf. Gilt fuer
       Modellvergleich und Datentabelle gleichermassen. */
    .k24-blog .k24-seg-table thead th {
      padding: 8px 12px;
      box-shadow: none !important;
      text-align: left;
      height: 45px;
      font-size: 14px;
      font-weight: 700;
      line-height: 18px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--brand-heading);
      white-space: nowrap;
    }
    .k24-blog .k24-seg-table thead th:not(:first-child) {
      text-align: center;
    }
    /* Sortierbare Spaltenköpfe */
    .k24-blog .k24-seg-table thead th.k24-sortable {
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
      transition: color 0.1s;
    }
    .k24-blog .k24-seg-table thead th.k24-sortable:hover {
      color: var(--brand-primary);
    }
    .k24-blog .k24-seg-table thead th.k24-sortable:focus-visible {
      outline: 2px solid var(--brand-primary);
      outline-offset: -2px;
    }
    /* Titeltext + Sortier-Pfeile gemeinsam vertikal/horizontal mittig ausrichten */
    .k24-blog .k24-seg-table thead th .k24-seg-th-inner {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      vertical-align: middle;
    }
    .k24-blog .k24-seg-table thead th .k24-seg-sort-ind {
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 1px;
      font-size: 11px;
      line-height: 1;
      vertical-align: middle;
      transform: translateY(0);
      transition: color 0.1s;
    }
    .k24-blog .k24-seg-table thead th .k24-seg-sort-ind .k24-seg-sort-up,
    .k24-blog .k24-seg-table thead th .k24-seg-sort-ind .k24-seg-sort-down {
      display: block;
      opacity: 0.4;
      transition: opacity 0.1s, color 0.1s;
    }
    .k24-blog .k24-seg-table thead th .k24-seg-sort-ind .k24-seg-sort-down {
      margin-left: -4px;
    }
    .k24-blog .k24-seg-table thead th.k24-sortable:hover .k24-seg-sort-ind .k24-seg-sort-up,
    .k24-blog .k24-seg-table thead th.k24-sortable:hover .k24-seg-sort-ind .k24-seg-sort-down {
      opacity: 0.75;
    }
    .k24-blog .k24-seg-table thead th.k24-sort-asc .k24-seg-sort-ind .k24-seg-sort-up {
      opacity: 1;
      color: var(--brand-primary);
    }
    .k24-blog .k24-seg-table thead th.k24-sort-desc .k24-seg-sort-ind .k24-seg-sort-down {
      opacity: 1;
      color: var(--brand-primary);
    }
    /* Grauer Kopf-Balken bis zum linken/rechten Rand des Panels durchziehen
       (kompensiert das horizontale Padding von 16px des .k24-linien-tab-panel) */
    .k24-blog .k24-seg-table thead th:first-child,
    .k24-blog .k24-seg-table thead th:last-child {
      position: relative;
    }
    .k24-blog .k24-seg-table thead th:first-child::before,
    .k24-blog .k24-seg-table thead th:last-child::before {
      content: "";
      position: absolute;
      box-sizing: content-box;
      top: 0;
      bottom: 0;
      width: 16px;
      background: var(--brand-bg);
    }
    .k24-blog .k24-seg-table thead th:first-child::before { right: 100%; }
    .k24-blog .k24-seg-table thead th:last-child::before { left: 100%; }
    .k24-blog .k24-seg-table tbody tr {
      border-bottom: 1px solid var(--brand-border);
      transition: background 0.1s;
    }
    /* Shop-Theme-Isolation: Zebra-Streifen bzw. geerbte Zeilen-Hintergruende
       neutralisieren – inkl. Bootstrap-.table-Trick (box-shadow: inset ...).
       Zeilen sind damit standardmaessig transparent; nur der Hover-State greift. */
    .k24-blog .k24-seg-table tbody tr,
    .k24-blog .k24-seg-table tbody tr > td,
    .k24-blog .k24-seg-table tbody tr > .k24-seg-table__td {
      background: transparent !important;
      box-shadow: none !important;
    }
    .k24-blog .k24-seg-table tbody tr:hover {
      background: #fdf9f6 !important;
    }
    .k24-blog .k24-seg-table td {
      padding: 8px 12px;
      height: 50px;
      vertical-align: middle;
      color: var(--brand-dark);
    }
    .k24-blog .k24-seg-table td:first-child {
      font-weight: 700;
      color: var(--brand-dark);
      width: 22%;
      text-align: left;
    }
    .k24-blog .k24-seg-table td:nth-child(2) {
      width: 30%;
    }
    .k24-blog .k24-seg-table td:nth-child(3) {
      width: 24%;
    }
    .k24-blog .k24-seg-table td:nth-child(4) {
      width: 24%;
    }
    .k24-blog .k24-seg-table td:not(:first-child) {
      text-align: center;
    }
    .k24-blog .k24-seg-chip {
      font-size: var(--font-size-sm);
      font-weight: 400;
      line-height: 16px;
      padding: 4px 8px;
      border-radius: var(--radius-pill);
      background: #FFFFFF;
      color: #46322B;
      border: 1px solid rgba(241, 135, 0, 0.75);
      white-space: nowrap;
      min-width: 70px;
      text-align: center;
      display: inline-block;
    }
    /* Wert-Chips (Wohnflaeche, kW): weisser Grund wie auf den Markenseiten.
       Keine blauen Flaechen oder Rahmen - eine ruhige Tabellenoptik. */
    .k24-blog .k24-seg-chip--area {
      min-width: 80px;
      border: none;
      background: #FFFFFF;
      color: #46322B;
      font-weight: 400;
    }
    .k24-blog .k24-seg-chip--area-s,
    .k24-blog .k24-seg-chip--area-m,
    .k24-blog .k24-seg-chip--area-l {
      background: #FFFFFF;
    }
    .k24-blog .k24-seg-chip--kw {
      background: #FFFFFF;
      color: #46322B;
      border: none;
      font-weight: 400;
      min-width: 64px;
    }
    .k24-blog .k24-seg-chip--kw-7,
 .k24-blog .k24-seg-chip--kw-8 {
      border: none;
    }
    /* Neutraler Wert-Chip fuer Textwerte (Brennstoff, Bedienung, ja/nein).
       Ohne Chip erben die Zellen die Fliesstextgroesse und wirken groesser
       als die Werte in den anderen Tabellen. */
    .k24-blog .k24-seg-chip--wert {
      background: #FFFFFF;
      color: #46322B;
      border: none;
      font-weight: 400;
      min-width: 64px;
      white-space: normal;
    }

    .k24-blog .k24-seg-note {
      font-size: var(--bs-body-font-size, var(--font-size-base));
      line-height: var(--bs-body-line-height, var(--line-height-base));
      font-weight: 400;
      color: var(--brand-text);
      margin: 1.5rem 0 1rem 0;
      padding: 0;
    }

    .k24-blog .k24-arrow-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      margin: 32px auto 20px auto;
      background: transparent;
      color: var(--brand-primary);
      font-weight: 600;
      text-decoration: none;
      line-height: 1.5;
      padding: 9px 20px 7px;
      font-size: var(--font-size-base);
      border: 1px solid var(--brand-primary);
      border-radius: 8px 0 8px 0;
      white-space: nowrap;
      transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
    }
    /* Winkel statt Pfeil-mit-Strich: derselbe Haken wie im FAQ, nur nach rechts.
       Ein Zeichen fuer alle Weiterfuehrungen.
       Der Kasten ist 14px breit, der gezeichnete Haken darin nur rund 7px - links
       und rechts bleiben je ~3,5px Luft. Ohne Ausgleich messen sich links 24px und
       rechts 30px bis zum Rahmen, und der Text sitzt sichtbar links der Mitte.
       margin-right zieht die Kastenluft rechts wieder heraus, margin-left ist um
       denselben Betrag kleiner - so stehen 24px links und 24px rechts. */
    .k24-blog .k24-arrow-btn::after {
      content: "";
      display: inline-block;
      width: 14px;
      height: 14px;
      margin-left: 8px;
      margin-right: -4px;
      position: relative;
      top: -1px;
      flex-shrink: 0;
      background-image: var(--icon-chevron-rechts);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      transition: transform 0.15s ease;
    }
    .k24-blog .k24-arrow-btn:hover {
      background: rgba(241, 135, 0, 0.04);
      color: var(--brand-primary);
      border-color: var(--brand-primary);
    }
    .k24-blog .k24-arrow-btn:hover::after {
      transform: translateX(3px);
    }
    /* Mobil: feste, am Block ausgerichtete Breite, damit der Button nie über
       den Container hinausläuft und seine seitlichen Abstände behält. Langer
       Text darf umbrechen und wird zentriert. */
    @media (max-width: 480px) {
      .k24-blog .k24-arrow-btn {
        width: auto;
        max-width: 100%;
        box-sizing: border-box;
        white-space: normal;
        text-align: center;
      }
    }

    /* Button als eigenes Modul: eigener Block mit eigenen Abstaenden, nicht
       Bestandteil des Textblocks darueber. */
    .k24-blog .k24-cta-btn {
      display: flex;
      justify-content: center;
      margin: 28px 0 40px;
    }
    .k24-blog .k24-cta-btn .k24-arrow-btn {
      margin: 0;
    }
    /* Derselbe Baustein laesst sich in ein anderes Modul stellen, statt darunter:
       im Tab-Panel und in der Datentabelle sitzt er unter der Fussnote und
       innerhalb des Rahmens - so, wie er auf den Markenseiten fest eingebaut war,
       nur jetzt als bewusst gesetztes Modul. */
    .k24-blog .k24-linien-tab-panel > .k24-cta-btn,
    .k24-blog .k24-datentabelle > .k24-cta-btn {
      margin: 16px 0 4px;
    }
    .k24-blog .k24-seg-note + .k24-cta-btn {
      margin-top: 16px;
    }
    /* Im Textteil einer Bild-Text-Zeile steht der Button links am Text, nicht
       mittig - er gehoert zum Absatz daneben, nicht zur ganzen Sektion. */
    .k24-blog .k24-hinweis > .k24-cta-btn {
      justify-content: flex-start;
      margin: 16px 0 0;
    }

    /* ========== CHIP-INFOBOX ========== */
    .k24-chip-info {
      position: relative;
      display: inline-block;
    }
    .k24-chip-info .k24-seg-chip {
      cursor: help;
    }
    .k24-chip-infobox {
      display: none;
      position: absolute;
      bottom: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%);
      background: var(--brand-dark);
      color: #fff;
      font-family: inherit;
      font-size: var(--font-size-note);
      line-height: var(--line-height-sm);
      padding: 8px 16px;
      border-radius: var(--radius-brand);
      width: 220px;
      z-index: 9999;
      pointer-events: none;
      box-shadow: 0 4px 16px rgba(0,0,0,0.28);
      text-align: left;
      font-weight: 400;
    }
    .k24-chip-infobox strong {
      font-family: inherit;
      display: block;
      font-size: var(--font-size-xs);
      line-height: 16px;
      color: var(--brand-primary);
      margin-bottom: 4px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .k24-chip-infobox::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border-width: 6px 6px 0;
      border-style: solid;
      border-color: var(--brand-dark) transparent transparent;
    }
    .k24-chip-info:hover .k24-chip-infobox,
    .k24-chip-info:focus-within .k24-chip-infobox {
      display: block;
    }

    /* Modell-Link in Tabelle */
    .k24-blog .k24-seg-table td a.k24-model-link {
      color: var(--brand-dark);
      font-size: var(--font-size-sm);
      font-weight: 700;
      text-decoration: none;
      border-bottom: 1px solid var(--brand-primary);
      transition: color 0.15s;
    }
    .k24-seg-table td a.k24-model-link:hover {
      color: var(--brand-primary);
    }

    /* Modellname ohne Verlinkung (Produkt-URLs vermeiden 404 bei Auslistung) */
    .k24-blog .k24-seg-table td .k24-model-name {
      color: var(--brand-dark);
      font-size: var(--font-size-sm);
      font-weight: 700;
    }
    /* Traegt der Modellname eine Erlaeuterung, bleibt die gestrichelte Linie
       weg - die Tabellenzeile fuehrt schon genug Kanten. Umbrechen muss er
       duerfen, sonst sprengt ein langer Name die Spalte. */
    .k24-blog .k24-seg-table .k24-model-name.k24-tt {
      border-bottom: none;
      white-space: normal;
      cursor: help;
    }

    /* Stil-Badge */
    .k24-blog .k24-seg-chip--style {
      background: #FFFFFF;
      color: #46322B;
      border: none;
      min-width: 80px;
      font-family: inherit;
      font-size: var(--font-size-sm);
      font-weight: 400;
      line-height: 16px;
      letter-spacing: 0;
    }

    /* Modell-Linien-Tabelle (alle Tabs) und freistehende Datentabellen:
       Wohnfläche-, Leistungs- und Wert-Chips im ruhigen Stil-Chip-Design -
       eine Tabellenoptik ohne farbige Pillen. */
    .k24-blog #k24-modelllinien .k24-seg-chip--area,
    .k24-blog #k24-modelllinien .k24-seg-chip--kw,
    .k24-blog .k24-datentabelle .k24-seg-chip--area,
    .k24-blog .k24-datentabelle .k24-seg-chip--kw {
      background: #FFFFFF;
      color: #46322B;
      border: none;
      min-width: 80px;
      font-weight: 400;
    }
    
    .k24-blog .k24-btn-primary {
      display: inline-block;
      background-color: #F18700;
      color: #000000;
      font-family: inherit;
      font-size: var(--font-size-base);
      font-weight: 600;
      line-height: 2.125rem;
      padding: 2px 12px;
      border: 1px solid #F18700;
      border-radius: var(--radius-brand);
      cursor: pointer;
      text-decoration: none;
      transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
    }
    .k24-blog .k24-btn-primary:hover {
      color: #000000;
      background-color: #f39926;
      border-color: #f29319;
    }
    @media (max-width: 768px) {
      .k24-blog .k24-seg-table thead { display: none; }
      .k24-blog .k24-seg-table tbody tr {
        display: block;
        border: 1px solid var(--brand-border);
        border-radius: var(--radius-brand);
        padding: 8px 12px;
        margin-bottom: 8px;
        background: #fff !important;
      }
      .k24-blog .k24-seg-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 0;
        text-align: left !important;
        width: auto !important;
        border: none;
      }
      /* 1. Spalte: Zeilenwert mit Spaltenkopf als Label links (data-label). */
      .k24-blog .k24-seg-table td:first-child {
        font-size: var(--font-size-base);
        border-bottom: 1px solid var(--brand-border);
        padding-bottom: 8px !important;
        margin-bottom: 4px;
      }
      .k24-blog .k24-seg-table td:first-child[data-label] {
        justify-content: space-between;
      }
      /* Mobil: Spaltenkoepfe links, normale Schreibweise, 14 px (dinot). */
      .k24-blog .k24-seg-table td[data-label]::before {
        content: attr(data-label);
        font-size: var(--font-size-sm);
        font-weight: 700;
        line-height: var(--line-height-sm);
        text-transform: none;
        letter-spacing: normal;
        color: var(--brand-text);
        padding-right: 14px;
      }
      /* 2. Spalte: Stil – Plain-Text im tab-models-Look.
         Nur im Modellvergleich: freistehende Datentabellen fuehren dort eine
         normale Datenspalte und behalten ihr data-label.
         Keine Trennlinie: In der Karte trennt allein die durchgezogene Linie
         unter Modell / Linie den Kopf von den Werten. Jede weitere Linie
         zerlegt die Karte in Streifen. */
      .k24-blog #k24-modelllinien .k24-seg-table td:nth-child(2) {
        justify-content: flex-start;
      }
      .k24-blog #k24-modelllinien .k24-seg-table td:nth-child(2)[data-label] {
        justify-content: space-between;
      }
      .k24-blog .k24-seg-table td:nth-child(2) .k24-chip-info { pointer-events: none; }
      .k24-blog .k24-seg-table td:nth-child(2) .k24-chip-infobox { display: none !important; }
      .k24-blog #k24-modelllinien .k24-seg-table td:nth-child(2):not([data-label])::before { content: none; }
      /* Nur der Modellvergleich: dort ist die 2. Spalte die Stil-Angabe und
         laeuft mobil als kleine Beischrift unter dem Modellnamen. Freistehende
         Datentabellen fuehren dort einen normalen Wert - der bleibt in der
         Wertgroesse (siehe Datentabelle-Block weiter unten). */
      .k24-blog #k24-modelllinien .k24-seg-table td:nth-child(2) .k24-seg-chip--style {
        background: none;
        border: none;
        padding: 0;
        min-width: 0;
        font-size: var(--font-size-xs);
        font-weight: 400;
        line-height: 16px;
        color: var(--brand-dark);
        text-align: left;
      }
      /* 3. Spalte aufwaerts: Label kommt aus data-label (siehe oben). Frueher
         standen hier "Wohnfläche" und "Leistung" fest verdrahtet - auf Grill-
         und Zubehoerseiten also der falsche Kopf ueber der Spalte. Weil die
         Regeln eine ID trugen, schlugen sie jedes data-label. */
      .k24-blog .k24-linien-tab-panel .k24-seg-table td:nth-child(n+3)::before {
        font-size: var(--font-size-sm);
        font-weight: 700;
        line-height: var(--line-height-sm);
        text-transform: none;
        letter-spacing: normal;
        color: var(--brand-text);
        padding-right: 14px;
      }
      .k24-blog .k24-seg-chip, .k24-blog .k24-seg-chip--area, .k24-blog .k24-seg-chip--kw {
        white-space: normal;
        min-width: 0;
      }
      /* Tabellenwerte ohne Chip-Blase: sonst ruecken die Zahlen neben dem Label.
         Gilt fuer Datentabelle, Einzel-Linien-Tabelle und Modelllinien-Panels. */
      .k24-blog .k24-datentabelle .k24-seg-chip,
      .k24-blog .k24-linien-tabs--single .k24-seg-chip,
      .k24-blog #k24-modelllinien .k24-seg-chip,
      .k24-blog .k24-seg-table .k24-seg-chip {
        background: none;
        border: none;
        border-radius: 0;
        padding: 0;
        min-width: 0;
        display: inline;
        box-shadow: none;
      }
    }
    
    /* ========== MARKEN-CTA-BLOCK ========== */
    .k24-marken-cta {
      display: grid;
      grid-template-columns: 60% 40%;
      gap: 0;
      background: var(--brand-light-grey);
      border: 1px solid #D9D9D9;
      border-radius: 12px;
      overflow: hidden;
      margin: 0;
    }
    .k24-marken-cta__main {
      padding: 28px 36px 32px;
    }
    .k24-marken-cta__main h3 {
      font-size: var(--font-size-h3);
      font-weight: 700;
      line-height: var(--line-height-heading);
      color: var(--brand-heading);
      margin: 0 0 8px 0;
    }
    .k24-marken-cta__main > p {
      font-size: var(--bs-body-font-size, var(--font-size-base)) !important;
      line-height: var(--bs-body-line-height, var(--line-height-base));
      color: var(--brand-text);
      margin: 0 0 1rem 0 !important;
      padding: 0;
    }
    .k24-marken-cta__usps {
      list-style: none !important;
      padding: 0 !important;
      margin: 0 !important;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .k24-blog .k24-marken-cta__usps li.k24-li {
      font-size: var(--bs-body-font-size, var(--font-size-base)) !important;
      font-weight: 700 !important;
      color: var(--brand-heading);
      padding-left: 28px !important;
      position: relative;
      margin: 0 !important;
      line-height: var(--line-height-base);
    }
    .k24-marken-cta__usps li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 1px;
      width: 18px;
      height: 18px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23F18700' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-size: 18px 18px;
    }
    .k24-marken-cta__brand {
      background: #fff;
      padding: 28px 36px 32px;
      display: flex;
      flex-direction: column;
    }
    .k24-marken-cta__logo { margin-bottom: 16px; }
    .k24-marken-cta__logo-img {
      display: block;
      width: 165px;
      max-width: 100%;
      height: auto;
    }
    /* Markenlogo mit quadratischer Zeichenflaeche (Logo_kamdi24_komplett_RGB.svg
       und die FR-Fassung): Das Motiv steht mittig in 283,5 x 283,5 und belegt
       darin nur 216 x 93. Unbeschnitten waere das Logo im CTA ein Viertel
       kleiner und braechte gut 140px leere Hoehe mit. Der Rahmen zeigt darum
       nur den Bildinhalt: die Zeichenflaeche laeuft auf 217px (165 geteilt durch
       216 sichtbare Breite), verschoben um die Leerraender links (34) und oben
       (95). Es entstehen dieselben 165 x 71 wie beim vorherigen, bereits
       beschnittenen Logo. */
    .k24-marken-cta__logo--voll {
      width: 165px;
      height: 71px;
      overflow: hidden;
    }
    .k24-marken-cta__logo--voll .k24-marken-cta__logo-img {
      width: 217px;
      height: 217px;
      max-width: none;
      margin: -73px 0 0 -26px;
    }
    .k24-marken-cta__company {
      font-size: var(--font-size-sm) !important;
      line-height: var(--line-height-sm);
      color: var(--brand-text);
      margin: 0 0 20px 0 !important;
      padding: 0;
    }
    .k24-marken-cta__contact {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
      margin-top: auto;
    }
    .k24-blog .k24-marken-cta__contact a.k24-marken-cta__btn {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 14px !important;
      font-weight: 700 !important;
      line-height: 1 !important;
      text-decoration: none !important;
      padding: 9px 16px 7px !important;
      border-radius: 8px 0 8px 0 !important;
      width: 211px;
      max-width: 100%;
      white-space: nowrap;
      transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
    }
    .k24-blog .k24-marken-cta__contact a.k24-marken-cta__btn svg {
      display: block;
      flex: none;
      width: 14px;
      height: 14px;
      position: relative;
      top: -1px;
    }
    .k24-blog .k24-marken-cta__contact a.k24-marken-cta__btn,
    .k24-blog .k24-marken-cta__contact a.k24-marken-cta__btn:link,
    .k24-blog .k24-marken-cta__contact a.k24-marken-cta__btn:visited,
    .k24-blog .k24-marken-cta__contact a.k24-marken-cta__btn:hover,
    .k24-blog .k24-marken-cta__contact a.k24-marken-cta__btn:focus,
    .k24-blog .k24-marken-cta__contact a.k24-marken-cta__btn:active { color: #ffffff !important; }
    .k24-blog .k24-marken-cta__contact a.k24-marken-cta__btn--phone {
      background: var(--brand-primary) !important;
      border: 1px solid var(--brand-primary) !important;
    }
    .k24-blog .k24-marken-cta__contact a.k24-marken-cta__btn--phone:hover {
      background: #FF9F24 !important;
      border-color: #FF9F24 !important;
      opacity: 1 !important;
    }
    .k24-blog .k24-marken-cta__contact a.k24-marken-cta__btn--email {
      background: var(--brand-dark) !important;
      border: 1px solid var(--brand-dark) !important;
      font-weight: 700 !important;
    }
    .k24-blog .k24-marken-cta__contact a.k24-marken-cta__btn--email:hover {
      background: #5A4137 !important;
      border-color: #5A4137 !important;
      opacity: 1 !important;
    }
    @media (max-width: 768px) {
      .k24-blog .k24-marken-cta__contact a.k24-marken-cta__btn {
        padding: 15px 20px 13px !important;
      }
    }
    @media (max-width: 600px) {
      .k24-marken-cta { grid-template-columns: 1fr; }
      .k24-marken-cta__contact { flex-direction: column; }
      .k24-blog .k24-marken-cta__contact a.k24-marken-cta__btn { justify-content: center; }
    }

    /* ========== BERATER-BLOCK ========== */
    .k24-advisor-block {
      display: grid;
      grid-template-columns: 60% 40%;
      align-items: stretch;
      border: 1px solid #E2E2E2;
      border-radius: 12px;
      background: #f5f5f5;
      margin: 0;
      overflow: hidden;
    }
    /* Linke Spalte: Text */
    .k24-advisor-text {
      min-width: 0;
      padding: 32px 32px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: #f5f5f5;
    }
    .k24-advisor-text h3 {
      font-size: var(--font-size-h3);
      font-weight: 700;
      line-height: var(--line-height-heading);
      color: var(--brand-heading);
      margin: 0 0 12px 0;
    }
    .k24-advisor-text > p {
      font-size: var(--bs-body-font-size, var(--font-size-base)) !important;
      color: var(--brand-dark);
      margin: 0 !important;
      line-height: var(--bs-body-line-height, var(--line-height-base));
      padding: 0 56px 0 0;
    }
    /* Rechte Spalte: Berater-Visitenkarte */
    .k24-advisor-card {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 24px;
      padding: 28px 32px 28px 0;
      background: #FFFFFF;
    }
    .k24-advisor-photo {
      flex-shrink: 0;
      width: 132px;
      height: 132px;
      border-radius: 50%;
      overflow: hidden;
      background: #EDE6E0;
      margin-left: -74px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 8px solid #FFFFFF;
      box-sizing: content-box;
    }
    .k24-advisor-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .k24-advisor-info {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    .k24-advisor-name {
      font-size: 20px;
      font-weight: 700;
      line-height: 1.2;
      color: var(--brand-heading);
    }
    .k24-advisor-role {
      font-size: 14px;
      font-weight: 700;
      color: #8A7F77;
      margin-bottom: 16px;
    }
    .k24-advisor-actions {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
    }
    .k24-advisor-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 9px 16px 7px;
      border-radius: 8px 0 8px 0;
      font-size: 14px;
      font-weight: 600;
      line-height: 1;
      text-decoration: none;
      white-space: normal;
      word-break: break-word;
      transition: background-color .15s ease;
    }
    .k24-advisor-btn svg {
      display: block;
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      position: relative;
      top: -1px;
    }
    .k24-blog .k24-advisor-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .k24-blog .k24-advisor-btn,
    .k24-blog .k24-advisor-btn:link,
    .k24-blog .k24-advisor-btn:visited,
    .k24-blog .k24-advisor-btn:hover,
    .k24-blog .k24-advisor-btn:focus,
    .k24-blog .k24-advisor-btn:active { color: #FFFFFF !important; }
    .k24-advisor-btn--phone {
      background: var(--brand-primary);
    }
    .k24-advisor-btn--phone:hover { background: #D97A00; }
    .k24-advisor-btn--mail {
      background: var(--brand-dark);
    }
    .k24-advisor-btn--mail:hover { background: #5A463E; }
    @media (max-width: 860px) {
      .k24-advisor-block { grid-template-columns: 1fr; }
      .k24-advisor-card {
        border-left: none;
        border-top: 1px solid #E2E2E2;
        padding: 28px 32px;
      }
      .k24-advisor-photo { margin-left: 0; }
    }
    @media (max-width: 768px) {
      /* Foto greift wie in Figma ueber den Kartenrand (inneres padding-top
         60px, Foto -131px). margin-top haelt den Ueberstand frei, damit
         Titel, Lead oder Muster-Notiz nicht darunter liegen. */
      .k24-advisor-block {
        overflow: visible;
        padding-top: 60px;
        margin-top: 80px;
        background: #FFFFFF;
        border: 1px solid var(--brand-line, #C7C2C0);
        border-radius: 12px;
      }
      /* Der Modulrhythmus setzt margin-top: 0 !important. Steht der Advisor
         direkt im Container (Kategorieseite), fehlt dem Foto-Ueberstand sonst
         der Platz und der Kopf wird oben beschnitten. */
      .k24-blog .k24-container > .k24-advisor-block,
      .k24-blog .k24-article-wrapper > .k24-advisor-block {
        margin-top: 80px !important;
      }
      .k24-advisor-card {
        order: -1;
        flex-direction: column;
        text-align: center;
        gap: 16px;
        padding: 0 24px 28px;
        background: transparent;
        border: none;
      }
      .k24-advisor-photo {
        width: 143px;
        height: 143px;
        margin: -131px auto 8px;
      }
      .k24-advisor-info { align-items: center; }
      .k24-advisor-name { font-size: 18px; }
      .k24-advisor-role {
        font-size: 16px;
        font-weight: 400;
        color: var(--brand-text);
      }
      .k24-advisor-actions {
        width: 100%;
        max-width: 254px;
        margin: 0 auto;
      }
      .k24-advisor-btn {
        padding: 15px 20px 13px;
      }
      .k24-advisor-text {
        padding: 24px;
        background: #F7F7F7;
        /* Mobil steht der Block auf overflow: visible, damit das Foto oben
           ueberstehen darf. Damit clippt der Rahmen die graue Textflaeche aber
           nicht mehr - sie braucht die Rundung selbst, sonst schiebt sie ihre
           eckigen Ecken ueber die abgerundete Rahmenkante. 11px = 12px Rahmen-
           radius minus 1px Rahmenbreite. */
        border-radius: 0 0 11px 11px;
      }
      .k24-advisor-text > p {
        padding: 0 !important;
      }
    }
    @media (max-width: 520px) {
      .k24-advisor-actions { justify-content: center; }
    }

    /* ========== MODELL-LINIEN TAB-SYSTEM ========== */
    .k24-linien-tabs {
      margin: 32px 0;
    }
    /* Scroll-Container für die Tab-Leiste – greift auf allen Breiten,
       sobald die Tabs breiter sind als der verfügbare Platz. */
    .k24-linien-tab-nav-wrap {
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      /* Breite des Verlaufs in die Transparenz an der überstehenden Kante */
      --fade-size: 48px;
    }
    .k24-linien-tab-nav-wrap::-webkit-scrollbar {
      display: none;
    }
    /* Greifbar nur, wenn tatsächlich scrollbar (per JS gesetzt) */
    .k24-linien-tab-nav-wrap.k24-is-scrollable {
      cursor: grab;
    }
    .k24-linien-tab-nav-wrap.k24-dragging {
      cursor: grabbing;
      /* Beim Ziehen keine Textauswahl */
      user-select: none;
      -webkit-user-select: none;
    }
    .k24-linien-tab-nav-wrap.k24-dragging .k24-linien-tab-btn {
      cursor: grabbing;
    }
    /* Kein Transparenz-Verlauf an den Rändern – die Kanten bleiben volldeckend.
       (Die JS-Klassen können weiterhin gesetzt werden, erzeugen aber keinen
       optischen Fade mehr.) */

    /* Outer-Container (per JS um den Scroll-Wrap gelegt): Bezugspunkt für die
       überlagerten Pfeil-Buttons. */
    .k24-linien-tab-nav-outer {
      position: relative;
    }
    /* Pfeil-Buttons erscheinen nur, wenn die Tab-Leiste breiter ist als der
       sichtbare Bereich (per JS .k24-visible). Design wie das FAQ-Öffnen-Icon:
       oranger Chevron, hier zur Seite gedreht. */
    .k24-linien-tab-arrow {
      position: absolute;
      /* Nicht die volle Leistenhöhe: Die Pfeile überdecken nur das Tab-Button-
         Band (oberes Padding der Leiste bleibt frei), sodass der Chevron
         vertikal mittig zu den Überschriften steht. */
      top: 21px;
      bottom: 0;
      width: 56px;
      padding: 0;
      border: none;
      background: transparent;
      cursor: pointer;
      display: none;
      align-items: center;
      z-index: 2;
      -webkit-appearance: none;
      appearance: none;
    }
    .k24-linien-tab-arrow.k24-visible {
      display: flex;
    }
    .k24-linien-tab-arrow::before {
      content: "";
      width: 24px;
      height: 24px;
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F18700'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 22px;
      transition: transform 0.15s ease;
    }
    .k24-linien-tab-arrow:hover::before {
      transform: scale(1.12) rotate(var(--arrow-rotate, 0deg));
    }
    /* Pfeil nach rechts: Chevron um -90° gedreht; weicher Verlauf in die
       Tab-Leisten-Farbe, damit die Tabs darunter optisch „auslaufen". */
    .k24-linien-tab-arrow--right {
      right: 0;
      justify-content: flex-end;
      padding-right: 8px;
      background: linear-gradient(to right, rgba(245,245,245,0) 0%, #F5F5F5 55%);
      --arrow-rotate: -90deg;
    }
    .k24-linien-tab-arrow--right::before {
      transform: rotate(-90deg);
    }
    /* Pfeil nach links: spiegelbildlich, erscheint sobald gescrollt wurde. */
    .k24-linien-tab-arrow--left {
      left: 0;
      justify-content: flex-start;
      padding-left: 8px;
      background: linear-gradient(to left, rgba(245,245,245,0) 0%, #F5F5F5 55%);
      --arrow-rotate: 90deg;
    }
    .k24-linien-tab-arrow--left::before {
      transform: rotate(90deg);
    }
    .k24-linien-tab-nav {
      display: flex;
      flex-wrap: nowrap;
      gap: 0;
      margin-bottom: 0;
      /* Durchgezogener, gefüllter Tab-Balken ohne Zwischenlücken */
      background: var(--brand-light-grey);
      border: 1px solid #D9D9D9;
      border-bottom: none;
      border-radius: 12px 12px 0 0;
      /* Tab-Leiste exakt so breit wie das Panel darunter – kein Überstand,
         keine horizontale Scroll-Leiste. Die Tabs teilen sich diese Breite. */
      width: 100%;
      /* 16px Abstand zwischen oberem Modulrand und oberem Tab-Rand - derselbe
         Innenabstand wie im Panel darunter, damit alle Tabellen gleich sitzen. */
      padding: 16px 16px 0 16px;
    }
    .k24-linien-tab-btn {
      position: relative;
      /* Alle Tabs teilen sich gleichmäßig die volle Breite der Tab-Leiste,
         sodass die Leiste exakt so breit ist wie das Panel und nichts
         über den Rand hinausragt. */
      flex: 1 1 0;
      min-width: 0;
      padding: 24px 12px;
      /* Inhalt oben ausrichten: Überschrift beginnt immer auf gleicher Höhe */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      /* Überschrift darf bei schmalen Tabs umbrechen statt überzulaufen;
         lange Komposita werden notfalls innerhalb des Wortes getrennt, damit
         kein Tab über den Rand hinausragt. */
      white-space: normal;
      overflow-wrap: break-word;
      word-break: break-word;
      /* Nicht-aktive Tabs ohne Rahmen */
      border: none;
      /* Nicht-aktive Tabs ohne Eckenrundung */
      border-radius: 0;
      background: transparent;
      font-family: inherit;
      font-size: 16px;
      font-weight: 600;
      line-height: var(--line-height-heading);
      text-transform: uppercase;
      color: var(--brand-heading);
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s;
      text-align: center;
      overflow: visible;
    }
    /* Akzent-Balken oben (immer reserviert, sichtbar nur bei aktiv) */
    .k24-linien-tab-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: transparent;
      border-radius: 12px 12px 0 0;
      transition: none;
    }
    .k24-linien-tab-btn .k24-tab-models {
      /* Untertitel immer exakt 2-zeilig: kürzere Texte reservieren 2 Zeilen,
         längere werden auf 2 Zeilen begrenzt */
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      /* Untertitel bricht innerhalb der Tab-Breite um (die von der Überschrift
         bestimmt wird) und verbreitert den Tab NICHT: width:0 + min-width:100%
         sorgt dafür, dass nur die Überschrift die intrinsische Breite festlegt. */
      width: 0;
      min-width: 100%;
      /* Überschrift ist nowrap – Untertitel darf umbrechen */
      white-space: normal;
      min-height: 36px; /* 2 × line-height (18px) */
      font-family: inherit;
      font-size: 14px;
      font-weight: 400;
      line-height: 18px;
      text-transform: none;
      color: var(--brand-dark);
      margin-top: 4px;
      text-align: center;
      transition: color 0.15s, font-weight 0.15s;
    }
    .k24-linien-tab-btn:hover {
      border-color: var(--brand-primary);
      color: var(--brand-primary);
    }
    .k24-linien-tab-btn:hover .k24-tab-models { color: var(--brand-primary); }
    .k24-linien-tab-btn.k24-active {
      background: #FFFFFF;
      /* Aktiver Tab: Rahmen ausgeblendet */
      border: 0px solid rgba(0, 0, 0, 1);
      border-bottom: none;
      /* 1px Top-Border kompensieren, damit die Überschrift gleich weit
         vom oberen Tab-Rand entfernt ist wie bei nicht-aktiven Tabs */
      padding-top: 24px;
      /* Aktiver Tab: Überschrift orange */
      color: var(--brand-primary);
      /* Aktiver Tab: oben links und rechts 8 px, wie die übrigen
         Marken-Ecken (Button, Zaehler, Logo). */
      border-radius: 8px 8px 0 0;
      z-index: 1;
    }
    .k24-linien-tab-btn.k24-active::before {
      /* Orange Oberkante als geformte Vektor-Kontur (SVG-border-image):
         oben eine gerade 3px-Linie (mittleres Segment wird responsiv
         gestreckt), an beiden Enden zwei feste Eckstücke, deren Kontur sich
         zur Spitze hin physisch verjüngt – volldeckend, KEINE Transparenz,
         KEINE gleichmäßige Border. Quelle: 36×12-SVG, 12px-Slices links/rechts
         für die Eckstücke, mittleres 12px-Segment = 3px hohe gerade Linie. */
      top: 0;
      left: 0;
      right: 0;
      height: 12px;
      box-sizing: border-box;
      border-style: solid;
      border-width: 12px 12px 0 12px;
      border-color: transparent;
      border-radius: 0;
      background: transparent;
      border-image-source: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 12"><path fill="%23F18700" d="M12 0 Q0 0 0 10 Q2 1 12 1 Z"/><rect fill="%23F18700" x="12" y="0" width="12" height="1"/><path fill="%23F18700" d="M24 0 Q36 0 36 10 Q34 1 24 1 Z"/></svg>');
      border-image-slice: 12 12 0 12;
      border-image-width: 12px 12px 0 12px;
      border-image-repeat: stretch;
    }
    /* Sektion #k24-modelllinien: orange Oberkante 1px dicker (2px gerade Linie) */
    #k24-modelllinien .k24-linien-tab-btn.k24-active::before {
      border-image-source: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 12"><path fill="%23F18700" d="M12 0 Q0 0 0 10 Q2 2 12 2 Z"/><rect fill="%23F18700" x="12" y="0" width="12" height="2"/><path fill="%23F18700" d="M24 0 Q36 0 36 10 Q34 2 24 2 Z"/></svg>');
    }
    .k24-linien-tab-btn.k24-active .k24-tab-models {
      color: var(--brand-dark);
      font-weight: 400;
    }
    .k24-linien-tab-panel {
      display: none;
      background: #FFFFFF;
      border: 1px solid #D9D9D9;
      border-top: none;
      border-radius: 0 0 12px 12px;
      padding: 16px;
      font-family: inherit;
      font-size: var(--font-size-base);
      line-height: var(--line-height-relaxed);
    }
    .k24-linien-tab-panel.k24-active { display: block; }
    .k24-linien-intro {
      display: flex;
      align-items: flex-start;
      gap: 24px;
      margin-bottom: 24px;
    }
    .k24-linien-intro__text {
      flex: 1 1 auto;
      min-width: 0;
    }
    .k24-linien-intro__text p:first-child { margin-top: 0; }
    .k24-linien-intro__media {
      flex: 0 0 auto;
      width: 220px;
      aspect-ratio: 1 / 1;
      border-radius: 12px;
      overflow: hidden;
      background: #EDE6E0;
    }
    .k24-linien-intro__media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .k24-linien-intro__figure {
      flex: 0 0 auto;
      width: 220px;
      margin: 0;
      display: flex;
      flex-direction: column;
    }
    /* Linksbuendig wie die Unterschriften in Galerie und Ambiente-Modul - eine
       Bildunterschrift beginnt an der Bildkante, nicht in der Bildmitte. */
    .k24-linien-intro__caption {
      margin-top: 8px;
      font-size: 12px;
      line-height: 16px;
      text-align: left;
      color: var(--brand-text);
    }
    @media (max-width: 768px) {
      .k24-linien-intro {
        flex-direction: column;
        gap: 16px;
      }
      .k24-linien-intro__media {
        width: 100%;
        max-width: 320px;
        align-self: center;
      }
      .k24-linien-intro__figure {
        width: 100%;
        max-width: 320px;
        align-self: center;
      }
    }
    #k24-tab-panel-d-3 {
      margin-bottom: 84px;
    }
    @media (max-width: 768px) {
      .k24-linien-tab-nav-wrap {
        /* Auf Mobil etwas schmalerer Verlauf */
        --fade-size: 36px;
        /* Auf Mobil bildet der Scroll-Container selbst das feststehende „Dach":
           Hintergrund, Rahmen und die oben abgerundeten Ecken bleiben fix am
           Panel ausgerichtet, während nur die Tab-Buttons darin scrollen. So
           „verschiebt" sich der Balken beim Swipen nicht mehr nach links. */
        background: var(--brand-light-grey);
        border: 1px solid #D9D9D9;
        border-bottom: none;
        border-radius: 12px 12px 0 0;
        padding-top: 8px;
      }
      /* Auf Mobil ist das obere Leisten-Padding kleiner (10px + 1px Rand) –
         Pfeile entsprechend höher ansetzen, damit der Chevron mittig zu den
         (zentrierten) Überschriften steht. Der transparente Verlauf bleibt
         erhalten (kein deckender Hintergrund). */
      .k24-linien-tab-arrow {
        top: 11px;
      }
      .k24-linien-tab-nav {
        gap: 0;
        /* Nur noch horizontale Innenabstände für die Tabs – Hintergrund, Rahmen
           und Rundung liegen jetzt fest auf dem Scroll-Container (siehe oben),
           damit das „Dach“ beim Swipen nicht mehr mitscrollt. */
        padding: 0 8px;
        background: transparent;
        border: none;
        border-radius: 0;
        width: max-content;
        min-width: 100%;
      }
      .k24-linien-tab-btn {
        flex: 0 0 auto;
        /* Breite richtet sich nach der (einzeiligen) Überschrift */
        min-width: 120px;
        min-height: 48px;
        padding: 8px 16px;
        /* Auf Mobil ist der Untertitel ausgeblendet – Überschrift mittig */
        justify-content: center;
        font-size: var(--font-size-sm);
        text-align: center;
      }
      /* Aktiver Tab darf auf Mobil das Padding NICHT verändern, sonst
         „springt“ die Überschrift beim Klick nach unten. Gleiches Padding
         wie bei nicht-aktiven Tabs erzwingen. */
      .k24-linien-tab-btn.k24-active {
        padding: 8px 16px;
      }
      .k24-linien-tab-btn .k24-tab-models {
        display: none;
      }
      .k24-linien-tab-panel {
        border-radius: 0 0 12px 12px;
        padding: 16px 16px;
      }
      /* Pfeil auf Mobil 10px weiter von der Textseite abrücken */
      .k24-faq-button::after {
        box-sizing: content-box;
        padding-left: 8px;
        background-position: right center;
      }
    }

    /* ==================================================================
       KATEGORIESEITEN-MODULE
       Zusatzmodule fuer Kategorieseiten, deren Content deutlich tiefer ist
       als der einer Markenseite. Ziel: Tiefe aufnehmen, ohne dass daraus
       Fliesstext-Waende werden. Auf Markenseiten kommen sie nicht vor.
       Dokumentation: .cursor/skills/markenseite-produzieren/k24-html-template.md
       ================================================================== */

    /* ---------- Zusatz-Sektion (eigene H2 + eigene Anker-ID) ---------- */
    .k24-blog .k24-content-section {
      margin: 0;
    }
    /* Getoente Variante, um lange Seiten optisch zu rhythmisieren. Der
       Vollbreiten-Effekt entsteht ueber negatives Padding im Container. */
    .k24-blog .k24-content-section--grau {
      background: var(--brand-light-grey);
      border-radius: var(--radius-brand);
      padding: 28px 28px 8px;
    }

    /* Mehrspaltiges Inhaltsverzeichnis: ab 8 Eintraegen wird die einspaltige
       Liste zu lang und schiebt den Content unter die Falz. */
    .k24-blog .k24-toc-list--zwei {
      column-count: 2;
      column-gap: 32px;
    }
    .k24-blog .k24-toc-list--zwei li {
      break-inside: avoid;
    }

    /* ---------- Typen-/Kachelraster ---------- */
    .k24-blog .k24-typen-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin: 24px 0 var(--k24-baustein-abstand);
      padding-left: 0;
      list-style: none;
    }

    .k24-blog .k24-typen-card {
      display: flex;
      flex-direction: column;
      background: #FFFFFF;
      border: 1px solid var(--brand-line, #C7C2C0);
      border-radius: 12px;
      overflow: hidden;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .k24-blog .k24-typen-card:hover {
      border-color: rgba(241, 135, 0, 0.75);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    }
    /* Die ganze Karte ist der Link: ein <a> um Bild und Text, der sichtbare
       Anker darunter ist nur ein Hinweis. So bleibt die Klickflaeche so gross
       wie die Kachel, ohne einen zweiten Button ins Raster zu setzen. */
    .k24-blog a.k24-typen-card__hit {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      height: 100%;
      color: inherit;
      font-weight: inherit;
      text-decoration: none !important;
      border-bottom: none;
    }
    .k24-blog a.k24-typen-card__hit:link,
    .k24-blog a.k24-typen-card__hit:visited,
    .k24-blog a.k24-typen-card__hit:hover,
    .k24-blog a.k24-typen-card__hit:focus,
    .k24-blog a.k24-typen-card__hit:active {
      color: inherit;
      text-decoration: none !important;
      border-bottom: none;
    }
    .k24-blog a.k24-typen-card__hit:focus-visible {
      outline: 2px solid var(--brand-primary);
      outline-offset: 3px;
    }
    .k24-blog .k24-typen-card__media {
      display: block;
      width: 100%;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      background: var(--brand-light-grey);
    }
    .k24-blog .k24-typen-card__media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .k24-blog .k24-typen-card__body {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      padding: 16px 20px 20px;
    }
    .k24-blog .k24-typen-card__body h3 {
      font-size: var(--font-size-h3);
      font-weight: 700;
      line-height: var(--line-height-heading);
      color: var(--brand-heading);
      margin: 0 0 8px;
    }
    .k24-blog .k24-typen-card__text {
      font-size: var(--font-size-base);
      line-height: var(--line-height-base);
      color: var(--brand-text);
      margin: 0 0 12px;
    }
    .k24-blog .k24-typen-card__list {
      margin: 0 0 16px;
      padding: 0 0 0 16px;
      list-style: disc;
    }
    .k24-blog .k24-typen-card__list li {
      margin: 0 0 4px;
      padding: 0;
      font-size: var(--font-size-base);
      line-height: var(--line-height-base);
      color: var(--brand-text);
    }
    /* Ankertext mit Winkel, kein Button. Sitzt auf der Kartenunterkante, damit
       die Kacheln einer Reihe trotz unterschiedlich langer Texte gleich enden. */
    .k24-blog .k24-typen-card__link {
      display: inline-flex;
      align-items: flex-start;
      gap: 8px;
      margin-top: auto;
      align-self: flex-start;
      color: var(--brand-primary);
      font-size: var(--font-size-base);
      font-weight: 700;
      line-height: var(--line-height-base);
    }
    .k24-blog .k24-typen-card__link::after {
      content: "";
      flex: 0 0 auto;
      width: 13px;
      height: 13px;
      margin-top: 4px;
      background-image: var(--icon-chevron-rechts);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      transition: transform 0.15s ease;
    }
    .k24-blog .k24-typen-card:hover .k24-typen-card__link::after {
      transform: translateX(3px);
    }

    /* ---------- Typen-Rail: Schiene statt Raster ---------- */
    /* Ab etwa sechs Bauarten wird das 3er-Raster zur Bildwand und schiebt den
       restlichen Abschnitt weit nach unten. Die Rail-Fassung laesst dieselben
       Karten seitlich laufen: drei ganz sichtbar, die vierte angeschnitten als
       Hinweis, dass es weitergeht. Den Wrapper und die Pfeile legt
       k24_scripts.html an; ohne JavaScript bleibt das native Scrollen mit
       Trackpad, Scrollrad und Finger. */
    .k24-blog .k24-typen-rail {
      position: relative;
    }
    .k24-blog .k24-typen-rail__pfeil {
      display: none;
    }
    @media (min-width: 769px) {
      .k24-blog .k24-typen-grid--rail {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        /* Luft fuer Rahmen, Schatten und Fokusring der Karten. Das
           scroll-padding muss dieselbe Breite haben, sonst schnappt der
           Browser sofort um 4px weiter und der Zurueck-Pfeil erscheint schon
           in der Startposition. */
        padding: 4px;
        margin-inline: -4px;
        scroll-padding-inline-start: 4px;
      }
      .k24-blog .k24-typen-grid--rail::-webkit-scrollbar {
        display: none;
      }
      .k24-blog .k24-typen-grid--rail > .k24-typen-card {
        flex: 0 0 calc((100% - 3 * 24px) / 3.3);
        scroll-snap-align: start;
      }
      /* Schiene mit der Maus ziehen (Klassen per JS, wie in der Tab-Leiste).
         Greifbar nur, solange es ueberhaupt etwas zu schieben gibt. */
      .k24-blog .k24-typen-grid--rail.k24-is-scrollable {
        cursor: grab;
      }
      .k24-blog .k24-typen-grid--rail.k24-dragging {
        cursor: grabbing;
        /* Beim Ziehen keine Textauswahl und kein Einschnappen: Das mandatory
           Snap zieht die Schiene sonst waehrend der Bewegung zurueck. Nach dem
           Loslassen greift es wieder und rueckt die Karten gerade. */
        scroll-snap-type: none;
        user-select: none;
        -webkit-user-select: none;
      }
      .k24-blog .k24-typen-grid--rail.k24-dragging .k24-typen-card,
      .k24-blog .k24-typen-grid--rail.k24-dragging a {
        cursor: grabbing;
      }
      .k24-blog .k24-typen-rail__pfeil {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 64px;
        padding: 0;
        border: none;
        background: transparent;
        cursor: pointer;
        display: none;
        align-items: center;
        z-index: 2;
        -webkit-appearance: none;
        appearance: none;
      }
      .k24-blog .k24-typen-rail__pfeil.k24-visible {
        display: flex;
      }
      .k24-blog .k24-typen-rail__pfeil::before {
        content: "";
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background-color: #FFFFFF;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F18700'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 22px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
        transform: rotate(var(--k24-pfeil-dreh, 0deg));
        transition: transform 0.15s ease;
      }
      .k24-blog .k24-typen-rail__pfeil:hover::before {
        transform: rotate(var(--k24-pfeil-dreh, 0deg)) scale(1.08);
      }
      .k24-blog .k24-typen-rail__pfeil--prev {
        left: 0;
        justify-content: flex-start;
        --k24-pfeil-dreh: 90deg;
      }
      .k24-blog .k24-typen-rail__pfeil--next {
        right: 0;
        justify-content: flex-end;
        --k24-pfeil-dreh: -90deg;
      }
    }
    /* Tablet: zwei ganze Karten plus Anschnitt, sonst wird die Karte schmaler
       als ihre Ueberschrift. */
    @media (min-width: 769px) and (max-width: 992px) {
      .k24-blog .k24-typen-grid--rail > .k24-typen-card {
        flex: 0 0 calc((100% - 2 * 24px) / 2.3);
      }
    }

    /* ---------- Freistehende Datentabelle ---------- */
    /* Eine Tabellenoptik fuer die ganze Seite: die Karte ist immer
       k24-linien-tabs--single + k24-linien-tab-panel, die Tabelle immer
       k24-seg-table - identisch zum Modellvergleich. k24-datentabelle loest
       nur die auf den Modellvergleich zugeschnittenen festen Spaltenbreiten
       wieder auf und richtet die erste Spalte links aus. */
    .k24-blog .k24-linien-tabs--single .k24-linien-tab-panel {
      border-top: 1px solid #D9D9D9;
      border-radius: 12px;
      padding: 16px;
      overflow: hidden;
    }
    /* Desktop: grauer Kopf bis an den oberen Kartenrahmen - aber nur, wenn die
       Tabelle die Karte eroeffnet. Steht ein Einleitungstext darueber, braucht
       er seine 16px Luft wie an den Seiten; sonst klebt der Absatz am Rahmen.
       Der negative Aussenabstand loest das ohne :has(), das Panel behaelt sein
       einheitliches Padding. Mobil ist die Kopfzeile ausgeblendet. */
    @media (min-width: 769px) {
      .k24-blog .k24-linien-tabs--single .k24-linien-tab-panel > .k24-seg-table:first-child {
        margin-top: -16px;
      }
    }
    .k24-blog .k24-linien-tabs--single .k24-seg-table {
      margin-top: 0;
    }
    .k24-blog .k24-linien-tabs--single .k24-seg-note {
      margin-bottom: 0;
    }
    /* Ohne Intro-Block sitzt die Tabelle direkt unter der Panel-Kante -
       das 12px-Eigenmargin der Tabelle wuerde den Abstand verdoppeln. */
    .k24-blog .k24-linien-tab-panel > .k24-seg-table:first-child {
      margin-top: 0;
    }
    /* Schliesst die Tabelle das Panel ab, reicht dessen Innenabstand nach unten.
       Das Panel hat Padding, der Aussenabstand der Tabelle faellt also nicht mit
       ihm zusammen, sondern kaeme obendrauf. */
    .k24-blog .k24-linien-tab-panel > .k24-seg-table:last-child {
      margin-bottom: 0;
    }
    .k24-blog .k24-datentabelle .k24-seg-table td,
    .k24-blog .k24-datentabelle .k24-seg-table th {
      width: auto !important;
    }
    /* Kopfzeile darf umbrechen: Kategorietabellen haben laengere Spaltenkoepfe
       als der Modellvergleich. */
    .k24-blog .k24-datentabelle .k24-seg-table thead th {
      white-space: normal;
    }

    /* ---------- Schritt-fuer-Schritt-Liste ---------- */
    .k24-blog .k24-steps {
      counter-reset: k24step;
      margin: 20px 0 var(--k24-baustein-abstand);
      padding-left: 0;
      list-style: none;
    }
    .k24-blog .k24-steps__item {
      position: relative;
      padding: 0 0 20px 51px;
      margin: 0;
    }
    /* Zaehler wie Figma List_counter: 35 px, #F7F7F7, Radius nur oben links
       und unten rechts. Abstand Zaehler-Text 16 px (Figma 17, auf 4er-Raster
       geglaettet). Mobil dieselben Masse, nur Innenabstand 8/4. */
    .k24-blog .k24-steps__item::before {
      counter-increment: k24step;
      content: counter(k24step) ".";
      position: absolute;
      left: 0;
      top: 0;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 35px;
      height: 35px;
      border-radius: 8px 0 8px 0;
      background: #F7F7F7;
      color: var(--brand-heading);
      font-size: 18px;
      font-weight: 700;
      line-height: 1;
      text-transform: uppercase;
    }
    /* Verbindungslinie zwischen den Schritten (beim letzten Schritt entfaellt
       sie, sonst laeuft die Linie ins Leere). */
    .k24-blog .k24-steps__item::after {
      content: "";
      position: absolute;
      left: 17px;
      top: 39px;
      bottom: 6px;
      width: 1px;
      background: var(--brand-line, #C7C2C0);
    }
    .k24-blog .k24-steps__item:last-child {
      padding-bottom: 0;
    }
    .k24-blog .k24-steps__item:last-child::after {
      display: none;
    }
    .k24-blog .k24-steps__title {
      display: block;
      font-size: var(--font-size-base);
      font-weight: 700;
      line-height: 30px;
      color: var(--brand-heading);
      margin: 0;
    }
    .k24-blog .k24-steps__item p {
      margin: 0 0 0.5rem;
      font-size: var(--font-size-base);
      line-height: var(--line-height-base);
    }

    /* ---------- Interaktive Checkliste ---------- */
    /* Kein eigener Rahmen um die ganze Liste: Jeder Punkt ist eine Karte in der
       bekannten Bauform (weiss, 1px #D9D9D9, 8px Radius). Eine Checkliste hat
       keine Reihenfolge, deshalb keine Ziffern. Fortschritt und Export laufen
       ueber k24_scripts.html; ohne JS bleiben die Kaestchen normale Checkboxen
       und die Liste vollstaendig lesbar. */
    .k24-blog .k24-steps-box {
      margin: var(--k24-baustein-abstand) 0;
    }
    /* Kopfzeile traegt Titel und Aktionen auf einer Linie. Der Titel gehoert in
       den Kopf, damit die Aktionen rechts auf seiner Grundlinie sitzen. */
    .k24-blog .k24-steps-box__head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 8px 24px;
      margin-bottom: 16px;
    }
    .k24-blog .k24-steps-box__titel {
      min-width: 0;
    }
    .k24-blog .k24-steps-box__titel h2,
    .k24-blog .k24-steps-box__titel h3 {
      margin: 0;
    }
    /* Haken hinter dem Eyebrow: dieselbe Strichform wie im Kaestchen der Liste,
       nur in Markenorange. Zeigt schon in der Kopfzeile, dass hier abgehakt
       wird - ohne ein Icon ins Markup zu schreiben. */
    .k24-blog .k24-steps-box__titel .k24-section-eyebrow {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .k24-blog .k24-steps-box__titel .k24-section-eyebrow::after {
      content: "";
      flex: 0 0 auto;
      width: 17px;
      height: 17px;
      /* Der Eyebrow steht in Versalien: deren optische Mitte liegt hoeher als
         die Mitte der Zeilenbox, auf die align-items zentriert. */
      transform: translateY(-2px);
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path fill="none" stroke="%23F18700" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" d="M1.6 6.4 4.5 9.3 10.4 2.7"/></svg>') center / contain no-repeat;
    }
    .k24-blog .k24-steps-box__status {
      margin: 12px 0 0;
      font-size: var(--font-size-sm);
      line-height: 20px;
      color: var(--brand-caption);
      text-align: right;
    }
    .k24-blog .k24-steps-box__count {
      font-weight: 700;
      color: var(--brand-heading);
    }
    .k24-blog .k24-steps-box__actions {
      display: flex;
      align-items: center;
      gap: 24px;
      flex-wrap: wrap;
    }
    /* Aktionen sind Werkzeuge, keine Handlungsaufforderung: Textlinks mit
       orangem Icon statt Buttons - so konkurrieren sie nicht mit dem CTA. */
    .k24-blog .k24-steps-box__btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 0;
      border: none;
      background: none;
      color: var(--brand-text);
      font-family: inherit;
      font-size: var(--font-size-sm);
      font-weight: 400;
      line-height: 20px;
      white-space: nowrap;
      cursor: pointer;
      transition: color 0.2s;
    }
    /* Icon kommt aus dem CSS, nicht aus der Markup-Zeile: so tragen auch die schon
       produzierten Seiten die Zeichnung der Grafik, sobald sie neu gebaut werden.
       Deren Markup enthaelt noch ein inline-SVG - das wird ausgeblendet, statt es in
       Dutzenden fertigen Dateien nachzuziehen. Neue Seiten schreiben nur den Text. */
    .k24-blog .k24-steps-box__btn::before {
      content: "";
      flex: 0 0 auto;
      width: 15px;
      height: 15px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }
    .k24-blog .k24-steps-box__btn--print::before {
      background-image: var(--icon-drucken);
    }
    .k24-blog .k24-steps-box__btn--file::before {
      background-image: var(--icon-download);
    }
    .k24-blog .k24-steps-box__btn--reset::before {
      background-image: var(--icon-x);
    }
    .k24-blog .k24-steps-box__btn svg {
      display: none;
    }
    .k24-blog .k24-steps-box__btn:hover {
      color: var(--brand-primary);
    }
    .k24-blog .k24-steps-box__btn:focus-visible {
      outline: 2px solid var(--brand-primary);
      outline-offset: 3px;
    }
    /* Punkte der Checkliste als Karten, ohne Ziffer und ohne Verbindungslinie. */
    .k24-blog .k24-steps--liste {
      counter-reset: none;
    }
    .k24-blog .k24-steps--liste .k24-steps__item {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      padding: 28px 32px;
      margin: 0 0 12px;
      background: #FFFFFF;
      border: 1px solid var(--brand-line, #C7C2C0);
      border-radius: 12px;
    }
    .k24-blog .k24-steps--liste .k24-steps__item:last-child {
      margin-bottom: 0;
    }
    .k24-blog .k24-steps--liste .k24-steps__item::before,
    .k24-blog .k24-steps--liste .k24-steps__item::after {
      content: none;
    }
    .k24-blog .k24-steps--liste .k24-steps__body {
      flex: 1 1 auto;
      min-width: 0;
    }
    .k24-blog .k24-steps--liste .k24-steps__title {
      line-height: var(--line-height-base);
    }
    .k24-blog .k24-steps--liste .k24-steps__item p:last-child {
      margin-bottom: 0;
    }
    .k24-blog .k24-steps--liste .k24-steps__check {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      align-self: center;
      cursor: pointer;
    }
    .k24-blog .k24-steps__box {
      appearance: none;
      -webkit-appearance: none;
      flex: 0 0 auto;
      width: 32px;
      height: 32px;
      margin: 0;
      border: 1px solid var(--brand-primary);
      border-radius: 8px;
      background: #FFFFFF;
      cursor: pointer;
    }
    .k24-blog .k24-steps__box:hover {
      border-color: var(--brand-primary);
    }
    .k24-blog .k24-steps__box:focus-visible {
      outline: 2px solid var(--brand-primary);
      outline-offset: 2px;
    }
    .k24-blog .k24-steps__box:checked {
      border-color: var(--brand-primary);
      background: var(--brand-primary) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><path fill="none" stroke="%23FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M2 6.4 4.6 9 10 3.4"/></svg>') center / 14px 14px no-repeat;
    }
    /* Erledigt: orange Kante links als einziges Signal. Als Inset-Schatten,
       damit die Karte nicht um die Randbreite verrutscht. Kein Durchstreichen -
       der Text bleibt lesbar, auch als Einkaufsnotiz. */
    .k24-blog .k24-steps--liste .k24-steps__item.k24-done {
      box-shadow: inset 3px 0 0 var(--brand-primary);
    }
    /* Nur fuer nummerierte, interaktive Listen (Ablauf mit Reihenfolge). */
    .k24-blog .k24-steps--interaktiv:not(.k24-steps--liste) .k24-steps__check {
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
    }
    .k24-blog .k24-steps--interaktiv:not(.k24-steps--liste) .k24-steps__item.k24-done::before {
      background: var(--brand-caption);
      color: #FFFFFF;
    }
    .k24-blog .k24-visuell-versteckt {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
      border: 0;
    }

    /* ---------- Sach-Akkordeon (Normen, Recht, Technik) ---------- */
    /* Optik wie das FAQ-Akkordeon, aber eigene name-Gruppe und eigene Klassen:
       nur die FAQ-Items duerfen ins FAQPage-Schema wandern. */
    .k24-blog .k24-akkordeon {
      max-width: 100%;
      margin: 20px 0 var(--k24-baustein-abstand);
    }
    .k24-blog .k24-akkordeon-item {
      position: relative;
      background-color: #FFFFFF;
      border: 1px solid var(--brand-line, #C7C2C0);
      border-radius: 12px;
      margin-bottom: 12px;
      overflow: hidden;
    }
    .k24-blog .k24-akkordeon-item:last-child {
      margin-bottom: 0;
    }
    .k24-blog .k24-akkordeon-item[open] {
      box-shadow: inset 3px 0 0 var(--brand-primary);
    }
    .k24-blog .k24-akkordeon-item[open]::before {
      content: none;
    }
    .k24-blog .k24-akkordeon-item[open] .k24-akkordeon-button,
    .k24-blog .k24-akkordeon-item[open] .k24-akkordeon-body {
      background-color: transparent;
    }
    .k24-blog .k24-akkordeon-item[open] .k24-akkordeon-button:hover {
      background: linear-gradient(to right, transparent 3px, var(--brand-light-grey) 3px);
    }
    .k24-blog .k24-akkordeon-button {
      width: 100%;
      padding: 16px 20px;
      font-size: var(--font-size-p);
      font-weight: 700;
      color: var(--brand-text);
      background-color: #FFFFFF;
      border: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      text-align: left;
      transition: background-color 0.2s ease;
      list-style: none;
    }
    .k24-blog .k24-akkordeon-button::-webkit-details-marker {
      display: none;
    }
    .k24-blog .k24-akkordeon-button:hover {
      background-color: var(--brand-light-grey);
    }
    .k24-blog .k24-akkordeon-button::after {
      content: "";
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      margin-left: auto;
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F18700'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-size: 20px;
      transition: transform 0.35s ease-in-out;
    }
    .k24-blog .k24-akkordeon-item[open] .k24-akkordeon-button::after {
      transform: rotate(-180deg);
    }
    .k24-blog .k24-akkordeon-body {
      overflow: hidden;
      padding: 16px 20px;
      background-color: #FFFFFF;
      color: var(--brand-text);
      font-size: var(--font-size-p);
      line-height: var(--line-height-base);
    }
    .k24-blog .k24-akkordeon-body p:last-child,
    .k24-blog .k24-akkordeon-body ul:last-child {
      margin-bottom: 0;
    }

    /* ---------- Bild-Text-Galerie (Stilrichtungen, Anwendungsfaelle) ---------- */
    .k24-blog .k24-galerie {
      display: flex;
      flex-direction: column;
      gap: 32px;
      margin: 24px 0 var(--k24-baustein-abstand);
      padding-left: 0;
      list-style: none;
    }
    /* Bild und Text bilden eine gleich hohe Zeile: Das Medium streckt sich auf die
       Texthoehe, statt seine Eigenhoehe zu behalten. Ohne diese Kopplung entsteht
       auf Desktop neben hohen Produktbildern eine leere Flaeche unter dem Text. */
    .k24-blog .k24-galerie__item {
      display: flex;
      align-items: stretch;
      gap: 28px;
    }
    /* Jede zweite Zeile spiegeln, damit die Bildkante alterniert. */
    .k24-blog .k24-galerie__item--reverse {
      flex-direction: row-reverse;
    }
    .k24-blog .k24-galerie__figure {
      flex: 0 0 34%;
      max-width: 34%;
      margin: 0;
      display: flex;
      flex-direction: column;
    }
    .k24-blog .k24-galerie__media {
      display: block;
      width: 100%;
      flex: 1 1 auto;
      min-height: 260px;
      border-radius: var(--radius-brand);
      overflow: hidden;
      background: var(--brand-light-grey);
    }
    .k24-blog .k24-galerie__media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .k24-blog .k24-galerie__caption {
      margin-top: 8px;
      font-size: var(--font-size-note);
      line-height: 18px;
      color: var(--brand-text);
    }
    .k24-blog .k24-galerie__body {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .k24-blog .k24-galerie__body h3 {
      margin-top: 0;
    }
    .k24-blog .k24-galerie__body p:last-child {
      margin-bottom: 0;
    }
    /* Marken-Beispiele stehen als Fussnote der Zeile immer unten am Textblock. */
    .k24-blog .k24-galerie__meta {
      font-size: var(--font-size-sm);
      line-height: 20px;
      color: var(--brand-text);
      margin: 16px 0 0;
      padding-top: 12px;
      border-top: 1px solid var(--brand-border);
    }
    .k24-blog .k24-galerie__meta strong {
      color: var(--brand-heading);
    }

    /* ---------- Inline-Beratungs-CTA ---------- */
    /* Bauform des Berater-Blocks ohne Foto: grauer Textteil links, weisser
       Aktionsteil rechts, gleiche Buttons. So bleibt es dieselbe Formensprache
       statt einer zweiten CTA-Optik. */
    .k24-blog .k24-inline-cta {
      display: grid;
      grid-template-columns: 60% 40%;
      align-items: stretch;
      background: var(--brand-light-grey);
      border: 1px solid #E2E2E2;
      border-radius: 12px;
      margin: var(--k24-baustein-abstand) 0;
      overflow: hidden;
    }
    .k24-blog .k24-inline-cta__text {
      min-width: 0;
      padding: 24px 32px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: var(--brand-light-grey);
    }
    .k24-blog .k24-inline-cta__text h3 {
      font-size: var(--font-size-h3);
      font-weight: 700;
      line-height: var(--line-height-heading);
      color: var(--brand-heading);
      margin: 0 0 8px;
    }
    .k24-blog .k24-inline-cta__text p {
      margin: 0;
      font-size: var(--font-size-base);
      line-height: var(--line-height-base);
      color: var(--brand-dark);
    }
    .k24-blog .k24-inline-cta__actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 8px;
      padding: 24px 32px;
      background: #FFFFFF;
    }
    .k24-blog .k24-inline-cta__btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 9px 16px 7px;
      border: none;
      border-radius: 8px 0 8px 0;
      font-size: var(--font-size-sm);
      font-weight: 600;
      line-height: 1;
      white-space: nowrap;
      transition: background-color 0.15s ease;
    }
    .k24-blog .k24-inline-cta__btn svg {
      display: block;
      width: 14px;
      height: 14px;
      flex: 0 0 auto;
      position: relative;
      top: -1px;
    }
    .k24-blog .k24-inline-cta__btn,
    .k24-blog .k24-inline-cta__btn:link,
    .k24-blog .k24-inline-cta__btn:visited,
    .k24-blog .k24-inline-cta__btn:hover,
    .k24-blog .k24-inline-cta__btn:focus,
    .k24-blog .k24-inline-cta__btn:active { color: #FFFFFF !important; }
    .k24-blog .k24-inline-cta__btn--phone {
      background: var(--brand-primary);
    }
    .k24-blog .k24-inline-cta__btn--phone:hover {
      background: #D97A00;
    }
    .k24-blog .k24-inline-cta__btn--mail {
      background: var(--brand-dark);
    }
    .k24-blog .k24-inline-cta__btn--mail:hover {
      background: #5A463E;
    }

    /* Eine Markenleiste liefert dieses Template bewusst nicht: Die Logo-Reihe
       pflegt Shopware ueber einen eigenen Baustein unterhalb des Contents. */

    /* ---------- Entscheidungsmatrix (Wann ja / Wann nein) ---------- */
    /* Kein Rahmen: Die Seite hat genug Karten. Bauform der Feature-Liste
       (zwei Spalten, Haken-Icon), nur mit den Ampelfarben der
       Produktdetailseite - Gruen #77AD46 fuer ja, Rot #CD1719 fuer nein. */
    .k24-blog .k24-entscheid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px 40px;
      margin: 20px 0 var(--k24-baustein-abstand);
    }
    .k24-blog .k24-entscheid__col {
      min-width: 0;
    }
    .k24-blog .k24-entscheid__title {
      margin: 0 0 12px;
      font-size: var(--font-size-base);
      font-weight: 700;
      line-height: var(--line-height-base);
      letter-spacing: 0.02em;
      text-transform: uppercase;
      color: var(--brand-heading);
    }
    .k24-blog .k24-entscheid__list {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .k24-blog .k24-entscheid__list li {
      position: relative;
      padding-left: 24px;
      margin: 0 0 8px;
      font-size: var(--font-size-base);
      line-height: var(--line-height-base);
      color: var(--brand-text);
    }
    .k24-blog .k24-entscheid__list li:last-child {
      margin-bottom: 0;
    }
    .k24-blog .k24-entscheid__list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 2px;
      width: 17px;
      height: 13px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='13' viewBox='0 0 17 13' fill='none'%3E%3Cpath d='M14.167 4.25L6.376 12.042 2.834 8.5' stroke='%2377AD46' stroke-width='1.84' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
    .k24-blog .k24-entscheid__col--nein .k24-entscheid__list li::before {
      height: 17px;
      top: 2px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' fill='none'%3E%3Cpath d='M4.25 4.25l8.5 8.5M12.75 4.25l-8.5 8.5' stroke='%23CD1719' stroke-width='1.84' stroke-linecap='round'/%3E%3C/svg%3E");
    }

    /* ---------- Rahmen-Fassung fuer Entscheidungsmatrix und System-Set --------
       Fertige Fassung: Kartenoptik, 12px Radius, 1px #C7C2C0, 40px Innenabstand,
       eine Trennkante zwischen den Spalten. Die rahmenlose Variante bleibt im
       CSS, wird aber nicht mehr im Muster gezeigt. */
    .k24-blog .k24-entscheid--rahmen,
    .k24-blog .k24-system--rahmen {
      gap: 0;
      background: #FFFFFF;
      border: 1px solid var(--brand-line, #C7C2C0);
      border-radius: 12px;
      margin: 24px 0 var(--k24-baustein-abstand);
      overflow: hidden;
    }
    .k24-blog .k24-entscheid--rahmen .k24-entscheid__col,
    .k24-blog .k24-system--rahmen .k24-system__col {
      padding: 28px 40px;
    }
    .k24-blog .k24-entscheid--rahmen .k24-entscheid__col + .k24-entscheid__col,
    .k24-blog .k24-system--rahmen .k24-system__col + .k24-system__col {
      border-left: 1px solid var(--brand-line, #C7C2C0);
    }

    /* ---------- Hinweisbox (Tipp / Achtung / Recht / Rechnen) ---------- */
    /* Ein Grundkoerper fuer alle Toene: 12px Radius, 3px linke Kante wie FAQ.
       Die Flaeche traegt den eigenen Ton mit nur 4% Deckkraft. Icon sitzt
       links neben Label und Text, nicht in der Labelzeile. */
    .k24-blog .k24-hinweis {
      --hinweis-ton: var(--brand-primary);
      --hinweis-flaeche: rgba(241, 135, 0, 0.04);
      --hinweis-icon: var(--icon-hinweis-tip);
      display: grid;
      grid-template-columns: 20px 1fr;
      column-gap: 16px;
      row-gap: 8px;
      background: var(--hinweis-flaeche);
      border-radius: 12px;
      box-shadow: inset 3px 0 0 var(--hinweis-ton);
      padding: 24px 24px 32px 20px;
      margin: 20px 0;
    }
    .k24-blog .k24-hinweis::before {
      content: "";
      grid-column: 1;
      grid-row: 1;
      width: 20px;
      height: 20px;
      margin-top: 0;
      background-image: var(--hinweis-icon);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }
    .k24-blog .k24-hinweis--achtung {
      --hinweis-ton: #CD1719;
      --hinweis-flaeche: rgba(205, 23, 25, 0.04);
      --hinweis-icon: var(--icon-hinweis-achtung);
    }
    .k24-blog .k24-hinweis--recht {
      --hinweis-ton: #1B7797;
      --hinweis-flaeche: rgba(27, 119, 151, 0.04);
      --hinweis-icon: var(--icon-hinweis-recht);
    }
    .k24-blog .k24-hinweis--rechnen {
      --hinweis-ton: #48555C;
      --hinweis-flaeche: rgba(72, 85, 92, 0.04);
      --hinweis-icon: var(--icon-hinweis-rechnen);
    }
    .k24-blog .k24-hinweis > * {
      grid-column: 2;
    }
    .k24-blog .k24-hinweis__label {
      display: block;
      margin: 0;
      font-size: 18px;
      font-weight: 700;
      line-height: 24px;
      letter-spacing: 0;
      text-transform: uppercase;
      color: var(--hinweis-ton);
    }
    .k24-blog .k24-hinweis__label::before {
      content: none;
      display: none;
    }
    .k24-blog .k24-hinweis__text {
      margin: 0;
      font-size: var(--font-size-base);
      line-height: var(--line-height-base);
      color: var(--brand-text);
    }
    .k24-blog .k24-hinweis__text + .k24-hinweis__text {
      margin-top: 8px;
    }
    .k24-blog .k24-hinweis__text strong {
      color: var(--brand-heading);
    }
    /* Rechenbeispiel: gleiche Box, nur mit Zwischenzeile und Aufzaehlung.
       Ein eigenes Formel-Design gibt es bewusst nicht mehr. */
    .k24-blog .k24-hinweis__zwischen {
      margin: 16px 0 8px;
      padding-top: 16px;
      border-top: 1px solid #D9D9D9;
      font-size: var(--font-size-base);
      line-height: var(--line-height-base);
      color: var(--brand-text);
    }
    .k24-blog .k24-hinweis__liste {
      margin: 0 0 12px;
      padding: 0 0 0 16px;
      list-style: disc;
    }
    .k24-blog .k24-hinweis__liste li {
      margin: 0 0 4px;
      font-size: var(--font-size-base);
      line-height: var(--line-height-base);
      color: var(--brand-text);
    }

    /* Ein eigenes Formel-Design gibt es nicht mehr: Rechenbeispiele laufen als
       aside.k24-hinweis.k24-hinweis--rechnen ueber die Hinweisbox. */

    /* ---------- System- / Zubehoer-Set ---------- */
    /* Gleiche Bauform wie die Entscheidungsmatrix: rahmenlos, zwei Spalten,
       Icon je Spalte. Rot #CD1719 markiert Pflichtteile, der gruene Haken
       #77AD46 die Empfehlung - dieselben Ampelfarben wie bei Ja/Nein. */
    .k24-blog .k24-system {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px 40px;
      margin: 20px 0 var(--k24-baustein-abstand);
      padding: 0;
      list-style: none;
    }
    .k24-blog .k24-system__col {
      min-width: 0;
    }
    .k24-blog .k24-system__rolle {
      display: block;
      margin: 0 0 12px;
      font-size: var(--font-size-base);
      font-weight: 700;
      line-height: var(--line-height-base);
      letter-spacing: 0.02em;
      text-transform: uppercase;
      color: var(--brand-heading);
    }
    .k24-blog .k24-system__list {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .k24-blog .k24-system__item {
      position: relative;
      padding: 0 0 0 24px;
      margin: 0 0 16px;
    }
    .k24-blog .k24-system__item:last-child {
      margin-bottom: 0;
    }
    .k24-blog .k24-system__item::before {
      content: "";
      position: absolute;
      left: 0;
      top: 2px;
      width: 17px;
      height: 17px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4v11' stroke='%23CD1719' stroke-width='2.6' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='20' r='1.5' fill='%23CD1719'/%3E%3C/svg%3E");
    }
    .k24-blog .k24-system__col--empfohlen .k24-system__item::before {
      height: 13px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='13' viewBox='0 0 17 13' fill='none'%3E%3Cpath d='M14.167 4.25L6.376 12.042 2.834 8.5' stroke='%2377AD46' stroke-width='1.84' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
    /* Linktitel einer Linkliste: orange und fett, ohne Unterstrich, mit dem
       Winkel dahinter. Der Unterstrich bleibt dem Link im Fliesstext vorbehalten -
       dort muss er sich vom Text abheben, hier ist die ganze Zeile ein Link. */
    .k24-blog .k24-system__title,
    .k24-blog .k24-bildtafel__link {
      display: inline-flex;
      align-items: flex-start;
      gap: 8px;
      font-size: var(--font-size-base);
      font-weight: 700;
      line-height: var(--line-height-base);
      color: var(--brand-heading);
    }
    .k24-blog a.k24-system__title,
    .k24-blog a.k24-system__title:link,
    .k24-blog a.k24-system__title:visited,
    .k24-blog a.k24-system__title:hover,
    .k24-blog a.k24-system__title:focus,
    .k24-blog a.k24-system__title:active,
    .k24-blog a.k24-bildtafel__link,
    .k24-blog a.k24-bildtafel__link:link,
    .k24-blog a.k24-bildtafel__link:visited,
    .k24-blog a.k24-bildtafel__link:hover,
    .k24-blog a.k24-bildtafel__link:focus,
    .k24-blog a.k24-bildtafel__link:active {
      color: var(--brand-primary);
      text-decoration: none !important;
      border-bottom: none;
    }
    .k24-blog a.k24-system__title::after,
    .k24-blog a.k24-bildtafel__link::after {
      content: "";
      flex: 0 0 auto;
      width: 13px;
      height: 13px;
      margin-top: 4px;
      background-image: var(--icon-chevron-rechts);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      transition: transform 0.15s ease;
    }
    /* Hover verschiebt den Winkel statt die Farbe zu wechseln: der Winkel ist im
       Bild fest orange, ein Farbwechsel des Textes wuerde auseinanderlaufen. */
    .k24-blog a.k24-system__title:hover::after,
    .k24-blog a.k24-bildtafel__link:hover::after {
      transform: translateX(3px);
    }
    .k24-blog .k24-system__item p {
      margin: 2px 0 0;
      font-size: var(--font-size-base);
      line-height: var(--line-height-base);
    }

    /* ---------- Themencluster / Weiterlesen ---------- */
    /* Bauform des Inhaltsverzeichnisses: derselbe Kasten, dieselbe Ueberschrift,
       derselbe Pfeil vor dem Link. Das Inhaltsverzeichnis oeffnet die Seite, der
       Cluster schliesst sie - deshalb steht er als letztes Modul.
       Markup: nav.k24-toc-box.k24-cluster > p.k24-toc-title + ul.k24-toc-list */
    .k24-blog .k24-cluster {
      margin: 0;
    }
    /* Jeder Eintrag ist zweizeilig (Link + Begruendung) und braucht deshalb mehr
       Luft nach unten als ein einzeiliger TOC-Eintrag. */
    .k24-blog .k24-cluster .k24-toc-list .k24-li + .k24-li {
      margin-top: 20px;
    }
    /* Anders als im Inhaltsverzeichnis steht der Winkel hier HINTER dem Wort:
       Ein TOC-Eintrag springt innerhalb der Seite, ein Cluster-Eintrag fuehrt
       weiter - das Zeichen zeigt deshalb aus der Zeile hinaus. Orange, ohne
       Unterstrich; unterstrichen wird nur der Link im Fliesstext. */
    .k24-blog .k24-cluster .k24-toc-list a {
      color: var(--brand-primary);
      align-items: flex-start;
      gap: 8px;
      width: fit-content;
    }
    .k24-blog .k24-cluster .k24-toc-list a::before {
      content: none;
      display: none;
    }
    .k24-blog .k24-cluster .k24-toc-list a::after {
      content: "";
      flex: 0 0 auto;
      width: 13px;
      height: 13px;
      margin-top: 4px;
      background-image: var(--icon-chevron-rechts);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      transition: transform 0.15s ease;
    }
    .k24-blog .k24-cluster .k24-toc-list a:hover::after {
      transform: translateX(3px);
    }
    .k24-blog .k24-cluster .k24-toc-list a:hover,
    .k24-blog .k24-cluster .k24-toc-list a:hover span {
      color: var(--brand-primary);
      text-decoration: none !important;
    }
    /* Begruendung steht linksbuendig unter dem Link - ohne Pfeil davor gibt es
       keine Einrueckung mehr, an der sie sich ausrichten muesste. */
    .k24-blog .k24-cluster__warum {
      display: block;
      margin: 4px 0 0;
      font-size: var(--font-size-base);
      line-height: var(--line-height-base);
      font-weight: 400;
      color: var(--brand-text);
    }

    /* ---------- Bildtafel (Entwurf C) ---------- */
    /* Bauform von Berater-Block und Inline-CTA: eine Flaeche, Bild und Text
       teilen sich den Rahmen. Beide Spalten strecken sich auf die Zeilenhoehe,
       damit Bildkante und grauer Textteil oben UND unten gemeinsam abschliessen.
       Ohne height:100% am Bild endet das Foto frueher als der graue Grund. */
    .k24-blog .k24-bildtafel {
      display: flex;
      flex-direction: column;
      gap: 28px;
      margin: 20px 0 var(--k24-baustein-abstand);
      padding-left: 0;
      list-style: none;
    }
    .k24-blog .k24-bildtafel__zeile {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: stretch;
      margin: 0;
      border: none;
      border-radius: 12px;
      overflow: hidden;
      background: #F7F7F7;
    }
    .k24-blog .k24-bildtafel__zeile--gespiegelt .k24-bildtafel__medien { order: 2; }
    .k24-blog .k24-bildtafel__zeile--gespiegelt .k24-bildtafel__koerper { order: 1; }
    .k24-blog .k24-bildtafel__medien {
      margin: 0;
      min-width: 0;
      min-height: 280px;
      position: relative;
    }
    /* Absolut im Zellenrahmen: das Foto fuellt die Spalte, statt die
       Zeilenhoehe mit seiner Eigenmasse zu sprengen. Sonst schliesst der
       graue Textteil oben mit dem Bild ab und unten nicht. */
    .k24-blog .k24-bildtafel__bild {
      display: block;
      position: absolute;
      inset: 0;
      background: #EDEDED;
    }
    .k24-blog .k24-bildtafel__bild img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    /* Zeichnung statt Foto: Ein Foto vertraegt den Anschnitt, eine beschriftete
       Schnittzeichnung nicht - dort liegen die Beschriftungen am Rand und sind
       als erstes weg. Diese Zeile zeigt das Bild deshalb vollstaendig und
       nimmt dafuer freie Flaeche in Kauf. Weiss statt #EDEDED, weil solche
       Zeichnungen freigestellt kommen und auf Grau wie ein Kasten wirken. */
    .k24-blog .k24-bildtafel__zeile--zeichnung .k24-bildtafel__bild {
      background: #FFFFFF;
    }
    .k24-blog .k24-bildtafel__zeile--zeichnung .k24-bildtafel__bild img {
      object-fit: contain;
      padding: 20px;
    }
    .k24-blog .k24-bildtafel__koerper {
      padding: 28px 32px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-width: 0;
    }
    .k24-blog .k24-bildtafel__koerper h3 {
      margin: 0 0 8px;
      font-size: var(--font-size-h3);
      font-weight: 700;
      line-height: var(--line-height-heading);
      color: var(--brand-heading);
    }
    .k24-blog .k24-bildtafel__koerper p {
      margin: 0 0 8px;
      font-size: var(--font-size-base);
      line-height: var(--line-height-base);
    }
    .k24-blog .k24-bildtafel__liste {
      margin: 0 0 16px;
      padding: 0 0 0 16px;
      list-style: disc;
    }
    .k24-blog .k24-bildtafel__liste li {
      margin: 0 0 4px;
      font-size: var(--font-size-base);
      line-height: var(--line-height-base);
      color: var(--brand-text);
    }
    .k24-blog .k24-bildtafel__koerper .k24-bildtafel__link {
      margin-top: 8px;
      align-self: flex-start;
    }

    /* ---------- Bildzeile (Entwurf D) ---------- */
    /* Kompakte Medienzeile: kleines Quadrat + Text. Leiht die Zeilenlogik des
       Themenclusters, nur mit Bild statt Winkel. Fuer schlanke Kategorien. */
    .k24-blog .k24-bildzeile {
      display: flex;
      flex-direction: column;
      margin: 20px 0 var(--k24-baustein-abstand);
      padding-left: 0;
      list-style: none;
      border-top: 1px solid #D9D9D9;
    }
    .k24-blog .k24-bildzeile__zeile {
      display: grid;
      grid-template-columns: 120px 1fr;
      gap: 24px;
      align-items: center;
      margin: 0;
      padding: 16px 0;
      border-bottom: 1px solid #D9D9D9;
    }
    .k24-blog .k24-bildzeile__medien { margin: 0; }
    .k24-blog .k24-bildzeile__bild {
      display: block;
      width: 120px;
      height: 120px;
      border-radius: var(--radius-brand);
      overflow: hidden;
      background: var(--brand-light-grey);
    }
    .k24-blog .k24-bildzeile__bild img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }
    .k24-blog .k24-bildzeile__koerper h3 {
      margin: 0 0 4px;
      font-size: var(--font-size-h3);
      font-weight: 700;
      line-height: var(--line-height-heading);
      color: var(--brand-heading);
    }
    .k24-blog .k24-bildzeile__koerper p {
      margin: 0 0 8px;
      font-size: var(--font-size-base);
      line-height: var(--line-height-base);
    }
    .k24-blog a.k24-bildzeile__link {
      display: inline-flex;
      align-items: flex-start;
      gap: 8px;
      color: var(--brand-primary);
      font-weight: 700;
      text-decoration: none !important;
      border-bottom: none;
    }
    .k24-blog a.k24-bildzeile__link:link,
    .k24-blog a.k24-bildzeile__link:visited,
    .k24-blog a.k24-bildzeile__link:hover,
    .k24-blog a.k24-bildzeile__link:focus,
    .k24-blog a.k24-bildzeile__link:active {
      color: var(--brand-primary);
      text-decoration: none !important;
      border-bottom: none;
    }
    .k24-blog a.k24-bildzeile__link::after {
      content: "";
      flex: 0 0 auto;
      width: 13px;
      height: 13px;
      margin-top: 4px;
      background-image: var(--icon-chevron-rechts);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      transition: transform 0.15s ease;
    }
    .k24-blog a.k24-bildzeile__link:hover::after {
      transform: translateX(3px);
    }

    /* ---------- Ambiente (Produkt in der Einsatzumgebung) ---------- */
    /* Eine Szene, kein Textmodul: das Bild traegt die Stimmung, die
       Unterschrift nennt Produkttyp und Modell. Nur fuer Kategorien, in denen
       die Optik den Kauf mitentscheidet - nicht bei Zubehoer und Ersatzteilen.
       Drei Fassungen: Einzelbild (genau ein figure), Zweier- und Dreier-Reihe
       zum optischen Vergleich. Radius 12px statt --radius-brand, weil die
       Bildflaeche deutlich groesser ist als bei den uebrigen Modulen. */
    .k24-blog .k24-ambiente {
      display: block;
      position: relative;
      margin: 20px 0;
    }
    .k24-blog .k24-ambiente__bild {
      display: block;
      position: relative;
      overflow: hidden;
      border-radius: 12px;
      background: #EDEDED;
      /* 3:2 statt 16:9: weniger Anschnitt bei quadratischen Shop-Fotos.
         object-position etwas nach oben, damit Koepfe und Schornstein bleiben.
         Gilt nur auf Desktop - mobil wird nicht zugeschnitten. Beim Motiv
         beachten: der 3:2-Ausschnitt zeigt nur 12,7 % bis 79,3 % der
         Bildhoehe, Koepfe im oberen Achtel fallen weg. */
      aspect-ratio: 3 / 2;
    }
    .k24-blog .k24-ambiente__bild img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 38%;
    }
    .k24-blog .k24-ambiente__caption {
      /* 8px unter dem Bild - dieselbe Stufe wie in Galerie, Bild-Text-Zeile und
         Tab-Intro. Die Unterschrift gehoert zum Bild und darf nicht wie ein
         eigener Absatz darunter stehen. Betrifft die Dreier-Reihe auf Desktop
         und mobil alle drei Fassungen; liegt die Unterschrift im Bild
         (k24-ambiente--titel), gilt weiter margin: 0. */
      margin: 8px 0 0;
      font-size: var(--font-size-xs);
      line-height: 16px;
      color: var(--brand-text);
    }

    /* Vergleich: zwei oder drei Modelle nebeneinander, ohne Passepartout.
       Das Shop-Bild bleibt vollstaendig (contain) und wird schmaler. */
    .k24-blog .k24-ambiente-reihe {
      display: grid;
      gap: 16px;
      margin: 20px 0;
    }
    .k24-blog .k24-ambiente-reihe--2 {
      grid-template-columns: 1fr 1fr;
    }
    .k24-blog .k24-ambiente-reihe--3 {
      grid-template-columns: 1fr 1fr 1fr;
    }
    .k24-blog .k24-ambiente-reihe .k24-ambiente {
      margin: 0;
    }
    .k24-blog .k24-ambiente-reihe .k24-ambiente__bild {
      aspect-ratio: auto;
      background: transparent;
    }
    .k24-blog .k24-ambiente-reihe .k24-ambiente__bild img {
      width: 100%;
      height: auto;
      object-fit: contain;
      object-position: center;
    }

    /* Unterschrift, Grundfassung: steht unter dem Bild. Produkttyp und Modell
       liegen in zwei Spans, damit dieselbe Auszeichnung einmal unter dem Bild
       und einmal als Titelzeile im Bild ausgegeben werden kann. Unter dem Bild
       stehen beide in Groesse und Farbe der Unterschrift, getrennt durch einen
       Mittelpunkt - kein Orange, keine Versalien. Das ist die Fassung der
       Dreier-Reihe und zugleich die mobile Fassung aller drei Fassungen. */
    .k24-blog .k24-ambiente__eyebrow,
    .k24-blog .k24-ambiente__titel {
      display: inline;
      margin: 0;
      font-size: inherit;
      font-weight: 400;
      line-height: inherit;
      text-transform: none;
      color: inherit;
      overflow-wrap: break-word;
    }
    /* Geschuetztes Leerzeichen davor, damit der Mittelpunkt nicht allein in
       die naechste Zeile rutscht. */
    .k24-blog .k24-ambiente__eyebrow::after {
      content: "\00A0\00B7 ";
    }

    /* Titelzeile im Bild - nur Einzelbild und Zweier-Reihe, und nur ab 769px.
       Der ganze Block steckt deshalb in einer min-width-Query: mobil muss
       nichts zurueckgenommen werden, die Regeln existieren dort einfach nicht
       und die Grundfassung oben greift von allein.

       Groessen, Farben und Abstaende kommen aus den Modul-Ueberschriften
       (k24-section-eyebrow: 18/18, 700, uppercase, --brand-primary, 8px
       Abstand; h2: 24px, 700, uppercase, line-height 1.25 - auf dem Bild in
       Weiss, damit der Text lesbar bleibt). */
    @media (min-width: 769px) {
      .k24-blog .k24-ambiente--titel {
        container-type: inline-size;
      }
      /* Der Farbverlauf haengt am Unterschrift-Block statt an einer
         Prozenthoehe des Bildes: bricht der Text auf mehr Zeilen um, waechst
         die Abdeckung mit und der Text steht nie auf ungeschuetztem Motiv.
         Der untere Radius wiederholt die 12px des Bildes, weil der Block
         ausserhalb des clippenden __bild liegt. */
      .k24-blog .k24-ambiente--titel .k24-ambiente__caption {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 64px 32px 32px;
        border-radius: 0 0 12px 12px;
        background: linear-gradient(0deg, rgba(70, 50, 43, 0.5) 0%, rgba(70, 50, 43, 0) 100%);
      }
      .k24-blog .k24-ambiente--titel .k24-ambiente__eyebrow {
        display: block;
        margin: 0 0 8px;
        font-size: 18px;
        font-weight: 700;
        line-height: 18px;
        text-transform: uppercase;
        color: var(--brand-primary);
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      }
      /* Im Bild trennt der Zeilenumbruch, nicht der Mittelpunkt. */
      .k24-blog .k24-ambiente--titel .k24-ambiente__eyebrow::after {
        content: none;
      }
      .k24-blog .k24-ambiente--titel .k24-ambiente__titel {
        display: block;
        font-size: var(--font-size-h2);
        font-weight: 700;
        line-height: var(--line-height-heading);
        text-transform: uppercase;
        color: #FFFFFF;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      }

      /* Halbe Spalte: Titel eine 4er-Stufe kleiner (20px). Gemessen wird die
         Kachel und nicht der Viewport, weil dieselbe Unterschrift einmal
         ueber die volle Breite und einmal in einer halben Spalte steht; ein
         Viewport-Query kann das nicht unterscheiden. Greift bei der
         Zweier-Reihe zwischen 769px und rund 1100px Bildschirmbreite. */
      @container (max-width: 479px) {
        .k24-blog .k24-ambiente--titel .k24-ambiente__caption {
          padding: 56px 24px 24px;
        }
        .k24-blog .k24-ambiente--titel .k24-ambiente__titel {
          font-size: var(--font-size-xl);
        }
      }
      /* Netz fuer schmale Layout-Spalten: im Standard-Layout nicht erreichbar,
         weil die Kacheln ab 769px mindestens rund 370px breit sind. Steht
         hier, damit ein Wort wie "Wasserfuehrender" die Kachel auch dann nicht
         sprengt, wenn das Modul in einer engeren Spalte landet. */
      @container (max-width: 339px) {
        .k24-blog .k24-ambiente--titel .k24-ambiente__caption {
          padding: 40px 16px 16px;
        }
        .k24-blog .k24-ambiente--titel .k24-ambiente__eyebrow {
          margin-bottom: 4px;
          font-size: var(--font-size-sm);
          line-height: 16px;
        }
        .k24-blog .k24-ambiente--titel .k24-ambiente__titel {
          font-size: var(--font-size-h3);
        }
      }
    }

    /* ---------- Kategoriemodule: Tablet ---------- */
    @media (max-width: 992px) {
      .k24-blog .k24-typen-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* ---------- Kategoriemodule: Mobil ---------- */
    @media (max-width: 768px) {
      .k24-blog .k24-toc-box {
        padding: 28px 24px;
      }
      /* Klickbare Bildkarten: horizontales Swipe mit Peek der naechsten Karte.
         Der Figma-Export zeigte nur den Startzustand; Scroll-Snap ersetzt den
         Prototyp-Swipe. */
      .k24-blog .k24-typen-grid {
        display: flex;
        flex-wrap: nowrap;
        grid-template-columns: none;
        gap: 16px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 15px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-inline: -15px;
        padding: 12px 16px 20px;
      }
      .k24-blog .k24-typen-grid::-webkit-scrollbar {
        display: none;
      }
      .k24-blog .k24-typen-card {
        flex: 0 0 calc(100% - 56px);
        max-width: 309px;
        scroll-snap-align: start;
      }
      .k24-blog .k24-typen-card:first-child,
      .k24-blog .k24-typen-card.k24-is-snapped {
        border-color: var(--brand-primary);
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
      }
      .k24-blog .k24-typen-grid.k24-has-snap .k24-typen-card:first-child:not(.k24-is-snapped) {
        border-color: var(--brand-line, #C7C2C0);
        box-shadow: none;
      }
      .k24-blog .k24-toc-list--zwei,
      .k24-blog .k24-article-list--zwei {
        column-count: 1;
      }
      .k24-blog .k24-content-section--grau {
        padding: 20px 16px 4px;
      }
      .k24-blog .k24-galerie__item,
      .k24-blog .k24-galerie__item--reverse {
        flex-direction: column;
        gap: 16px;
      }
      .k24-blog .k24-galerie__figure {
        flex: 1 1 auto;
        max-width: 100%;
        width: 100%;
      }
      /* Mobil steht das Bild ueber dem Text; die Hoehenkopplung des Desktops
         wird zurueckgenommen, das Bild behaelt seine Eigenhoehe. */
      .k24-blog .k24-galerie__media {
        flex: 0 0 auto;
        min-height: 0;
      }
      .k24-blog .k24-galerie__body {
        display: block;
      }
      .k24-blog .k24-inline-cta {
        grid-template-columns: 1fr;
      }
      .k24-blog .k24-inline-cta__text {
        padding: 20px 16px 16px;
      }
      .k24-blog .k24-inline-cta__actions {
        justify-content: stretch;
        padding: 16px;
        border-top: 1px solid #E2E2E2;
      }
      .k24-blog .k24-inline-cta__btn {
        flex: 1 1 auto;
        padding: 15px 20px 13px;
      }
      /* Datentabelle: Kartenansicht wie die seg-table, aber mit sprechenden
         Labels aus data-label statt fester nth-child-Zuordnung. So funktioniert
         jede Spaltenzahl ohne zusaetzliches CSS pro Seite. */
      .k24-blog .k24-datentabelle .k24-seg-table td[data-label]::before {
        content: attr(data-label);
        font-size: var(--font-size-sm);
        font-weight: 700;
        line-height: var(--line-height-sm);
        text-transform: none;
        letter-spacing: normal;
        color: var(--brand-text);
        padding-right: 14px;
      }
      .k24-blog .k24-datentabelle .k24-seg-table td:first-child {
        font-size: var(--font-size-base);
      }
      /* Werte rechts am Kartenrand: Bricht ein Wert um, stand die zweite Zeile
         bisher links unter dem Label und die Wertspalte wirkte gebrochen. Das
         Label selbst bleibt links. */
      .k24-blog .k24-datentabelle .k24-seg-table td {
        text-align: right !important;
      }
      .k24-blog .k24-datentabelle .k24-seg-table td[data-label]::before {
        text-align: left;
      }
      /* Textwert-Chips ohne Chipoptik, aber in der Wertgroesse der Tabelle. */
      .k24-blog .k24-datentabelle .k24-seg-table td .k24-seg-chip--style {
        padding: 0;
        min-width: 0;
        font-size: var(--font-size-sm);
        text-align: right;
      }
      /* Alle Datenspalten gleich behandeln - kein Sonderfall 2. Spalte wie im
         Modellvergleich (dort ist es die Stil-Spalte). */
      .k24-blog .k24-datentabelle .k24-seg-table td:nth-child(2) {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 4px;
        justify-content: space-between;
      }
      .k24-blog .k24-steps__item::before {
        padding: 4px 8px;
      }
      .k24-blog .k24-steps-box__head {
        align-items: flex-start;
        flex-direction: column;
      }
      .k24-blog .k24-steps-box__actions {
        width: 100%;
        gap: 8px;
        justify-content: space-between;
        flex-wrap: nowrap;
      }
      /* "Liste" aus den drei Aktionslabels nehmen, damit drucken /
         downloaden / zuruecksetzen in einer Zeile bleiben. Der volle
         Buttontext bleibt im Markup (Screenreader). Gilt fuer beide Maerkte -
         die franzoesischen Beschriftungen sind noch laenger als die deutschen
         und wuerden sonst am rechten Rand abgeschnitten. */
      .k24-blog .k24-steps-box__btn {
        font-size: 0;
        gap: 4px;
      }
      .k24-blog .k24-steps-box__btn::after {
        font-size: var(--font-size-sm);
        line-height: 20px;
        font-weight: 400;
      }
      .k24-blog .k24-steps-box__btn--print::after { content: "Drucken"; }
      .k24-blog .k24-steps-box__btn--file::after { content: "Downloaden"; }
      .k24-blog .k24-steps-box__btn--reset::after { content: "Zurücksetzen"; }
      html[lang^="fr"] .k24-blog .k24-steps-box__btn--print::after { content: "Imprimer"; }
      html[lang^="fr"] .k24-blog .k24-steps-box__btn--file::after { content: "Télécharger"; }
      html[lang^="fr"] .k24-blog .k24-steps-box__btn--reset::after { content: "Réinitialiser"; }
      .k24-blog .k24-steps--liste .k24-steps__item {
        gap: 16px;
        padding: 16px;
      }
      .k24-blog .k24-entscheid,
      .k24-blog .k24-system {
        grid-template-columns: 1fr;
        gap: 24px;
      }
      /* Rahmen-Fassung: die Trennkante kippt von der Seite nach unten, der
         Abstand bleibt bei 0 - sonst reisst die Karte auf. */
      .k24-blog .k24-entscheid--rahmen,
      .k24-blog .k24-system--rahmen {
        gap: 0;
      }
      .k24-blog .k24-entscheid--rahmen .k24-entscheid__col,
      .k24-blog .k24-system--rahmen .k24-system__col {
        padding: 28px;
      }
      .k24-blog .k24-entscheid--rahmen .k24-entscheid__col + .k24-entscheid__col,
      .k24-blog .k24-system--rahmen .k24-system__col + .k24-system__col {
        border-left: none;
        border-top: 1px solid var(--brand-line, #C7C2C0);
      }
      .k24-blog .k24-bildtafel { gap: 20px; }
      .k24-blog .k24-bildtafel__zeile,
      .k24-blog .k24-bildtafel__zeile--gespiegelt {
        grid-template-columns: 1fr;
      }
      .k24-blog .k24-bildtafel__zeile--gespiegelt .k24-bildtafel__medien,
      .k24-blog .k24-bildtafel__zeile--gespiegelt .k24-bildtafel__koerper {
        order: 0;
      }
      .k24-blog .k24-bildtafel__medien { min-height: 200px; }
      /* Mobil traegt die Zeichnung ihre eigene Hoehe: In 200 px Zellenhoehe
         schrumpft ein liegendes Motiv sonst auf Briefmarkengroesse, weil
         `contain` an der kurzen Seite haengt. Ohne absolute Lage bestimmt das
         Bild die Hoehe selbst und steht in voller Spaltenbreite da. */
      .k24-blog .k24-bildtafel__zeile--zeichnung .k24-bildtafel__medien {
        min-height: 0;
      }
      .k24-blog .k24-bildtafel__zeile--zeichnung .k24-bildtafel__bild {
        position: static;
      }
      .k24-blog .k24-bildtafel__zeile--zeichnung .k24-bildtafel__bild img {
        height: auto;
        padding: 12px;
      }
      .k24-blog .k24-bildtafel__koerper { padding: 16px 16px 20px; }
      .k24-blog .k24-bildzeile__zeile {
        grid-template-columns: 120px 1fr;
        gap: 24px;
        padding: 20px 0;
      }
      .k24-blog .k24-bildzeile__bild { width: 120px; height: 120px; }
      /* Ambiente mobil: alle Bilder stehen untereinander, also muessen sie
         dasselbe Format haben. Das Einzelbild gibt seinen 3:2-Zuschnitt
         deshalb auf und zeigt wie die Reihen das vollstaendige quadratische
         Shop-Bild. Nebeneffekt: mobil kann kein Kopf und kein Produktteil
         mehr wegfallen, die Anschnitt-Frage stellt sich nur auf Desktop. */
      .k24-blog .k24-ambiente__bild {
        aspect-ratio: auto;
        background: transparent;
      }
      .k24-blog .k24-ambiente__bild img {
        height: auto;
        object-fit: contain;
        object-position: center;
      }
      .k24-blog .k24-ambiente-reihe {
        gap: 12px;
      }
      /* Spalten brechen um wie bei k24-related-grid, k24-split-grid und
         k24-advisor-block. Ohne das stehen drei rund 109px breite Kacheln auf
         375px Bildschirmbreite - darin passt keine Unterschrift, unabhaengig
         von der Schriftgroesse. */
      .k24-blog .k24-ambiente-reihe--3 {
        grid-template-columns: 1fr 1fr;
      }
    }

    /* ---------- Kategoriemodule: schmales Mobil ---------- */
    @media (max-width: 480px) {
      .k24-blog .k24-ambiente-reihe--2,
      .k24-blog .k24-ambiente-reihe--3 {
        grid-template-columns: 1fr;
      }
    }