/* site.css - vom Bau erzeugt fuer cnc-fraesen-lassen.de (Hero-Buehne, CTA-Motiv). Nicht von Hand aendern. */
.hero-buehne { background-image: url('/bilder/winkelhalter-hero-dunkel-1200.webp'); background-image: -webkit-image-set(url('/bilder/winkelhalter-hero-dunkel-1200.webp') 1x, url('/bilder/winkelhalter-hero-dunkel-2400.webp') 2x); background-image: image-set(url('/bilder/winkelhalter-hero-dunkel-1200.webp') 1x, url('/bilder/winkelhalter-hero-dunkel-2400.webp') 2x); background-position: 70% 50%; transform-origin: 70% 50%; }
[data-theme="light"] .hero-buehne { background-image: url('/bilder/winkelhalter-hero-hell-1200.webp'); background-image: -webkit-image-set(url('/bilder/winkelhalter-hero-hell-1200.webp') 1x, url('/bilder/winkelhalter-hero-hell-2400.webp') 2x); background-image: image-set(url('/bilder/winkelhalter-hero-hell-1200.webp') 1x, url('/bilder/winkelhalter-hero-hell-2400.webp') 2x); }
@media (min-width: 1300px) { .hero-buehne { background-image: url('/bilder/winkelhalter-hero-dunkel-1920.webp'); background-image: -webkit-image-set(url('/bilder/winkelhalter-hero-dunkel-1920.webp') 1x, url('/bilder/winkelhalter-hero-dunkel-2400.webp') 2x); background-image: image-set(url('/bilder/winkelhalter-hero-dunkel-1920.webp') 1x, url('/bilder/winkelhalter-hero-dunkel-2400.webp') 2x); } [data-theme="light"] .hero-buehne { background-image: url('/bilder/winkelhalter-hero-hell-1920.webp'); background-image: -webkit-image-set(url('/bilder/winkelhalter-hero-hell-1920.webp') 1x, url('/bilder/winkelhalter-hero-hell-2400.webp') 2x); background-image: image-set(url('/bilder/winkelhalter-hero-hell-1920.webp') 1x, url('/bilder/winkelhalter-hero-hell-2400.webp') 2x); } }
@media (max-width: 1024px) { .hero-bild-flaeche { background-image: url('/bilder/winkelhalter-hero-dunkel-1200.webp'); background-image: -webkit-image-set(url('/bilder/winkelhalter-hero-dunkel-1200.webp') 1x, url('/bilder/winkelhalter-hero-dunkel-2400.webp') 2x); background-image: image-set(url('/bilder/winkelhalter-hero-dunkel-1200.webp') 1x, url('/bilder/winkelhalter-hero-dunkel-2400.webp') 2x); background-size: cover; background-position: 70% 50%; } [data-theme="light"] .hero-bild-flaeche { background-image: url('/bilder/winkelhalter-hero-hell-1200.webp'); background-image: -webkit-image-set(url('/bilder/winkelhalter-hero-hell-1200.webp') 1x, url('/bilder/winkelhalter-hero-hell-2400.webp') 2x); background-image: image-set(url('/bilder/winkelhalter-hero-hell-1200.webp') 1x, url('/bilder/winkelhalter-hero-hell-2400.webp') 2x); } }
@media (max-width: 600px) { .hero-bild-flaeche { background-image: url('/bilder/winkelhalter-hero-dunkel-1200.webp'); background-size: cover; background-position: 70% 50%; } [data-theme="light"] .hero-bild-flaeche { background-image: url('/bilder/winkelhalter-hero-hell-1200.webp'); } }

/* Domaineigene Stile aus inhalt/cnc-fraesen-lassen.de/stil.css */
.kl-z {
    --kl-oben: #3a3b3e; --kl-vorne: #2b2c2f; --kl-rechts: #202124; --kl-boden: #26272a; --kl-wand1: #17181a; --kl-wand2: #313236;
    --kl-kante: #d6d6d6; --kl-fein: #7c7c7c; --kl-schnitt: #26272a; --kl-loch: #0b0b0c; --kl-halter: #4a4b50; --kl-rippe: #34353a;
    color: var(--text-primary); display: block; width: 100%; height: auto; overflow: visible;
}
[data-theme="light"] .kl-z {
    --kl-oben: #f7f7f8; --kl-vorne: #e3e4e7; --kl-rechts: #cfd0d4; --kl-boden: #dadbdf; --kl-wand1: #c3c4c9; --kl-wand2: #ececef;
    --kl-kante: #262626; --kl-fein: #8c8c8c; --kl-schnitt: #e4e5e8; --kl-loch: #8e9096; --kl-halter: #b9bbc0; --kl-rippe: #d0d1d6;
}
.kl-z .kl-f-oben { fill: var(--kl-oben); }
.kl-z .kl-f-vorne { fill: var(--kl-vorne); }
.kl-z .kl-f-rechts { fill: var(--kl-rechts); }
.kl-z .kl-f-boden { fill: var(--kl-boden); }
.kl-z .kl-f-wand-links { fill: var(--kl-wand1); }
.kl-z .kl-f-wand-unten, .kl-z .kl-f-wand-hinten { fill: var(--kl-wand2); }
.kl-z .kl-f-schnitt { fill: var(--kl-schnitt); }
.kl-z .kl-f-rippe { fill: var(--kl-rippe); }
.kl-z .kl-f-heiss { fill: var(--orange-glow); }
.kl-z .kl-kante { stroke: var(--kl-kante); stroke-width: 1.4; stroke-linejoin: round; }
.kl-z .kl-kante-fein { stroke: var(--kl-kante); stroke-width: 0.8; stroke-linejoin: round; }
.kl-z .kl-fein { fill: none; stroke: var(--kl-fein); stroke-width: 0.9; }
.kl-z .kl-rand { fill: none; stroke: var(--kl-kante); stroke-width: 1.4; stroke-linejoin: round; }
.kl-z .kl-loch { fill: var(--kl-loch); stroke: var(--kl-kante); stroke-width: 0.9; }
.kl-z .kl-loch-passung { stroke: var(--orange); stroke-width: 1.6; }
.kl-z .kl-gewindelinie, .kl-z .kl-gewinde-ring { fill: none; stroke: var(--kl-fein); stroke-width: 0.9; stroke-dasharray: 2 1.6; }
.kl-z .kl-l { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.kl-z .kl-l-dick { stroke-width: 2.4; }
.kl-z .kl-a { fill: none; stroke: var(--orange); stroke-width: 1.8; }
.kl-z .kl-a-dick { stroke-width: 3; }
.kl-z .kl-af { fill: var(--orange); }
.kl-z .kl-roh { fill: none; stroke: var(--text-secondary); stroke-width: 1.2; stroke-dasharray: 5 4; }
.kl-z .kl-span { fill: var(--orange-glow); stroke: none; }
.kl-z .kl-t { fill: currentColor; font-family: 'DM Sans', system-ui, sans-serif; font-size: 13px; }
.kl-z .kl-t-klein { font-size: 12.5px; fill: var(--text-secondary); }
.kl-z .kl-t-fett { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 14px; }
.kl-z .kl-t-orange { fill: var(--orange-text); font-weight: 600; }
.kl-z .kl-t-hell { fill: #ffffff; font-size: 12.5px; }
.kl-z .kl-block-einmal { fill: var(--orange-flaeche); }
.kl-z .kl-pfeil, .kl-z .kl-pfeil-fein { fill: none; stroke: var(--text-secondary); stroke-width: 1.6; stroke-linecap: round; }
.kl-z .kl-pfeil-fein { stroke-width: 1.2; }
.kl-z .kl-pfeil-spitze, .kl-z .kl-pfeil-fein-spitze { fill: var(--text-secondary); }
.kl-z .kl-richtung { fill: none; stroke: var(--orange); stroke-width: 2.4; stroke-linecap: round; }
.kl-z .kl-richtung-spitze { fill: var(--orange); }
.kl-z .kl-trenn { fill: none; stroke: var(--border-hover); stroke-width: 1; stroke-dasharray: 3 4; }
.kl-z .kl-fraeser { fill: var(--orange-glow); stroke: var(--orange); stroke-width: 1.6; }
.kl-z .kl-halter { fill: var(--kl-halter); stroke: var(--kl-kante); stroke-width: 1; }
.kl-z .kl-fraeser-schaft { fill: none; stroke: var(--kl-fein); stroke-width: 7; stroke-linecap: butt; opacity: 0.55; }
.kl-z .kl-biege { fill: none; stroke: var(--orange); stroke-width: 1.8; stroke-dasharray: 5 3; }
.kl-z .kl-fraeser-dick { fill: var(--kl-halter); stroke: var(--orange); stroke-width: 1.4; }
.kl-z .kl-reibahle { fill: var(--kl-halter); stroke: var(--orange); stroke-width: 1.2; }
.kl-z .kl-aufmass { fill: var(--orange-glow); stroke: var(--orange); stroke-width: 1; stroke-dasharray: 3 2; }
.kl-z .kl-welle { fill: none; stroke: var(--orange); stroke-width: 1.6; stroke-linecap: round; }
.kl-z .kl-scheibe { fill: var(--kl-halter); stroke: var(--kl-kante); stroke-width: 1; }
.kl-z .kl-span-kurz { fill: none; stroke: var(--orange); stroke-width: 2.2; stroke-linecap: round; }
.kl-z .kl-span-lang { fill: none; stroke: var(--orange); stroke-width: 1.6; stroke-linecap: round; }
.kl-z .kl-sicht { stroke: var(--orange); }
.kl-z .kl-sym-l { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.kl-z .kl-sym-a { fill: none; stroke: var(--orange); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.kl-z .kl-sym-dick { stroke-width: 3.2; }

.kl-z .kl-mk-ring { fill: none; stroke: var(--orange); stroke-width: 2; }
.kl-z .kl-mk-linie { fill: none; stroke: var(--orange); stroke-width: 1.4; }
.kl-z .kl-mk-punkt { fill: var(--orange-flaeche); stroke: var(--bg-card); stroke-width: 2; }
.kl-z .kl-mk-nr { fill: #ffffff; font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 14px; }
.js .kl-skizze-kosten .kl-mk { opacity: 0; }
.js .kl-skizze-kosten.visible .kl-mk { animation: klMarke 0.55s ease forwards; }
.js .kl-skizze-kosten.visible .kl-mk2 { animation-delay: 0.35s; }
.js .kl-skizze-kosten.visible .kl-mk3 { animation-delay: 0.7s; }
.js .kl-skizze-kosten.visible .kl-mk4 { animation-delay: 1.05s; }
.js .kl-skizze-kosten.visible .kl-mk5 { animation-delay: 1.4s; }
@keyframes klMarke { from { opacity: 0; } to { opacity: 1; } }


.kl-marke {
    display: inline-block; font-family: 'Space Grotesk', sans-serif; font-size: 0.78rem; font-weight: 600; letter-spacing: 2px;
    text-transform: uppercase; color: var(--orange-text); border-left: 3px solid var(--orange); padding-left: 10px; margin-bottom: 14px;
}
.kl-klein { font-size: 0.88rem; color: var(--text-secondary); }
.kl-karte {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-l); padding: 24px 26px;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.kl-karte:hover { border-color: var(--border-hover); }
.kl-karte h3 { font-size: 1.1rem; margin-bottom: 8px; }
.kl-karte p { color: var(--text-secondary); font-size: 0.95rem; }
figure.skizze.kl-rahmen, .kl-rahmen {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-l); padding: 18px 18px 14px; margin: 0;
}
figure.skizze.kl-rahmen figcaption { margin-top: 10px; }
.kl-nurjs { display: none; }
.js .kl-nurjs { display: block; }
.js .kl-ohnejs { display: none; }
.kl-weiter { margin-top: 26px; color: var(--text-secondary); max-width: 780px; }
.kl-weiter a { color: var(--orange-text); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(232, 114, 12, 0.4); text-underline-offset: 3px; }


.kl-wirkung { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.kl-wirkung-stark { color: var(--orange-text); }
.kl-wirkung-symbol .kl-balken-an { fill: currentColor; }
.kl-wirkung-symbol .kl-balken-aus { fill: none; stroke: currentColor; stroke-width: 1; opacity: 0.45; }
.kl-wirkung-offen .kl-wirkung-symbol .kl-balken-aus { stroke-dasharray: 2 1.5; }
.kl-stufe { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--text-secondary); white-space: nowrap; }
.kl-stufe-symbol .kl-sy-voll { fill: var(--text-secondary); stroke: var(--text-secondary); stroke-width: 1.4; }
.kl-stufe-symbol .kl-sy-leer { fill: none; stroke: var(--text-secondary); stroke-width: 1.4; }
.kl-stufe-symbol .kl-sy-halb { fill: var(--text-secondary); }
.kl-stufe-symbol .kl-sy-orange { fill: var(--orange); }

.kl-wirkung-text { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.kl-wirkung-text::before {
    content: ''; width: 16px; height: 11px; flex-shrink: 0;
    background:
        linear-gradient(currentColor, currentColor) 0 100% / 4px 4px no-repeat,
        linear-gradient(currentColor, currentColor) 6px 100% / 4px 7px no-repeat,
        linear-gradient(currentColor, currentColor) 12px 100% / 4px 11px no-repeat;
    opacity: 0.35;
}
.kl-w-stark { color: var(--orange-text); }
.kl-w-stark::before { opacity: 1; }
.kl-w-mittel::before {
    opacity: 1;
    background:
        linear-gradient(currentColor, currentColor) 0 100% / 4px 4px no-repeat,
        linear-gradient(currentColor, currentColor) 6px 100% / 4px 7px no-repeat,
        linear-gradient(var(--border-hover), var(--border-hover)) 12px 100% / 4px 11px no-repeat;
}


.kl-schritte { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; counter-reset: klschritt; }
.kl-schritt {
    position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-l);
    padding: 20px 18px 18px; counter-increment: klschritt; transition: border-color 0.3s, transform 0.3s;
}
.kl-schritt:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.kl-schritt::before {
    content: '0' counter(klschritt); position: absolute; top: 14px; right: 16px; font-family: 'Space Grotesk', sans-serif;
    font-weight: 700; font-size: 0.85rem; color: var(--text-muted);
}
.kl-schritt-symbol { width: 44px; height: 44px; margin-bottom: 12px; color: var(--text-primary); }
.kl-schritt-symbol .svg-einbettung, .kl-schritt-symbol svg { width: 44px; height: 44px; }
.kl-schritt h3 { font-size: 1rem; margin-bottom: 6px; line-height: 1.3; }
.kl-schritt p { font-size: 0.87rem; color: var(--text-secondary); line-height: 1.55; }
.kl-schritt[data-kennung~="M"] { border-color: rgba(232, 114, 12, 0.35); }
.kl-schritte-fuss { margin-top: 22px; color: var(--text-secondary); max-width: 780px; }
.kl-schritte-fuss a { color: var(--orange-text); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(232, 114, 12, 0.4); text-underline-offset: 3px; }


.kl-buehne { padding: 32px 34px; box-shadow: var(--schatten-karte); }
.kl-buehne-raster { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 40px; align-items: start; }
.kl-buehne h2 { font-size: clamp(1.45rem, 3.2vw, 2rem); margin-bottom: 12px; }
.kl-buehne-text > p { color: var(--text-secondary); margin-bottom: 14px; }
.kl-frage { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.kl-frage legend { font-size: 0.87rem; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; padding: 0; }
.kl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kl-chip { position: relative; display: inline-flex; }
.kl-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.kl-chip span {
    display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border: 1px solid var(--border-hover);
    border-radius: 999px; font-size: 0.9rem; color: var(--text-secondary); background: var(--bg-primary); cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s; user-select: none;
}
.kl-chip:hover span { border-color: var(--orange); color: var(--text-primary); }
.kl-chip input:checked + span { border-color: var(--orange); background: var(--orange-glow); color: var(--text-primary); font-weight: 600; }
.kl-chip input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }
.klb-ergebnis {
    border-left: 3px solid var(--orange); background: var(--bg-secondary); border-radius: 0 var(--radius-m) var(--radius-m) 0;
    padding: 14px 16px; margin: 6px 0 14px; min-height: 72px;
}
.klb-staerkster { color: var(--text-secondary); font-size: 0.93rem; margin-bottom: 8px; }
.klb-staerkster strong { color: var(--text-primary); }
.klb-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.klb-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 0.9rem; }
.klb-liste .kl-wirkung { min-width: 118px; }
.klb-titel { color: var(--text-primary); }
.kl-buehne-knopf { margin-top: 6px; }
.kl-skizze-kosten .svg-einbettung { max-width: 460px; margin: 0 auto; }
.kl-legende { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; counter-reset: kllegende; }
.kl-legende li { position: relative; padding-left: 34px; font-size: 0.88rem; color: var(--text-secondary); line-height: 1.5; counter-increment: kllegende; }
.kl-legende li::before {
    content: counter(kllegende); position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%;
    background: var(--orange-flaeche); color: #fff; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.78rem;
    display: flex; align-items: center; justify-content: center;
}
.kl-legende strong { color: var(--text-primary); }


.kl-teile { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 48px; align-items: start; }
.kl-teile .fliesstext p { margin-bottom: 14px; }
.kl-auftrag h3 { font-size: 1.05rem; margin-bottom: 12px; }
.kl-auftrag .haken-liste { margin-bottom: 18px; }
.kl-auftrag .kl-auftrag-zusatz { border-top: 1px solid var(--border); padding-top: 14px; }
.kl-absender { margin-top: 20px; font-size: 0.93rem; }


.kl-einmal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.kl-werkzeug-abschnitt { padding-top: 64px; }
.kl-werkzeug { box-shadow: var(--schatten-karte); }
.kl-werkzeug .werkzeug-kopf p { color: var(--text-secondary); font-size: 0.93rem; max-width: 640px; }
.kl-vorlagen { margin-bottom: 18px; }
.kl-vorlagen .kl-chips button {
    min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--orange); background: transparent;
    color: var(--orange-text); font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background 0.2s, color 0.2s;
}
.kl-vorlagen .kl-chips button:hover, .kl-vorlagen .kl-chips button[aria-pressed="true"] { background: var(--orange-flaeche); color: #fff; border-color: var(--orange-flaeche); }
.kl-vorlagen .kl-chips button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.kl-gruppe { border: 1px solid var(--border); border-radius: var(--radius-m); padding: 16px 16px 4px; margin: 0 0 14px; min-width: 0; background: var(--bg-primary); }
.kl-gruppe > legend {
    font-family: 'Space Grotesk', sans-serif; font-size: 0.78rem; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--orange-text); padding: 0 6px;
}
.kl-gruppe .kl-frage legend { font-weight: 500; color: var(--text-primary); }
.kl-ergebnis { position: sticky; top: 96px; }
.kl-ergebnis-kopf { border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 12px; }
.kl-hauptzeile { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.kl-hauptzahl { font-family: 'Space Grotesk', sans-serif; font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--orange-text); }
.kl-hauptwort { font-family: 'Space Grotesk', sans-serif; font-size: 1.1rem; font-weight: 600; color: var(--text-primary); }
.kl-nebenzeile { font-size: 0.88rem; color: var(--text-secondary); margin-top: 6px; }
.kl-abschnitt-titel { font-size: 0.8rem; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-muted); margin: 18px 0 10px; font-family: 'Space Grotesk', sans-serif; }
.kl-treiber-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.kl-treiber { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 14px 16px; }
.kl-treiber-stark { border-left: 3px solid var(--orange); }
.kl-treiber-kopf { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 8px; }
.kl-treiber-nr {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--bg-elevated); color: var(--text-primary);
    font-family: 'Space Grotesk', sans-serif; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.kl-treiber-stark .kl-treiber-nr { background: var(--orange-flaeche); color: #fff; }
.kl-treiber-titel { min-width: 0; }
.kl-treiber-titel h4 { font-size: 1rem; margin: 2px 0 4px; }
.kl-treiber-marken { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.kl-block-marke { font-size: 0.78rem; color: var(--text-muted); }
.kl-treiber-text, .kl-treiber-hebel, .kl-treiber-zusatz { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 6px; }
.kl-treiber-hebel strong { color: var(--text-primary); }
.kl-treiber-zusatz { border-left: 2px solid var(--warnung); padding-left: 10px; }
.kl-treiber-quelle { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 0.78rem; color: var(--text-muted); margin: 8px 0 0; }
.kl-bloecke { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.kl-block { border: 1px solid var(--border); border-radius: var(--radius-m); padding: 10px 12px; background: var(--bg-card); }
.kl-block-titel { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 0.88rem; color: var(--text-primary); margin-bottom: 6px; }
.kl-block-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.kl-block-liste li { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--text-secondary); }
.kl-block-liste .kl-wirkung-symbol { color: var(--text-secondary); flex-shrink: 0; }
.kl-offen-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.kl-offen-liste li { font-size: 0.88rem; color: var(--text-secondary); border-left: 2px solid var(--border-hover); padding-left: 10px; }
.kl-offen-liste strong { color: var(--text-primary); }
.kl-leer { color: var(--text-secondary); font-size: 0.93rem; }

.kl-beispiele { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.kl-beispiel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-l); padding: 20px 20px 18px; display: flex; flex-direction: column; min-width: 0; }

@supports (grid-template-rows: subgrid) {
    .kl-beispiel { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
}
.kl-beispiel figure { margin: 0 0 14px; }
.kl-beispiel figure img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 51%; border-radius: var(--radius-m); background: var(--bg-elevated); }
.kl-beispiel .skizze .svg-einbettung { aspect-ratio: 4 / 3; max-height: 250px; width: 100%; display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.kl-beispiel .skizze .svg-einbettung > svg { width: 100%; max-width: 260px; max-height: 100%; }
.kl-beispiel h3 { font-size: 1.08rem; margin-bottom: 8px; }
.kl-beispiel-angaben { font-size: 0.84rem; color: var(--text-muted); margin-bottom: 10px; line-height: 1.55; }
.kl-beispiel-top { list-style: none; padding: 0; margin: 0 0 10px; counter-reset: kltop; display: flex; flex-direction: column; gap: 6px; }
.kl-beispiel-top li { position: relative; padding-left: 30px; font-size: 0.9rem; color: var(--text-secondary); counter-increment: kltop; }
.kl-beispiel-top li::before {
    content: counter(kltop); position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-elevated);
    color: var(--text-primary); font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.78rem; display: flex; align-items: center; justify-content: center;
}
.kl-beispiel-top strong { color: var(--text-primary); font-weight: 600; margin-right: 6px; }
.kl-beispiel-rechenweg { font-size: 0.86rem; color: var(--text-secondary); margin-top: auto; border-top: 1px solid var(--border); padding-top: 10px; }

.kl-bloecke-seite { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 8px; }
.kl-bloecke-seite .kl-karte { position: relative; padding-top: 30px; }
.kl-bloecke-seite .kl-karte::before { content: ''; position: absolute; top: 0; left: 26px; width: 44px; height: 3px; background: var(--orange); border-radius: 0 0 3px 3px; }
.kl-bloecke-seite .kl-karte p + p { margin-top: 10px; }
.kl-bloecke-seite a { color: var(--orange-text); text-decoration: underline; text-decoration-color: rgba(232, 114, 12, 0.4); text-underline-offset: 3px; }
.kl-rohblock { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; margin-top: 34px; }
.kl-rohblock .svg-einbettung { max-width: 420px; margin: 0 auto; }

.kl-hebel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.kl-hebel .kl-karte { display: flex; flex-direction: column; gap: 16px; }
.kl-hebel-bild { background: var(--bg-secondary); border-radius: var(--radius-m); padding: 16px; display: flex; align-items: center; justify-content: center; }
.kl-hebel-bild .svg-einbettung { width: 100%; max-width: 300px; }
.kl-hebel-bild .svg-einbettung > svg { width: 100%; max-height: 150px; }
.kl-hebel .kl-karte h3 { font-size: 1.02rem; }
.kl-hebel .quelle { margin-top: 10px; }

.kl-stundensatz { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 48px; align-items: start; }
.kl-bestandteile h3 { font-size: 1rem; margin-bottom: 12px; }


.kl-regeltabelle summary { font-weight: 600; }
.kl-rt td, .kl-rt th[scope="row"] { font-size: 0.86rem; }
.kl-rt th[scope="row"] { min-width: 170px; }
.kl-rt .kl-rt-quelle { display: block; margin-top: 4px; color: var(--text-muted); font-size: 0.8rem; }
.kl-rt .kl-rt-hebel, .kl-rt .kl-rt-zusatz { display: block; margin-top: 4px; }
.kl-stufen-legende { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; font-size: 0.86rem; color: var(--text-secondary); }
.kl-stufen-legende .kl-stufe { margin-right: 6px; font-weight: 600; color: var(--text-primary); }


.kl-ablauf { list-style: none; padding: 0; margin: 0; position: relative; }
.kl-ablauf::before { content: ''; position: absolute; left: 31px; top: 34px; bottom: 34px; width: 2px; background: linear-gradient(var(--orange), var(--border)); }
.kl-ablauf-schritt { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 22px; padding: 0 0 34px; }
.kl-ablauf-schritt:last-child { padding-bottom: 0; }
.kl-ablauf-symbol {
    position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 50%; background: var(--bg-card); border: 2px solid var(--orange);
    display: flex; align-items: center; justify-content: center; color: var(--text-primary);
}
.kl-ablauf-symbol .svg-einbettung, .kl-ablauf-symbol svg { width: 34px; height: 34px; }
.kl-ablauf-inhalt { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-l); padding: 22px 26px; min-width: 0; }
.kl-ablauf-inhalt h3 { font-size: 1.15rem; margin-bottom: 10px; }
.kl-ablauf-inhalt p, .kl-ablauf-inhalt li { color: var(--text-secondary); }
.kl-ablauf-inhalt p + p { margin-top: 10px; }
.kl-ablauf-inhalt .strich-liste { margin: 10px 0 12px; }
.kl-ablauf-inhalt .strich-liste strong { color: var(--text-primary); }
.kl-ablauf-inhalt a { color: var(--orange-text); text-decoration: underline; text-decoration-color: rgba(232, 114, 12, 0.4); text-underline-offset: 3px; }
.kl-ablauf-nr { font-family: 'Space Grotesk', sans-serif; color: var(--orange-text); margin-right: 6px; }
.kl-erstauftrag { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 56px; align-items: start; }


.kl-gruppen td:first-child, .kl-gruppen th:first-child { white-space: nowrap; }
.kl-gruppe-marke {
    display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-s);
    font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: #fff; background: var(--orange-flaeche); margin-right: 8px;
}
.kl-metall-bild { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 56px; align-items: center; }
.kl-metall-bild .svg-einbettung { max-width: 520px; }


@media (max-width: 1180px) {
    .kl-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
    .kl-beispiele, .kl-bloecke-seite { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kl-beispiele > :last-child:nth-child(odd), .kl-bloecke-seite > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .kl-ergebnis { position: static; }
}
@media (max-width: 1024px) {
    .kl-buehne-raster, .kl-teile, .kl-einmal, .kl-stundensatz, .kl-rohblock, .kl-erstauftrag, .kl-metall-bild { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .kl-hebel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
    .kl-buehne { padding: 22px 18px; }
    .kl-ablauf::before { left: 23px; }
    .kl-ablauf-schritt { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; }
    .kl-ablauf-symbol { width: 48px; height: 48px; }
    .kl-ablauf-symbol .svg-einbettung, .kl-ablauf-symbol svg { width: 26px; height: 26px; }
    .kl-ablauf-inhalt { padding: 18px 18px; }
    
    .kl-rt thead { display: none; }
    .kl-rt, .kl-rt tbody, .kl-rt tr, .kl-rt th[scope="row"], .kl-rt td { display: block; width: 100%; }
    .kl-rt tr { border-bottom: 1px solid var(--border); padding: 10px 0; }
    .kl-rt th[scope="row"] { min-width: 0; border-bottom: none; padding-bottom: 2px; }
    .kl-rt td { border-bottom: none; padding-top: 2px; padding-bottom: 2px; }
    .kl-rt td::before { content: attr(data-titel) ': '; font-weight: 600; color: var(--text-primary); }
}
@media (max-width: 600px) {
    .kl-schritte, .kl-beispiele, .kl-bloecke-seite { grid-template-columns: minmax(0, 1fr); }
    
    .kl-schritt { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 16px 16px 16px; }
    .kl-schritt-symbol { width: 36px; height: 36px; margin: 2px 0 0; grid-row: 1 / span 2; }
    .kl-schritt-symbol .svg-einbettung, .kl-schritt-symbol svg { width: 36px; height: 36px; }
    .kl-schritt h3 { padding-right: 30px; }
    .kl-beispiele > :last-child:nth-child(odd), .kl-bloecke-seite > :last-child:nth-child(odd) { grid-column: auto; }
    .kl-chip span { padding: 8px 12px; font-size: 0.88rem; }
}
@media (prefers-reduced-motion: reduce) {
    .js .kl-skizze-kosten .kl-mk, .js .kl-skizze-kosten.visible .kl-mk { opacity: 1; animation: none; }
    .kl-schritt:hover { transform: none; }
}
@media print {
    .kl-ergebnis { position: static; }
    .js .kl-skizze-kosten .kl-mk, .js .kl-skizze-kosten.visible .kl-mk { opacity: 1; animation: none; }
}
.kl-z .kl-roh-orange { stroke: var(--orange); }