/* site.css - vom Bau erzeugt fuer drehteile-online-bestellen.de (Hero-Buehne, CTA-Motiv). Nicht von Hand aendern. */
:root, [data-theme="dark"] { --muster-bild: url('/bilder/raster-dunkel.svg'); }
[data-theme="light"] { --muster-bild: url('/bilder/raster-hell.svg'); }

/* Domaineigene Stile aus inhalt/drehteile-online-bestellen.de/stil.css */
.nb-sk { display: block; width: 100%; height: auto; font-family: 'DM Sans', system-ui, sans-serif; color: var(--text-primary); }
.nb-sk .box { fill: var(--bg-elevated); stroke: var(--text-secondary); stroke-width: 1.6; }
.nb-sk .box-ziel { stroke: var(--orange); stroke-width: 2.4; }
.nb-sk .kopf { fill: var(--orange-glow); stroke: none; }
.nb-sk .nr { fill: var(--orange-flaeche); }
.nb-sk .nrt { fill: #FFFFFF; font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 16px; font-weight: 700; }
.nb-sk .h { fill: none; stroke: var(--text-muted); stroke-width: 1; }
.nb-sk .pfeil { fill: none; stroke: var(--orange); stroke-width: 2.4; stroke-linecap: round; }
.nb-sk .pfeil-k { fill: var(--orange); stroke: var(--orange); stroke-width: 1; stroke-linejoin: round; }
.nb-sk .zone { fill: var(--orange-glow); stroke: var(--orange); stroke-width: 1.4; stroke-dasharray: 5 3; }
.nb-sk text { font-family: 'DM Sans', system-ui, sans-serif; }
.nb-sk .t { fill: var(--text-primary); font-size: 19px; }
.nb-sk .t2 { fill: var(--text-secondary); font-size: 16px; }
.nb-sk .t3 { fill: var(--text-muted); font-size: 15px; }
.nb-sk .tb { fill: var(--text-primary); font-size: 19px; font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; }
.nb-sk .tw { fill: var(--orange-text); font-size: 18px; font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; }
figure.nb-rahmen { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-m); overflow: hidden; background: var(--bg-card); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18); }
figure.nb-rahmen .svg-einbettung { display: block; padding: 18px 20px 8px; }
figure.nb-rahmen .svg-einbettung > svg { display: block; width: 100%; height: auto; }
figure.nb-rahmen figcaption { margin: 0; padding: 10px 14px; font-size: 0.8rem; line-height: 1.5; color: var(--text-secondary); border-top: 1px solid var(--border); background: var(--bg-card); }
[data-theme="light"] figure.nb-rahmen { box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08); }


.nb-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;
}
.nb-klein { font-size: 0.92rem; color: var(--text-secondary); margin-top: 12px; }
.nb-ohnejs { display: none; }
html:not(.js) .nb-ohnejs { display: block; }
html:not(.js) .nb-nurjs { display: none; }
.leistungen-text p + p, .fliesstext p + p { margin-top: 14px; }
.nb-liste { margin: 12px 0 4px; padding-left: 20px; color: var(--text-secondary); }
.nb-liste li { margin-bottom: 8px; }
.nb-liste strong { color: var(--text-primary); }


.nb-buehne { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-l); padding: 28px 28px 26px; }
.nb-buehne-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.nb-schritte { list-style: none; counter-reset: nbs; margin: 0; padding: 0; display: grid; gap: 16px; }
.nb-schritte > li { counter-increment: nbs; position: relative; padding-left: 52px; color: var(--text-secondary); }
.nb-schritte > li::before {
    content: counter(nbs); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
    background: var(--orange-flaeche); color: #FFFFFF; font-family: 'Space Grotesk', sans-serif; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.nb-schritte > li strong { display: block; color: var(--text-primary); }
.nb-buehne-knopf { margin-top: 20px; }


.nb-kopfzeile { color: var(--text-secondary); font-size: 0.95rem; max-width: 70ch; }
.nb-stamm { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 16px; }
.nb-pos { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 14px 16px 4px; margin-bottom: 14px; }
.nb-pos-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.nb-pos-kopf strong { font-family: 'Space Grotesk', sans-serif; color: var(--text-primary); }
.nb-pos-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.nb-f-aend { grid-column: 1 / -1; }
.nb-zahlzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 4px 0 6px; }
.nb-zahl { font-size: 0.85rem; color: var(--text-secondary); }
.nb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 16px; }
.nb-chip {
    appearance: none; background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-hover);
    border-radius: 999px; padding: 8px 16px; min-height: 40px; font: inherit; font-size: 0.88rem; cursor: pointer;
}
.nb-chip:hover { border-color: var(--orange); color: var(--orange-text); }
.nb-chip-leer { background: transparent; color: var(--text-secondary); }
.nb-status { font-weight: 600; margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radius-m); border-left: 4px solid var(--text-muted); background: var(--bg-card); }
.nb-status-ok { border-left-color: var(--erfolg); }
.nb-status-fehler { border-left-color: var(--fehler); }
.nb-meldungen-titel { font-size: 0.95rem; margin: 16px 0 6px; }
.nb-meldungen { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nb-meldungen li { padding: 8px 12px; border-radius: var(--radius-s); background: var(--bg-card); border-left: 3px solid var(--text-muted); font-size: 0.92rem; color: var(--text-secondary); }
.nb-fehler li { border-left-color: var(--fehler); }
.nb-hinweise li { border-left-color: var(--warnung); }
.nb-infos li { border-left-color: var(--orange); }
.nb-kennung { display: inline-block; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.78rem; color: var(--text-primary); margin-right: 4px; }
.nb-leer { color: var(--text-secondary); font-size: 0.93rem; }
#nb-text { margin-top: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }


.nb-beispiele { display: grid; gap: 24px; }
.nb-beispiel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-l); padding: 22px 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 32px; align-items: start; }
.nb-beispiel h3 { font-size: 1.12rem; margin-bottom: 8px; }
.nb-beispiel p { color: var(--text-secondary); font-size: 0.95rem; }
.nb-beispiel pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.nb-beispiel-ergebnis { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.nb-beispiel-ergebnis strong { font-family: 'Space Grotesk', system-ui, sans-serif; color: var(--text-primary); }


.nb-formular-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.nb-gruppe { border: 1px solid var(--border); border-radius: var(--radius-m); padding: 16px 18px 6px; margin: 0 0 20px; min-width: 0; }
.nb-gruppe > legend { font-family: 'Space Grotesk', sans-serif; font-weight: 600; padding: 0 8px; color: var(--text-primary); }
.nb-pflicht { color: var(--orange-text); }
.nb-meldung { border-left: 4px solid var(--fehler); background: rgba(239, 68, 68, 0.1); border-radius: var(--radius-m); padding: 14px 18px; margin: 0 0 18px; font-size: 0.95rem; }
.nb-meldung ul { margin: 6px 0 0; padding-left: 20px; }
.nb-meldung[hidden] { display: none; }
.nb-hilfe { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 18px 20px; }
.nb-hilfe-titel { font-family: 'Space Grotesk', sans-serif; font-weight: 600; color: var(--text-primary); margin: 0 0 8px; }
.nb-hilfe p, .nb-hilfe li { font-size: 0.92rem; color: var(--text-secondary); }
.nb-hilfe-block + .nb-hilfe-block { margin-top: 18px; }
.nb-vertrag { margin: 8px 0 18px; padding: 12px 16px; border-left: 4px solid var(--orange); background: var(--orange-glow); border-radius: var(--radius-s); font-size: 0.93rem; }

@media (min-width: 760px) {
    .nb-stamm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nb-beispiel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1000px) {
    .nb-buehne-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
    .nb-formular-raster { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 420px) {
    .nb-pos-raster { grid-template-columns: minmax(0, 1fr); }
    .nb-buehne, .nb-beispiel { padding: 18px 16px; }
    figure.nb-rahmen .svg-einbettung { padding: 12px 10px 6px; }
}


@media print {
    body.druck-ergebnis .nb-werkzeug .werkzeug-eingaben, body.druck-ergebnis .nb-werkzeug .werkzeug-kopf p, body.druck-ergebnis .nb-werkzeug .nb-chips { display: none; }
    body.druck-ergebnis .nb-werkzeug .werkzeug-raster { display: block; }
    body.druck-ergebnis .nb-werkzeug .werkzeug-ergebnis { border: 0; padding: 0; }
}