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

/* Domaineigene Stile aus inhalt/aluminium-fraesteile.de/stil.css */
.az {
    --az-m1: #e4e8ee; --az-m2: #c3c9d1; --az-m3: #969ea9; --az-kante: #d9dde3; --az-schraffur: rgba(20, 22, 26, 0.34);
    --az-luecke: #0b0c0e; --az-pulver: #4a4e57; --az-pulver-kante: #2c2f35; --az-oxid: #b9c7cf; --az-schraube: #6f7682;
    --az-text: var(--text-secondary); --az-text-stark: var(--text-primary);
    display: block; width: 100%; height: auto;
    font-family: 'DM Sans', system-ui, sans-serif;
}
[data-theme="light"] .az {
    --az-m1: #f6f7f9; --az-m2: #dde1e6; --az-m3: #b4bcc6; --az-kante: #4c545e; --az-schraffur: rgba(40, 46, 54, 0.3);
    --az-luecke: #ffffff; --az-pulver: #4a4e57; --az-pulver-kante: #2c2f35; --az-oxid: #9fb1bc; --az-schraube: #8a919b;
}
.az .az-s1 { stop-color: var(--az-m1); }
.az .az-s2 { stop-color: var(--az-m2); }
.az .az-s3 { stop-color: var(--az-m3); }
.az .az-schraffur-linie { stroke: var(--az-schraffur); stroke-width: 1.1; }
.az .az-span-linie { stroke: var(--orange); stroke-width: 1.2; opacity: 0.55; }
.az .az-pfeilspitze { fill: var(--text-secondary); }
.az .az-pfeilspitze-o { fill: var(--orange); }
.az .az-metall { stroke: none; }
.az .az-schnitt { stroke: none; }
.az .az-kontur { fill: none; stroke: var(--az-kante); stroke-width: 1.4; stroke-linejoin: round; }
.az .az-kontur-fein { fill: none; stroke: var(--az-kante); stroke-width: 0.9; }
.az .az-roh { fill: none; stroke: var(--text-muted); stroke-width: 1.2; stroke-dasharray: 6 4; }
.az .az-roh-linie { stroke: var(--text-muted); stroke-width: 1.4; stroke-dasharray: 6 4; }
.az .az-span-flaeche { fill: var(--orange); opacity: 0.22; stroke: none; }
.az .az-span-muster { stroke: none; }
.az .az-luecke { fill: var(--bg-card); stroke: none; }
.az .az-tasche { fill: var(--bg-card); stroke: none; }
.az .az-zahn { fill: var(--az-m3); stroke: var(--az-kante); stroke-width: 0.6; }
.az .az-einsatz { fill: var(--orange); stroke: var(--orange-dark); stroke-width: 0.6; }
.az .az-schraube { fill: var(--az-schraube); opacity: 0.55; stroke: var(--az-kante); stroke-width: 0.8; }
.az .az-text { fill: var(--az-text); font-size: 13.5px; }
.az .az-text-klein { fill: var(--text-muted); font-size: 12px; }
.az .az-text-stark { fill: var(--az-text-stark); font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: 14px; }
.az .az-text-orange { fill: var(--orange-text); font-size: 13.5px; font-weight: 600; }
.az .az-text-halo { paint-order: stroke; stroke: var(--bg-card); stroke-width: 4px; stroke-linejoin: round; }
.az .az-trenner { stroke: var(--border); stroke-width: 1; }
.az .az-text-metall { fill: #2b3037; font-weight: 600; }   
.az .az-fuehrung { stroke: var(--text-muted); stroke-width: 1; fill: none; }
.az .az-fuehrung-punkt { fill: var(--text-secondary); }
.az .az-mass, .az .az-mass-o { stroke: var(--text-secondary); stroke-width: 1.1; fill: none; }
.az .az-mass-o { stroke: var(--orange); stroke-width: 1.6; }
.az .az-hilfslinie { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 4 4; fill: none; }
.az .az-spannung { stroke: var(--orange); stroke-width: 1.8; }
.az .az-spannung-zug { stroke: var(--text-secondary); stroke-width: 1.8; }
.az .az-vakuum { fill: none; stroke: var(--text-muted); stroke-width: 1.2; stroke-dasharray: 2 5; stroke-linecap: round; }
.az .az-bahn { fill: none; stroke: var(--bg-card); stroke-width: 7; }
.az .az-teil { fill: none; stroke: var(--az-kante); stroke-width: 1.3; }
.az .az-steg { fill: var(--orange); stroke: none; }
.az .az-durchbruch { fill: var(--bg-card); stroke: var(--az-kante); stroke-width: 1; }
.az .az-senkung { fill: var(--az-m3); stroke: var(--az-kante); stroke-width: 0.8; }
.az .az-feld { fill: none; stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.az .az-fraeser { fill: var(--orange-glow); stroke: var(--orange); stroke-width: 2; }
.az .az-pulver { fill: var(--az-pulver); stroke: var(--az-pulver-kante); stroke-width: 0.8; }
.az .az-vorbehandlung { fill: var(--orange); opacity: 0.85; stroke: none; }
.az .az-abdeckung { fill: none; stroke: var(--orange); stroke-width: 1.4; stroke-dasharray: 5 3; }
.az .az-oxid { fill: var(--az-oxid); opacity: 0.9; stroke: var(--az-kante); stroke-width: 0.6; }
.az .az-ursprung { stroke: var(--orange); stroke-width: 1.6; stroke-dasharray: 6 4; }
.az .az-ursprung-kreis { fill: none; stroke: var(--orange); stroke-width: 1.4; stroke-dasharray: 5 4; }
.az .az-schicht-ring { fill: var(--az-pulver); stroke: var(--az-pulver-kante); stroke-width: 0.8; }
.az .az-achse { stroke: var(--text-muted); stroke-width: 1.2; }
.az .az-verlauf { fill: none; stroke: var(--orange); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.az .az-balken { fill: var(--orange); }
.az .az-balken-stange { fill: var(--orange); opacity: 0.55; }
.az .az-ziel { stroke: var(--text-muted); stroke-width: 1.2; stroke-dasharray: 4 4; }


figure.al-rahmen { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-l); overflow: hidden; background: var(--bg-card); box-shadow: var(--schatten-karte); }
figure.al-rahmen .svg-einbettung { padding: 18px 18px 12px; }
figure.al-rahmen .svg-einbettung > svg { display: block; width: 100%; height: auto; }
figure.al-rahmen figcaption { margin: 0; padding: 11px 16px; font-size: 0.8rem; line-height: 1.5; color: var(--text-secondary); border-top: 1px solid var(--border); background: var(--bg-card); }
figure.al-rahmen.al-schmal .svg-einbettung > svg { max-width: 460px; margin: 0 auto; }

figure.al-rahmen .svg-einbettung > svg.az-halbzeug { max-width: 420px; margin: 0 auto; }
@media (max-width: 560px) {
    .az-halbzeug .az-text, .az-halbzeug .az-text-orange { font-size: 15.5px; }
    .az-halbzeug .az-text-stark { font-size: 17px; }
    .az-halbzeug .az-text-klein { font-size: 14px; }
}
@media (max-width: 560px) { figure.al-rahmen .svg-einbettung { padding: 12px 10px 8px; } }


.hero-buehne::after, .hero-bild-flaeche::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-repeat: no-repeat; background-size: inherit; background-position: inherit;
    clip-path: inset(0 0 0 0);
    animation: al-wisch 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.6s both;
}
.hero-buehne::after {
    background-image: url('/bilder/alu-deckel-blank-dunkel-1200.webp');
    background-image: -webkit-image-set(url('/bilder/alu-deckel-blank-dunkel-1200.webp') 1x, url('/bilder/alu-deckel-blank-dunkel-2400.webp') 2x);
    background-image: image-set(url('/bilder/alu-deckel-blank-dunkel-1200.webp') 1x, url('/bilder/alu-deckel-blank-dunkel-2400.webp') 2x);
}
[data-theme="light"] .hero-buehne::after {
    background-image: url('/bilder/alu-deckel-blank-hell-1200.webp');
    background-image: -webkit-image-set(url('/bilder/alu-deckel-blank-hell-1200.webp') 1x, url('/bilder/alu-deckel-blank-hell-2400.webp') 2x);
    background-image: image-set(url('/bilder/alu-deckel-blank-hell-1200.webp') 1x, url('/bilder/alu-deckel-blank-hell-2400.webp') 2x);
}
@media (min-width: 1300px) {
    .hero-buehne::after {
        background-image: url('/bilder/alu-deckel-blank-dunkel-1920.webp');
        background-image: -webkit-image-set(url('/bilder/alu-deckel-blank-dunkel-1920.webp') 1x, url('/bilder/alu-deckel-blank-dunkel-2400.webp') 2x);
        background-image: image-set(url('/bilder/alu-deckel-blank-dunkel-1920.webp') 1x, url('/bilder/alu-deckel-blank-dunkel-2400.webp') 2x);
    }
    [data-theme="light"] .hero-buehne::after {
        background-image: url('/bilder/alu-deckel-blank-hell-1920.webp');
        background-image: -webkit-image-set(url('/bilder/alu-deckel-blank-hell-1920.webp') 1x, url('/bilder/alu-deckel-blank-hell-2400.webp') 2x);
        background-image: image-set(url('/bilder/alu-deckel-blank-hell-1920.webp') 1x, url('/bilder/alu-deckel-blank-hell-2400.webp') 2x);
    }
}
@media (max-width: 1024px) {
    .hero-bild-flaeche { position: relative; }
    .hero-bild-flaeche::after {
        background-image: url('/bilder/alu-deckel-blank-dunkel-1200.webp');
        background-image: -webkit-image-set(url('/bilder/alu-deckel-blank-dunkel-1200.webp') 1x, url('/bilder/alu-deckel-blank-dunkel-2400.webp') 2x);
        background-image: image-set(url('/bilder/alu-deckel-blank-dunkel-1200.webp') 1x, url('/bilder/alu-deckel-blank-dunkel-2400.webp') 2x);
    }
    [data-theme="light"] .hero-bild-flaeche::after {
        background-image: url('/bilder/alu-deckel-blank-hell-1200.webp');
        background-image: -webkit-image-set(url('/bilder/alu-deckel-blank-hell-1200.webp') 1x, url('/bilder/alu-deckel-blank-hell-2400.webp') 2x);
        background-image: image-set(url('/bilder/alu-deckel-blank-hell-1200.webp') 1x, url('/bilder/alu-deckel-blank-hell-2400.webp') 2x);
    }
}
@media (max-width: 600px) {
    .hero-bild-flaeche::after { background-image: url('/bilder/alu-deckel-blank-dunkel-mobil-800.webp'); }
    [data-theme="light"] .hero-bild-flaeche::after { background-image: url('/bilder/alu-deckel-blank-hell-mobil-800.webp'); }
}
@keyframes al-wisch { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }
@media (prefers-reduced-motion: reduce) {
    .hero-buehne::after, .hero-bild-flaeche::after { display: none; animation: none; }
}

@media (min-width: 1025px) {
    .hero-schleier {
        background:
            linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.78) 34%, rgba(0, 0, 0, 0.3) 56%, rgba(0, 0, 0, 0) 74%),
            linear-gradient(180deg, rgba(0, 0, 0, 0) 74%, var(--bg-primary) 100%);
    }
    [data-theme="light"] .hero-schleier {
        background:
            linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.86) 34%, rgba(255, 255, 255, 0.34) 56%, rgba(255, 255, 255, 0) 74%),
            linear-gradient(180deg, rgba(255, 255, 255, 0) 74%, var(--bg-primary) 100%);
    }
}


.al-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); margin-bottom: 10px;
    border-left: 3px solid var(--orange); padding-left: 10px;
}
.al-klein { font-size: 0.92rem; color: var(--text-secondary); margin-top: 12px; }
.al-nurjs { display: none; }
.js .al-nurjs { display: block; }
.js .al-ohnejs { display: none; }
.al-h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 18px; }
.al-text p { color: var(--text-secondary); }
.al-text p + p { margin-top: 14px; }
.al-text strong { color: var(--text-primary); }
.al-text a, .al-karte a, .al-klein a { text-decoration: underline; text-decoration-color: rgba(232, 114, 12, 0.45); text-underline-offset: 3px; }
.al-zweispaltig { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 48px; align-items: center; }
.al-zweispaltig.oben { align-items: start; }
.al-zweispaltig.umgekehrt > :first-child { order: 2; }
@media (max-width: 1024px) {
    .al-zweispaltig { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .al-zweispaltig.umgekehrt > :first-child { order: 0; }
}
.al-absender { margin-top: 26px; }
.al-absender p { font-size: 0.95rem; }
.al-quelle-zeile { font-size: 0.8rem; color: var(--text-muted); margin-top: 10px; }
.al-quelle-zeile a { color: var(--text-secondary); text-decoration: underline; }
.al-merk {
    background: var(--bg-card); border: 1px solid var(--border); border-left: 4px solid var(--orange); border-radius: var(--radius-m);
    padding: 16px 18px; margin: 20px 0; color: var(--text-secondary);
}
.al-merk strong { color: var(--text-primary); }
.al-liste { list-style: none; display: grid; gap: 10px; padding: 0; margin: 16px 0; }
.al-liste li { position: relative; padding-left: 22px; color: var(--text-secondary); }
.al-liste li::before { content: ''; position: absolute; left: 2px; top: 0.72em; width: 10px; height: 2px; background: var(--orange); }
.al-liste strong { color: var(--text-primary); }


.al-buehne { background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-elevated) 100%); box-shadow: var(--schatten-karte); }
.al-buehne-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.al-buehne-text h2 { font-size: clamp(1.45rem, 3vw, 2.05rem); margin-bottom: 14px; }
.al-buehne-knopf { margin-top: 22px; }
.al-wahl { border: 0; min-width: 0; margin: 0 0 18px; padding: 0; }
.al-wahl legend { margin-bottom: 8px; }
.al-chipreihe { display: flex; flex-wrap: wrap; gap: 8px; }
.al-chip-radio { position: relative; display: inline-flex; cursor: pointer; }
.al-chip-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.al-chip-radio span {
    display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid var(--border-hover); border-radius: 999px;
    background: var(--bg-primary); color: var(--text-primary); font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 0.88rem;
    line-height: 1.25; transition: border-color 0.2s, background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.al-chip-radio:hover span { border-color: var(--orange-text); }
.al-chip-radio input:checked + span { background: var(--orange-flaeche); border-color: var(--orange-flaeche); color: #ffffff; box-shadow: 0 6px 20px rgba(232, 114, 12, 0.25); }
.al-chip-radio input:focus-visible + span { outline: 2px solid var(--orange-text); outline-offset: 3px; }
.al-chip-radio input:disabled + span { opacity: 0.45; cursor: not-allowed; }
.al-b-vorschau {
    margin: 4px 0 0; padding: 16px; border: 1px solid rgba(232, 114, 12, 0.35); border-radius: var(--radius-m); background: var(--orange-glow);
    min-height: 208px;
}
.al-b-kopf { display: block; font-size: 0.86rem; color: var(--text-secondary); margin-bottom: 12px; }
.al-b-aus, .al-b-leer { display: block; font-size: 0.84rem; color: var(--text-muted); margin-top: 12px; }
.al-kacheln { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0; margin: 0; }

.al-kachel {
    min-width: 0; aspect-ratio: 1 / 0.82; display: grid; justify-items: center; text-align: center;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto auto auto minmax(0, 1fr);
    grid-template-areas: "rang . zustand" ". . ." "vor vor vor" "nr nr nr" "kurz kurz kurz" ". . .";
    padding: 10px 10px 12px; border: 1px solid var(--border-hover); border-radius: var(--radius-l); background: var(--bg-primary);
}
.al-kachel:first-child { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange), 0 12px 30px rgba(232, 114, 12, 0.18); }
.al-kachel-rang { grid-area: rang; justify-self: start; align-self: center; padding-left: 2px; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.85rem; line-height: 1; color: var(--orange-text); }
.al-kachel-zustand {
    grid-area: zustand; justify-self: end; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 0.72rem; line-height: 1.5; color: var(--text-secondary);
    border: 1px solid var(--border-hover); border-radius: 999px; padding: 1px 8px; white-space: nowrap;
}
.al-kachel-vor { grid-area: vor; margin-top: 8px; font-size: 0.72rem; color: var(--text-muted); letter-spacing: 1px; }
.al-kachel-nr { grid-area: nr; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(1.9rem, 4vw, 2.5rem); line-height: 1.05; color: var(--text-primary); }
.al-kachel-kurz { grid-area: kurz; max-width: 100%; font-size: 0.8rem; color: var(--text-secondary); margin-top: 4px; overflow-wrap: anywhere; }
@media (max-width: 1024px) { .al-buehne-raster { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
@media (max-width: 420px) { .al-kachel-nr { font-size: 1.7rem; } .al-b-vorschau { min-height: 0; } }

@media (max-width: 380px) {
    .al-buehne { padding: 20px 16px; }
    .al-b-vorschau { padding: 12px; }
    .al-kacheln { gap: 8px; }
    .al-kachel { padding: 8px 6px 10px; }
    .al-kachel-nr { font-size: 1.45rem; white-space: nowrap; }
    .al-kachel-kurz { font-size: 0.74rem; }
}


.al-halbzeug-bild { min-width: 0; }
.al-vergleich { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-elevated); border-radius: var(--radius-l) var(--radius-l) 0 0; }
.al-vergleich picture, .al-vergleich img { display: block; width: 100%; height: 100%; }
figure.rendering .al-vergleich img { border: 0; border-radius: 0; object-fit: cover; }
.al-vergleich-pulver { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--al-schnitt, 50%)) 0 0); }
.al-vergleich-linie {
    position: absolute; top: 0; bottom: 0; left: var(--al-schnitt, 50%); width: 2px; margin-left: -1px;
    background: var(--orange); box-shadow: 0 0 12px rgba(232, 114, 12, 0.6); pointer-events: none;
}
.al-vergleich-marke {
    position: absolute; top: 12px; padding: 3px 10px; border-radius: 999px; font-family: 'Space Grotesk', sans-serif; font-weight: 600;
    font-size: 0.74rem; background: var(--blick-bg); color: var(--text-primary); border: 1px solid var(--glass-border); pointer-events: none;
}
.al-vergleich-marke.links { left: 12px; }
.al-vergleich-marke.rechts { right: 12px; }
figure.al-schieber { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-l); background: var(--bg-card); box-shadow: var(--schatten-karte); overflow: hidden; }
.al-schieber-bedienung { padding: 14px 18px 4px; }
.js .al-schieber-bedienung.al-nurjs { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; }
.al-schieber-bedienung .al-schieber-label { grid-column: 1 / -1; }
.al-schieber-label { font-size: 0.86rem; color: var(--text-secondary); font-weight: 500; }
.al-schieber-wert { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 0.86rem; color: var(--text-primary); min-width: 9.5em; text-align: right; }
.al-schieber input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--orange); background: transparent; cursor: pointer; }
.al-schieber input[type="range"]:focus-visible { outline: 2px solid var(--orange-text); outline-offset: 2px; border-radius: 4px; }
figure.al-schieber figcaption { padding: 10px 18px 14px; font-size: 0.8rem; color: var(--text-secondary); margin: 0; }
figure.al-schieber figcaption::before { display: none; }
@media (max-width: 560px) {
    .al-schieber-wert { min-width: 0; }
}


.al-werkzeug-abschnitt { padding-top: 28px; }
.al-kopfzeile { color: var(--text-secondary); font-size: 0.95rem; max-width: 640px; }
.al-vorlagen { margin-bottom: 20px; }
.al-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.al-chip {
    min-height: 44px; padding: 8px 14px; border: 1px solid var(--border-hover); border-radius: 999px; background: var(--bg-primary);
    color: var(--text-primary); font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 0.86rem; cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.al-chip:hover { border-color: var(--orange-text); color: var(--orange-text); }
.al-chip:focus-visible { outline: 2px solid var(--orange-text); outline-offset: 3px; }
.al-feld { border: 1px solid var(--border); border-radius: var(--radius-m); background: var(--bg-secondary); padding: 14px 16px 16px; margin: 0 0 14px; min-width: 0; }
.al-feld legend { padding: 0 6px; margin-left: -6px; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.95rem; color: var(--text-primary); }
.al-feld .al-chipreihe { margin-top: 4px; }
.al-feld .form-note { margin-top: 10px; }
.al-feld .form-group { margin: 14px 0 0; max-width: 260px; }
.al-feld .form-check + .form-check { margin-top: 10px; }
.al-ruhend .al-chip-radio span { opacity: 0.5; }
.al-feld-hinweis { font-size: 0.83rem; color: var(--text-muted); margin-top: 10px; }
.al-ergebnis { scroll-margin-top: 96px; }
.al-ergebnis h3 { font-size: 1.15rem; margin-bottom: 12px; }
.al-leer { color: var(--text-secondary); font-size: 0.93rem; }
.al-rangliste { list-style: none; display: grid; gap: 14px; padding: 0; margin: 0 0 14px; }
.al-karte { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 14px 16px 12px; min-width: 0; }
.al-karte:first-child { border-color: rgba(232, 114, 12, 0.55); box-shadow: 0 10px 30px rgba(232, 114, 12, 0.1); }
.al-karte-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.al-karte-rang { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.6rem; color: var(--orange-text); line-height: 1; }
.al-karte-name strong { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; color: var(--text-primary); }
.al-karte-name span { display: block; font-size: 0.82rem; color: var(--text-muted); }
.al-karte-summe { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.95rem; color: var(--text-primary); white-space: nowrap; }
.al-balken { height: 6px; border-radius: 3px; background: var(--bg-elevated); margin: 10px 0 8px; overflow: hidden; }
.al-balken-fuell { display: block; height: 100%; width: calc(var(--al-anteil, 0) * 100%); border-radius: 3px; background: linear-gradient(90deg, var(--orange-dark), var(--orange)); }
.al-karte-werte { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.86rem; color: var(--text-primary); }
.al-karte-werte span:last-child { color: var(--text-muted); }
.al-ziel-nein { font-size: 0.86rem; font-weight: 500; color: var(--text-primary); border-left: 3px solid var(--warnung); padding: 2px 0 2px 10px; margin: 8px 0 4px; }
.al-b-ziel { color: var(--text-secondary); border-left: 3px solid var(--warnung); padding-left: 10px; }
.al-karte-titel { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); margin: 12px 0 6px; font-weight: 600; }
.al-befunde { list-style: none; display: grid; gap: 8px; padding: 0; margin: 0; }
.al-befund { font-size: 0.88rem; color: var(--text-secondary); display: grid; gap: 2px; }
.al-befund-text { color: var(--text-primary); }
.al-allgemein { margin: 12px 0; }
.al-allgemein .al-befund { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-s); padding: 10px 12px; }
.al-stufe { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.al-stufe-symbol { flex-shrink: 0; }
.al-sy-voll { fill: var(--text-secondary); stroke: var(--text-secondary); stroke-width: 1.6; }
.al-sy-leer { fill: none; stroke: var(--text-secondary); stroke-width: 1.6; }
.al-sy-halb { fill: var(--text-secondary); }
.al-sy-orange { fill: var(--orange); }
.al-quelle { display: block; font-size: 0.76rem; color: var(--text-muted); }
.al-werkstoffsatz { font-size: 0.92rem; color: var(--text-secondary); background: var(--orange-glow); border-radius: var(--radius-s); padding: 10px 12px; margin: 4px 0 12px; }
.al-werkstoffsatz strong { color: var(--text-primary); }
details.al-ausgeschlossen { border: 1px solid var(--border); border-radius: var(--radius-s); margin: 10px 0; background: var(--bg-primary); }
details.al-ausgeschlossen summary { cursor: pointer; padding: 10px 14px; font-size: 0.88rem; color: var(--text-secondary); min-height: 44px; display: flex; align-items: center; }
details.al-ausgeschlossen summary:focus-visible { outline: 2px solid var(--orange-text); outline-offset: 2px; }
.al-aus-liste { list-style: none; display: grid; gap: 8px; padding: 0 14px 12px; margin: 0; font-size: 0.86rem; color: var(--text-secondary); }
.al-aus-liste strong { color: var(--text-primary); }
.al-warnung p { margin: 0; }
.al-warnung .al-quelle { margin-top: 4px; }
.al-oberflaeche { font-size: 0.9rem; color: var(--text-secondary); border-left: 3px solid var(--orange); padding: 2px 0 2px 12px; margin: 12px 0; }
.al-oberflaeche a { text-decoration: underline; }
.al-ergebnis .anfrage-baustein { margin-top: 16px; }
.al-stufen { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0; margin: 18px 0 0; }
.al-stufen li { color: var(--text-secondary); font-size: 0.9rem; padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-m); }
.al-stufen .al-stufe { color: var(--text-primary); margin-right: 6px; font-size: 0.8rem; }
@media (max-width: 560px) { .al-stufen { grid-template-columns: minmax(0, 1fr); } .al-karte-kopf { grid-template-columns: auto minmax(0, 1fr); } .al-karte-summe { grid-column: 2; } }


.al-beispiele { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.al-beispiel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-l); padding: 20px 20px 22px; display: flex; flex-direction: column; min-width: 0; }
.al-beispiel h3 { font-size: 1.08rem; margin-bottom: 10px; }
.al-beispiel-vorgaben { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; font-size: 0.86rem; margin: 0 0 14px; }
.al-beispiel-vorgaben dt { color: var(--text-muted); }
.al-beispiel-vorgaben dd { color: var(--text-primary); margin: 0; }
.al-beispiel .al-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.al-beispiel .al-kachel {
    aspect-ratio: auto; padding: 8px 6px 10px; grid-template-rows: auto auto auto auto;
    grid-template-areas: "rang . ." "vor vor vor" "nr nr nr" "zustand zustand zustand";
}
.al-beispiel .al-kachel-rang { padding-left: 4px; }
.al-beispiel .al-kachel-vor { margin-top: 0; }
.al-beispiel .al-kachel-nr { font-size: 1.35rem; }
.al-beispiel .al-kachel-zustand { justify-self: center; margin-top: 6px; }
.al-beispiel .al-kachel-kurz { display: none; }
.al-rechenweg { font-size: 0.88rem; color: var(--text-secondary); padding-top: 12px; border-top: 1px dashed var(--border-hover); }
.al-rechenweg + .al-rechenweg { border-top: 0; padding-top: 6px; }
@media (max-width: 1024px) { .al-beispiele { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .al-beispiele { grid-template-columns: minmax(0, 1fr); } }


.al-tabelle-block { margin-top: 26px; }
.al-tabelle-block h3 { font-size: 1.1rem; margin-bottom: 4px; }
table.tabelle.al-tabelle td.al-quelle-zelle, table.tabelle.al-tabelle th.al-quelle-zelle { font-size: 0.78rem; color: var(--text-muted); min-width: 160px; }
table.tabelle.al-tabelle tbody th { white-space: nowrap; }
table.tabelle.al-tabelle .al-ja { color: var(--text-primary); }
table.tabelle.al-tabelle .al-nein { color: var(--text-muted); }
.al-tabelle-fuss { font-size: 0.8rem; color: var(--text-muted); margin-top: -6px; }


.al-profile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.al-profil { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-l); padding: 18px 20px 20px; min-width: 0; transition: border-color 0.3s, transform 0.3s; }
.al-profil:hover { border-color: rgba(232, 114, 12, 0.45); transform: translateY(-2px); }
.al-profil-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.al-profil-kopf h3 { font-size: 1.12rem; margin: 0; }
.al-profil-kopf span { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }
.al-profil p { font-size: 0.92rem; color: var(--text-secondary); }
@media (max-width: 1024px) { .al-profile { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .al-profile { grid-template-columns: minmax(0, 1fr); } }


.al-zustaende { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 16px; margin: 16px 0; }
.al-zustaende dt { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: var(--orange-text); font-size: 1.02rem; }
.al-zustaende dd { margin: 0; color: var(--text-secondary); font-size: 0.94rem; }


.al-regeln-gruppe { margin-top: 22px; }
.al-regeln-gruppe h3 { font-size: 1.05rem; margin-bottom: 6px; }
.al-quellenliste { list-style: none; display: grid; gap: 8px; padding: 0; margin: 14px 0 0; font-size: 0.84rem; color: var(--text-secondary); }
.al-quellenliste li { padding-left: 14px; border-left: 3px solid var(--border-hover); overflow-wrap: anywhere; }
.al-quellenliste code { font-family: 'Space Grotesk', sans-serif; font-size: 0.8rem; color: var(--text-primary); }
.al-quellenliste a { color: var(--text-secondary); text-decoration: underline; }


.al-abschnitt-bild { display: grid; gap: 20px; min-width: 0; }
.al-kanten { width: 100%; }
.al-gewinde-tabelle { max-width: 520px; }


@media print {
    body.druck-ergebnis .al-feld, body.druck-ergebnis .al-vorlagen, body.druck-ergebnis .al-ohnejs, body.druck-ergebnis .al-kopfzeile { display: none; }
    .al-karte, .al-beispiel, .al-profil { break-inside: avoid; }
    .hero-buehne::after, .hero-bild-flaeche::after { display: none; }
}