/* f3dprint - neue Bausteine (Spulen, Farbwahl, Banner, Newsletter, Hilfe, Projektfilter). Wird nach theme.css geladen. */

/* ------------------------------------------------------------------ Filament-Spule (SVG von vorn)
   Nabenfarbe passt sich dem Design an: --spool-hub (hell: weiß, dunkel: Kartenfarbe) */
:root { --spool-hub: #ffffff; --spool-core: #e2e8f0; --spool-line: rgba(15, 23, 42, .16); }
html[data-theme="dark"] { --spool-hub: #111a2e; --spool-core: #475569; --spool-line: rgba(255, 255, 255, .34); }
.f3d-spool { display: block; flex: 0 0 auto; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 2px 3px rgba(15, 23, 42, .18)); }
.f3d-spool .sp-body { stroke: var(--spool-line); stroke-width: 1; }
.f3d-spool .sp-core { fill: var(--spool-core); stroke: var(--spool-line); stroke-width: 1; }
.f3d-spool .sp-hub { fill: var(--spool-hub); stroke: var(--spool-line); stroke-width: 1; }

/* Farbwahl im Konfigurator: Spule + Name + ggf. Aufpreis */
#color-grid [data-color] { padding-top: .55rem; padding-bottom: .5rem; gap: .1rem; }
#color-grid .sp-wrap { width: 2.1rem; height: 2.1rem; margin-bottom: .2rem; transition: transform .18s ease; }
@media (max-width: 480px) { #color-grid .sp-wrap { width: 1.9rem; height: 1.9rem; } }
#color-grid [data-color]:hover .sp-wrap { transform: rotate(-12deg) scale(1.06); }
.color-sur { display: block; margin-top: .15rem; padding: .05rem .45rem; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 12px; line-height: 1.35; font-weight: 800; letter-spacing: .01em; }
html[data-theme="dark"] .color-sur { background: #3a2b10; color: #fcd34d; }

/* ------------------------------------------------------------------ Materialien: Farbwelt und Karten */
.cw-h { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #334155; margin: 0 0 .85rem; }
.cw-h span { margin-left: .5rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: #64748b; font-size: .85rem; }
html[data-theme="dark"] .cw-h { color: #e2e8f0; } html[data-theme="dark"] .cw-h span { color: #94a3b8; }
.cw-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.cw-chip { display: flex; flex-direction: column; align-items: center; gap: .15rem; width: 5.6rem; padding: .8rem .35rem .65rem; border-radius: 20px; border: 1px solid #e2e8f0; background: #fff; cursor: pointer; transition: border-color .18s, box-shadow .18s, transform .18s; font: inherit; color: #1e293b; }
.cw-chip:hover { border-color: #a5b4fc; transform: translateY(-2px); box-shadow: 0 12px 26px -16px rgba(79, 70, 229, .5); }
.cw-chip:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.cw-chip.is-on { border-color: #4f46e5; box-shadow: 0 0 0 2px #4f46e5 inset; }
.cw-spool { width: 3.1rem; height: 3.1rem; display: block; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.cw-chip:hover .cw-spool, .cw-chip.is-on .cw-spool { transform: rotate(-24deg); }
.cw-name { font-size: .85rem; font-weight: 700; line-height: 1.2; }
html[data-theme="dark"] .cw-chip { background: #111a2e; border-color: #263353; color: #e2e8f0; }
html[data-theme="dark"] .cw-chip.is-on { border-color: #818cf8; box-shadow: 0 0 0 2px #818cf8 inset; }
.mat-card { transition: opacity .25s, border-color .25s, box-shadow .25s, transform .25s; }
.mat-card.is-dim { opacity: .38; }
.mat-card.is-hit { border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99, 102, 241, .45), 0 18px 40px -22px rgba(79, 70, 229, .5); }
.mat-extra { margin: 0 0 1.25rem; }
.mat-spools { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .8rem; }
.mat-spool { width: 1.9rem; height: 1.9rem; display: block; border-radius: 50%; transition: transform .2s; }
.mat-spool .ms-ico { display: block; width: 100%; height: 100%; }
.mat-spool.is-sel { transform: scale(1.22); }
.mat-spool.is-sel .f3d-spool { filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 3px #6366f1); }
.mat-meta { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; line-height: 1.45; color: #475569; }
.mat-meta b { color: #0f172a; font-weight: 700; }
html[data-theme="dark"] .mat-meta { color: #94a3b8; } html[data-theme="dark"] .mat-meta b { color: #e2e8f0; }
@media (max-width: 480px) { .cw-chip { width: calc(33.333% - .5rem); min-width: 5.2rem; } .cw-row { gap: .6rem; } }

.mat-cta { background: linear-gradient(135deg, #eef2ff, #fff 60%) !important; }
html[data-theme="dark"] .mat-cta { background: linear-gradient(135deg, #1a2350, #111a2e 65%) !important; }
.mat-cta:hover { transform: none; }
#color-grid [data-color] { justify-content: flex-start; }

/* ------------------------------------------------------------------ Projekte: Werkzeugleiste, Karten (gerade Linien über alle Karten einer Reihe) */
.pj-bar { display: flex; flex-wrap: wrap; gap: .85rem 1rem; align-items: flex-end; justify-content: space-between; margin-bottom: 1rem; }
.pj-search { position: relative; flex: 1 1 16rem; max-width: 27rem; display: block; }
.pj-search svg { position: absolute; left: 1.05rem; top: 50%; width: 1.1rem; height: 1.1rem; transform: translateY(-50%); color: #94a3b8; pointer-events: none; }
.pj-search input { width: 100%; height: 2.9rem; padding: 0 1rem 0 2.8rem; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; font: inherit; font-size: 1rem; font-weight: 500; color: #0f172a; outline: none; -webkit-appearance: none; appearance: none; transition: border-color .15s, box-shadow .15s; }
.pj-search input::placeholder { color: #94a3b8; }
.pj-search input:focus, .pj-sel select:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .18); }
.pj-selects { display: flex; flex-wrap: wrap; gap: .75rem; }
.pj-sel { display: flex; flex-direction: column; gap: .25rem; font-size: .75rem; font-weight: 700; letter-spacing: .02em; color: #64748b; }
.pj-sel select { height: 2.9rem; min-width: 10.5rem; padding: 0 2.3rem 0 1.05rem; border: 1px solid #e2e8f0; border-radius: 999px; font: inherit; font-size: 1rem; font-weight: 600; color: #0f172a; cursor: pointer; outline: none; -webkit-appearance: none; appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .85rem center / 1rem; transition: border-color .15s, box-shadow .15s; }
.pj-chips { display: flex; gap: .5rem; overflow-x: auto; padding: .15rem 0 .55rem; margin-bottom: .1rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pj-chips::-webkit-scrollbar { display: none; }
.pj-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .2rem; min-height: 2.5rem; padding: 0 1rem; border-radius: 999px; border: 1px solid #e2e8f0; background: #fff; color: #334155; font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s, color .15s; }
.pj-chip i { font-style: normal; font-weight: 700; font-size: .78rem; color: #64748b; margin-left: .15rem; padding: .05rem .45rem; border-radius: 999px; background: #f1f5f9; }
.pj-chip:hover { border-color: #a5b4fc; }
.pj-chip:focus-visible, .pj-btn:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.pj-chip.is-on { background: #0f172a; border-color: #0f172a; color: #fff; }
.pj-chip.is-on i { background: rgba(255, 255, 255, .16); color: #fff; }
.pj-meta { display: flex; align-items: center; justify-content: space-between; min-height: 2rem; margin: .25rem 0 1.1rem; font-size: .85rem; font-weight: 600; color: #64748b; }
.pj-reset { border: 0; background: none; padding: .3rem .1rem; font: inherit; font-size: .85rem; font-weight: 700; color: #4f46e5; cursor: pointer; }
.pj-reset:hover { text-decoration: underline; }
.pj-reset[hidden], .pj-card[hidden], .pj-empty[hidden] { display: none !important; }

.pj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); column-gap: 1.5rem; row-gap: 0; align-items: stretch; }
.pj-card { display: grid; grid-template-rows: auto auto 1fr auto auto auto; margin-bottom: 1.5rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 22px; overflow: hidden; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; min-width: 0; }
@supports (grid-template-rows: subgrid) { .pj-card { grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; } }
.pj-card:hover { transform: translateY(-4px); border-color: #c7d2fe; box-shadow: 0 22px 44px -26px rgba(79, 70, 229, .45); }
.pj-media { position: relative; aspect-ratio: 4 / 3; background: #eef1f6; overflow: hidden; }
.pj-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.pj-card:hover .pj-media img { transform: scale(1.04); }
.pj-badge { position: absolute; left: .8rem; top: .8rem; padding: .3rem .75rem; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #334155; font-size: .78rem; font-weight: 700; letter-spacing: .01em; box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.pj-title, .pj-text, .pj-specs, .pj-eta, .pj-foot { padding-left: 1.35rem; padding-right: 1.35rem; }
.pj-title { margin: 0; padding-top: 1.15rem; font-size: 1.1rem; line-height: 1.35; font-weight: 800; letter-spacing: -.012em; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-text { margin: 0; padding-top: .5rem; font-size: .92rem; line-height: 1.55; font-weight: 500; color: #475569; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pj-specs { display: flex; flex-wrap: wrap; gap: .4rem; padding-top: .95rem; align-content: flex-start; }
.pj-spec { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .7rem; border-radius: 999px; background: #f1f5f9; color: #334155; font-size: .8rem; line-height: 1.3; font-weight: 600; }
.pj-spec--mat { background: #eef2ff; color: #4338ca; }
.pj-dot { display: inline-block; width: 1.1rem; height: 1.1rem; flex: 0 0 auto; --spool-line: rgba(15, 23, 42, .34); }
.pj-dot .f3d-spool { filter: none; }
.pj-dot .f3d-spool .sp-body { stroke-width: 4; } .pj-dot .f3d-spool .sp-core, .pj-dot .f3d-spool .sp-hub { stroke-width: 3; }
html[data-theme="dark"] .pj-dot { --spool-line: rgba(255, 255, 255, .55); }
.pj-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1.1rem; padding-top: 1rem; padding-bottom: 1.25rem; border-top: 1px solid #eef2f7; }
.pj-price strong { display: block; font-size: 1.2rem; line-height: 1.1; font-weight: 800; letter-spacing: -.01em; color: #0f172a; font-variant-numeric: tabular-nums; }
.pj-price small { display: block; margin-top: .15rem; font-size: .78rem; font-weight: 600; color: #64748b; }
.pj-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 1.2rem; border-radius: 999px; border: 1px solid transparent; background: #0f172a; color: #fff; font: inherit; font-size: .92rem; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.pj-btn:hover { background: #4f46e5; color: #fff; }
.pj-btn--ghost { background: transparent; border-color: #cbd5e1; color: #0f172a; }
.pj-btn--ghost:hover { background: transparent; border-color: #6366f1; color: #4338ca; }
.pj-empty { margin: 1rem 0 2rem; padding: 2.5rem 1.5rem; border: 1.5px dashed #cbd5e1; border-radius: 22px; text-align: center; }
.pj-empty-title { margin: 0 0 .4rem; font-size: 1.15rem; font-weight: 800; color: #0f172a; }
.pj-empty-text { margin: 0 auto 1.25rem; max-width: 30rem; font-size: .95rem; line-height: 1.55; color: #64748b; }
.pj-empty-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.pj-note { margin: .5rem 0 0; max-width: 48rem; font-size: .82rem; line-height: 1.6; color: #64748b; }
.pj-none { grid-column: 1 / -1; color: #64748b; text-align: center; }

html[data-theme="dark"] .pj-search input, html[data-theme="dark"] .pj-sel select { background-color: #0f1830; border-color: #263353; color: #e2e8f0; }
html[data-theme="dark"] .pj-sel select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .pj-sel, html[data-theme="dark"] .pj-meta, html[data-theme="dark"] .pj-note, html[data-theme="dark"] .pj-price small, html[data-theme="dark"] .pj-empty-text { color: #94a3b8; }
html[data-theme="dark"] .pj-chip { background: #111a2e; border-color: #263353; color: #cbd5e1; }
html[data-theme="dark"] .pj-chip i { background: #1e2a47; color: #94a3b8; }
html[data-theme="dark"] .pj-chip:hover { border-color: #6366f1; }
html[data-theme="dark"] .pj-chip.is-on { background: #4f46e5; border-color: #4f46e5; color: #fff; }
html[data-theme="dark"] .pj-chip.is-on i { background: rgba(255, 255, 255, .2); color: #fff; }
html[data-theme="dark"] .pj-reset { color: #a5b4fc; }
html[data-theme="dark"] .pj-card { background: #111a2e; border-color: #263353; box-shadow: none; }
html[data-theme="dark"] .pj-card:hover { border-color: #4f46e5; box-shadow: 0 22px 44px -26px rgba(99, 102, 241, .6); }
html[data-theme="dark"] .pj-media { background: #16213a; }
html[data-theme="dark"] .pj-badge { background: rgba(17, 26, 46, .88); color: #e2e8f0; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
html[data-theme="dark"] .pj-title, html[data-theme="dark"] .pj-price strong, html[data-theme="dark"] .pj-empty-title { color: #f1f5f9; }
html[data-theme="dark"] .pj-text { color: #94a3b8; }
html[data-theme="dark"] .pj-spec { background: #16213a; color: #cbd5e1; }
html[data-theme="dark"] .pj-spec--mat { background: #1e2750; color: #c7d2fe; }
html[data-theme="dark"] .pj-foot { border-top-color: #263353; }
html[data-theme="dark"] .pj-btn { background: #4f46e5; }
html[data-theme="dark"] .pj-btn:hover { background: #6366f1; }
html[data-theme="dark"] .pj-btn--ghost { background: transparent; border-color: #33407a; color: #e2e8f0; }
html[data-theme="dark"] .pj-btn--ghost:hover { border-color: #818cf8; color: #c7d2fe; background: transparent; }
html[data-theme="dark"] .pj-empty { border-color: #33407a; }

@media (max-width: 640px) {
  .pj-bar { flex-direction: column; align-items: stretch; }
  .pj-search { max-width: none; flex-basis: auto; }
  .pj-selects { display: grid; grid-template-columns: 1fr 1fr; }
  .pj-sel select { min-width: 0; width: 100%; }
  .pj-sel:only-child { grid-column: 1 / -1; }
  .pj-grid { grid-template-columns: 1fr; }
  .pj-chip { min-height: 2.75rem; padding: 0 1.1rem; }
  .pj-media { aspect-ratio: 16 / 10; }
  .pj-chips { margin-left: -1.25rem; margin-right: -1.25rem; padding-left: 1.25rem; padding-right: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { .pj-card, .pj-media img, .cw-spool, #color-grid .sp-wrap { transition: none !important; } .pj-card:hover { transform: none; } .pj-card:hover .pj-media img { transform: none; } }

/* ============================================================ Hinweisleiste (läuft durch, scrollt mit der Seite weg) */
:root { --promo-h: 2.25rem; }
@media (pointer: coarse) { :root { --promo-h: 2.75rem; } }
html.has-promo:not(.f3d-nobanner) { --promo-off: var(--promo-h); }
html.has-promo:not(.f3d-nobanner) body { padding-top: var(--promo-h); }
nav.glass-nav { top: var(--promo-off, 0px); }
body.no-scroll nav.glass-nav { top: 0 !important; }
.promo-bar { --promo-c1: #4338ca; --promo-c2: #6d28d9; position: absolute; top: 0; left: 0; right: 0; z-index: 100; height: var(--promo-h); display: flex; align-items: center; overflow: hidden; color: #fff; background: linear-gradient(90deg, var(--promo-c1) 0%, var(--promo-c2) 100%); font-size: 13px; font-weight: 600; line-height: 1; }
html[data-theme="dark"] .promo-bar { --promo-c1: #312e81; --promo-c2: #4c1d95; }
html.f3d-nobanner .promo-bar { display: none; }
body.no-scroll .promo-bar { visibility: hidden; }
.promo-viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1.5rem, #000 calc(100% - 4.5rem), transparent calc(100% - 2.75rem)); mask-image: linear-gradient(90deg, transparent 0, #000 1.5rem, #000 calc(100% - 4.5rem), transparent calc(100% - 2.75rem)); }
.promo-track { display: flex; width: max-content; animation: promo-run var(--promo-dur, 50s) linear infinite; will-change: transform; }
.promo-list { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; flex-shrink: 0; }
.promo-list li { display: flex; align-items: center; white-space: nowrap; }
.promo-list li::before { content: ''; width: .3rem; height: .3rem; margin: 0 1.5rem; border-radius: 50%; background: rgba(255, 255, 255, .55); flex-shrink: 0; }
.promo-list a, .promo-list span { color: #fff; text-decoration: none; }
.promo-list a { display: inline-block; line-height: var(--promo-h); }
.promo-list a:hover, .promo-list a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.promo-list a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 3px; }
.promo-list b { font-weight: 800; }
@keyframes promo-run { from { transform: translateX(0); } to { transform: translateX(var(--promo-shift, -50%)); } }
@media (hover: hover) { .promo-bar:hover .promo-track { animation-play-state: paused; } }
.promo-bar:focus-within .promo-track { animation-play-state: paused; }
.promo-close { position: absolute; top: 0; right: 0; bottom: 0; width: 3.1rem; display: flex; align-items: center; justify-content: center; padding: 0 .2rem 0 .6rem; border: 0; color: #fff; cursor: pointer; opacity: .9; background: linear-gradient(90deg, transparent 0, var(--promo-c2) 45%); }
.promo-close svg { width: 1rem; height: 1rem; }
.promo-close:hover, .promo-close:focus-visible { opacity: 1; }
.promo-close:focus-visible { outline: 2px solid #fff; outline-offset: -4px; border-radius: 6px; }
@media (pointer: coarse) { .promo-close { width: 3.4rem; } }
/* Bewegung reduziert: keine Lauftext-Animation, stattdessen eine ruhige Meldung, die langsam wechselt (Skript setzt .is-rot) */
.promo-bar.is-still .promo-track { animation: none; width: auto; }
.promo-bar.is-still .promo-viewport { -webkit-mask-image: none; mask-image: none; padding: 0 3.4rem 0 1rem; text-align: center; }
.promo-bar.is-still .promo-list { justify-content: center; }
.promo-bar.is-still .promo-list li::before { display: none; }
.promo-bar.is-still .promo-list.is-rot li:not(.is-on) { display: none; }
.promo-bar.is-still .promo-list li { white-space: normal; text-align: center; line-height: 1.2; }


/* ============================================================ Newsletter (Footer-Feld und eigene Seite) */
.nl-box { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1.25rem 2.5rem; align-items: center; margin: 0 0 2.5rem; padding: 1.9rem 2.1rem; border: 1px solid #e0e7ff; border-radius: 28px; background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 55%, #faf5ff 100%); text-align: left; }
.nl-kicker { margin: 0 0 .4rem; font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #4338ca; }
.nl-title { margin: 0; font-size: 1.4rem; line-height: 1.22; font-weight: 800; letter-spacing: -.015em; color: #0f172a; text-transform: none; font-style: normal; }
.nl-sub { margin: .6rem 0 0; font-size: .95rem; line-height: 1.55; font-weight: 500; color: #475569; text-transform: none; letter-spacing: 0; }
.nl-sub b { color: #0f172a; font-weight: 800; }
.nl-row { display: flex; gap: .6rem; }
.nl-input { flex: 1 1 auto; min-width: 0; height: 3.1rem; padding: 0 1.2rem; border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; font: inherit; font-size: 1rem; font-weight: 500; color: #0f172a; outline: none; -webkit-appearance: none; appearance: none; text-transform: none; letter-spacing: 0; transition: border-color .15s, box-shadow .15s; }
.nl-input::placeholder { color: #64748b; opacity: 1; }
.nl-input:focus { border-color: #6366f1; box-shadow: 0 0 0 4px rgba(99, 102, 241, .16); }
.nl-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; height: 3.1rem; padding: 0 1.6rem; border: 1px solid transparent; border-radius: 999px; background: #0f172a; color: #fff; font: inherit; font-size: .95rem; font-weight: 700; letter-spacing: 0; text-transform: none; text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.nl-btn:hover, .nl-btn:focus-visible { background: #4f46e5; color: #fff; }
.nl-btn:disabled { opacity: .65; cursor: progress; }
.nl-btn--ghost { background: transparent; color: #0f172a; border-color: #cbd5e1; }
.nl-btn--ghost:hover, .nl-btn--ghost:focus-visible { background: #fff; color: #4338ca; border-color: #a5b4fc; }
.nl-consent { margin: .8rem 0 0; font-size: .76rem; line-height: 1.55; font-weight: 500; color: #556071; text-transform: none; letter-spacing: 0; }
footer .nl-consent a, .nl-consent a { display: inline; padding: 0; color: #4338ca; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.nl-msg { margin: .75rem 0 0; font-size: .9rem; line-height: 1.5; font-weight: 700; text-transform: none; letter-spacing: 0; }
.nl-msg:empty { display: none; }
.nl-msg.is-ok { color: #047857; }
.nl-msg.is-err { color: #b91c1c; }
.nl-form.is-done .nl-row, .nl-form.is-done .nl-consent { display: none; }
html[data-theme="dark"] .nl-box, html[data-theme="dark"] .nl-card { background: linear-gradient(135deg, #141d36 0%, #181a3a 100%); border-color: #2a3560; }
html[data-theme="dark"] .nl-kicker { color: #a5b4fc; }
html[data-theme="dark"] .nl-title { color: #f1f5f9; }
html[data-theme="dark"] .nl-sub { color: #cbd5e1; }
html[data-theme="dark"] .nl-sub b { color: #fff; }
html[data-theme="dark"] .nl-input { background: #0b1226; border-color: #334155; color: #e2e8f0; }
html[data-theme="dark"] .nl-input::placeholder { color: #8391a7; }
html[data-theme="dark"] .nl-input:focus { border-color: #818cf8; box-shadow: 0 0 0 4px rgba(129, 140, 248, .22); }
html[data-theme="dark"] .nl-btn { background: #4f46e5; color: #fff; }
html[data-theme="dark"] .nl-btn:hover, html[data-theme="dark"] .nl-btn:focus-visible { background: #6366f1; }
html[data-theme="dark"] .nl-btn--ghost { background: transparent; color: #e2e8f0; border-color: #334155; }
html[data-theme="dark"] .nl-btn--ghost:hover, html[data-theme="dark"] .nl-btn--ghost:focus-visible { background: #16213a; color: #fff; border-color: #6366f1; }
html[data-theme="dark"] .nl-consent { color: #a3b0c4; }
html[data-theme="dark"] .nl-consent a { color: #a5b4fc; }
html[data-theme="dark"] .nl-msg.is-ok { color: #6ee7b7; }
html[data-theme="dark"] .nl-msg.is-err { color: #fca5a5; }
@media (max-width: 767px) {
  .nl-box { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; margin-bottom: 1.75rem; padding: 1.5rem 1.25rem; border-radius: 24px; }
  .nl-title { font-size: 1.22rem; }
}
@media (max-width: 520px) {
  .nl-row { flex-direction: column; }
  .nl-btn { width: 100%; }
}
@media (pointer: coarse) { .nl-input, .nl-btn { height: 3.25rem; } }

/* Eigene Newsletter-Seite */
.nl-page { max-width: 880px; margin: 0 auto; text-align: left; }
.nl-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr)); gap: 1rem; margin-bottom: 1.75rem; }
.nl-benefit { padding: 1.4rem 1.4rem 1.3rem; border: 1px solid #e2e8f0; border-radius: 22px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.nl-benefit[hidden] { display: none; }
.nl-benefit h2 { margin: .95rem 0 .4rem; font-size: 1.04rem; line-height: 1.3; font-weight: 800; letter-spacing: -.005em; color: #0f172a; text-transform: none; font-style: normal; }
.nl-benefit p { margin: 0; font-size: .92rem; line-height: 1.55; font-weight: 500; color: #475569; }
.nl-benefit p b { color: #0f172a; font-weight: 800; }
.nl-ico { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 14px; background: #eef2ff; color: #4338ca; }
.nl-ico svg { width: 1.35rem; height: 1.35rem; }
.nl-card { padding: 1.9rem 2rem; border: 1px solid #e0e7ff; border-radius: 28px; background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 55%, #faf5ff 100%); }
.nl-card[hidden], .nl-page [hidden] { display: none !important; }
.nl-card .nl-title { font-size: 1.4rem; }
.nl-label { display: block; margin: 1.1rem 0 .45rem; font-size: .85rem; font-weight: 700; color: #334155; }
.nl-small { margin: 1.1rem .25rem 0; font-size: .85rem; line-height: 1.55; font-weight: 500; color: #556071; }
.nl-small a { color: #4338ca; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.nl-result { text-align: center; }
.nl-result-icon { display: inline-flex; align-items: center; justify-content: center; width: 3.4rem; height: 3.4rem; margin-bottom: .9rem; border-radius: 50%; background: #dcfce7; color: #15803d; }
.nl-result-icon.is-off { background: #e2e8f0; color: #475569; }
.nl-result-icon.is-err { background: #fee2e2; color: #b91c1c; }
.nl-result-icon svg { width: 1.7rem; height: 1.7rem; }
.nl-result .nl-text { max-width: 34rem; margin: .7rem auto 0; font-size: 1rem; line-height: 1.6; font-weight: 500; color: #475569; }
.nl-gift { max-width: 26rem; margin: 1.5rem auto 0; padding: 1.5rem 1.4rem 1.4rem; border-radius: 22px; color: #fff; text-align: center; background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); }
.nl-gift-kicker { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #c7d2fe; }
.nl-gift-big { margin: .3rem 0 0; font-size: 3.2rem; line-height: 1.05; font-weight: 800; letter-spacing: -.03em; color: #fff; }
.nl-gift-sub { margin: .3rem 0 1.1rem; font-size: .9rem; font-weight: 500; color: #e0e7ff; }
.nl-gift-code { display: inline-flex; align-items: center; gap: .6rem; max-width: 100%; padding: .45rem .5rem .45rem 1.1rem; border-radius: 14px; background: #fff; color: #4338ca; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.25rem; font-weight: 800; letter-spacing: .06em; }
.nl-gift-code button { min-height: 2.5rem; padding: 0 .9rem; border: 0; border-radius: 10px; background: #eef2ff; color: #3730a3; font: inherit; font-family: inherit; font-size: .8rem; font-weight: 700; letter-spacing: 0; cursor: pointer; }
.nl-gift-code button:hover { background: #e0e7ff; }
.nl-gift-hint { margin: 1rem 0 0; font-size: .82rem; line-height: 1.5; font-weight: 500; color: #e0e7ff; }
.nl-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: 1.6rem; }
html[data-theme="dark"] .nl-benefit { background: #111a2e; border-color: #263353; box-shadow: none; }
html[data-theme="dark"] .nl-benefit h2 { color: #f1f5f9; }
html[data-theme="dark"] .nl-benefit p { color: #cbd5e1; }
html[data-theme="dark"] .nl-benefit p b { color: #fff; }
html[data-theme="dark"] .nl-ico { background: #1e2a52; color: #a5b4fc; }
html[data-theme="dark"] .nl-label { color: #cbd5e1; }
html[data-theme="dark"] .nl-small { color: #a3b0c4; }
html[data-theme="dark"] .nl-small a { color: #a5b4fc; }
html[data-theme="dark"] .nl-result .nl-text { color: #cbd5e1; }
html[data-theme="dark"] .nl-result-icon { background: #12382b; color: #6ee7b7; }
html[data-theme="dark"] .nl-result-icon.is-off { background: #1e293b; color: #cbd5e1; }
html[data-theme="dark"] .nl-result-icon.is-err { background: #3b1620; color: #fca5a5; }
html[data-theme="dark"] .nl-gift { background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%); }
@media (max-width: 767px) {
  .nl-card { padding: 1.5rem 1.25rem; border-radius: 24px; }
  .nl-gift-big { font-size: 2.7rem; }
  .nl-gift-code { font-size: 1.1rem; }
  .nl-actions .nl-btn { width: 100%; }
}
@media (pointer: coarse) { .nl-gift-code button { min-height: 2.75rem; } }
@media print { .promo-bar, .nl-box { display: none !important; } html.has-promo body { padding-top: 0 !important; } }

/* ============================================================ Hilfe-Assistent (Chat unten rechts) */
.fa-root { position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 95; font-family: inherit; text-align: left; text-transform: none; letter-spacing: 0; font-style: normal; }
.fa-open { display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border: 0; border-radius: 50%; color: #fff; cursor: pointer; background: linear-gradient(135deg, #4f46e5, #7c3aed); box-shadow: 0 8px 24px rgba(79, 70, 229, .35), 0 2px 6px rgba(15, 23, 42, .15); transition: transform .15s, box-shadow .15s; }
.fa-open:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(79, 70, 229, .4), 0 2px 6px rgba(15, 23, 42, .15); }
.fa-open:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 3px; }
.fa-open svg { width: 1.6rem; height: 1.6rem; }
.fa-open .fa-i-x { display: none; }
.fa-root.is-open .fa-i-chat { display: none; }
.fa-root.is-open .fa-i-x { display: block; }
.fa-panel { position: absolute; right: 0; bottom: 4.5rem; width: 23.5rem; max-width: calc(100vw - 2rem); height: min(33rem, calc(100dvh - 7.5rem)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 22px; background: #fff; box-shadow: 0 24px 60px rgba(15, 23, 42, .22), 0 4px 12px rgba(15, 23, 42, .08); }
.fa-panel[hidden] { display: none; }
.fa-head { padding: 1rem 1.15rem .9rem; color: #fff; background: linear-gradient(135deg, #4338ca, #6d28d9); }
.fa-title { font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; }
.fa-sub { margin-top: .2rem; font-size: .76rem; line-height: 1.4; font-weight: 500; color: #e0e7ff; }
.fa-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1rem 1rem .5rem; display: flex; flex-direction: column; gap: .6rem; overscroll-behavior: contain; background: #f8fafc; }
.fa-msg { max-width: 88%; padding: .65rem .9rem; border-radius: 16px; font-size: .92rem; line-height: 1.5; font-weight: 500; overflow-wrap: anywhere; }
.fa-bot { align-self: flex-start; background: #fff; color: #1e293b; border: 1px solid #e2e8f0; border-bottom-left-radius: 5px; }
.fa-me { align-self: flex-end; background: #4f46e5; color: #fff; border-bottom-right-radius: 5px; }
.fa-bot a { color: #4338ca; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.fa-bot b { font-weight: 800; color: #0f172a; }
.fa-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.fa-chip { min-height: 2.25rem; padding: 0 .85rem; border: 1px solid #c7d2fe; border-radius: 999px; background: #eef2ff; color: #3730a3; font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; transition: background .15s; }
.fa-chip:hover { background: #e0e7ff; }
.fa-form { flex: 0 0 auto; display: flex; gap: .5rem; padding: .7rem .8rem .8rem; border-top: 1px solid #e2e8f0; background: #fff; }
.fa-input { flex: 1 1 auto; min-width: 0; height: 2.75rem; padding: 0 1rem; border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; color: #0f172a; font: inherit; font-size: 1rem; font-weight: 500; outline: none; -webkit-appearance: none; appearance: none; }
.fa-input::placeholder { color: #64748b; opacity: 1; }
.fa-input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .18); }
.fa-send { flex: 0 0 auto; height: 2.75rem; padding: 0 1.1rem; border: 0; border-radius: 999px; background: #0f172a; color: #fff; font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; }
.fa-send:hover { background: #4f46e5; }
html[data-theme="dark"] .fa-panel { background: #0f172a; border-color: #263353; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
html[data-theme="dark"] .fa-head { background: linear-gradient(135deg, #312e81, #4c1d95); }
html[data-theme="dark"] .fa-list { background: #0b1120; }
html[data-theme="dark"] .fa-bot { background: #16213a; color: #e2e8f0; border-color: #263353; }
html[data-theme="dark"] .fa-bot b { color: #fff; }
html[data-theme="dark"] .fa-bot a { color: #a5b4fc; }
html[data-theme="dark"] .fa-me { background: #4f46e5; }
html[data-theme="dark"] .fa-chip { background: #1e2a52; border-color: #3b4a85; color: #c7d2fe; }
html[data-theme="dark"] .fa-chip:hover { background: #26346b; }
html[data-theme="dark"] .fa-form { background: #0f172a; border-color: #263353; }
html[data-theme="dark"] .fa-input { background: #0b1226; border-color: #334155; color: #e2e8f0; }
html[data-theme="dark"] .fa-input::placeholder { color: #8391a7; }
html[data-theme="dark"] .fa-send { background: #4f46e5; }
html[data-theme="dark"] .fa-send:hover { background: #6366f1; }
@media (max-width: 520px) {
  .fa-root { right: .75rem; }
  .fa-panel { position: fixed; left: .75rem; right: .75rem; bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); width: auto; max-width: none; height: min(34rem, calc(100dvh - 7rem)); }
}
body.no-scroll .fa-root { display: none; }
@media print { .fa-root { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .fa-open { transition: none; } }

/* Passwort-Feld mit Auge-Knopf */
.pw-wrap { position: relative; }
.pw-wrap > input { padding-right: 3.25rem !important; }
.pw-eye { position: absolute; top: 50%; right: .25rem; transform: translateY(-50%); width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: #64748b; border-radius: .75rem; cursor: pointer; }
.pw-eye:hover, .pw-eye:focus-visible { color: #4f46e5; }
.pw-eye:focus-visible { outline: 2px solid #6366f1; outline-offset: -2px; }
html[data-theme="dark"] .pw-eye { color: #94a3b8; }
html[data-theme="dark"] .pw-eye:hover { color: #a5b4fc; }

/* Projekte: Lieferzeit, Vorschau-Hinweis, fehlendes Bild */
.pj-eta { margin: .7rem 0 0; font-size: 12px; line-height: 1.4; color: #475569; }
.pj-eta strong { font-weight: 700; color: #334155; }
.pj-eta small { font-size: 12px; color: #64748b; }
html[data-theme="dark"] .pj-eta, html[data-theme="dark"] .pj-eta small { color: #94a3b8; }
html[data-theme="dark"] .pj-eta strong { color: #cbd5e1; }
.pj-preview { position: absolute; right: .6rem; top: .6rem; padding: .15rem .55rem; border-radius: 999px; background: rgba(15, 23, 42, .72); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.pj-media--empty { background: linear-gradient(135deg, #eef1f6, #e2e8f0); }
html[data-theme="dark"] .pj-media--empty { background: linear-gradient(135deg, #1e293b, #0f172a); }

/* Konfigurator: Schnellwahl, erweiterte Einstellungen, feste Preisleiste */
.cfg-preset-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.cfg-preset { display: flex; flex-direction: column; gap: .15rem; text-align: left; padding: .7rem .8rem; min-height: 44px; border: 1px solid #e2e8f0; border-radius: 1rem; background: #fff; color: #0f172a; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.cfg-preset b { font-size: .86rem; font-weight: 800; letter-spacing: -.005em; }
.cfg-preset span { font-size: 12px; line-height: 1.3; font-weight: 600; color: #64748b; }
.cfg-preset:hover { border-color: #a5b4fc; }
.cfg-preset:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.cfg-preset.is-on { border-color: #6366f1; background: #eef2ff; box-shadow: 0 0 0 1px #6366f1 inset; }
.cfg-preset.is-on b { color: #4338ca; }
.cfg-help { margin-top: .6rem; }
.cfg-help > summary, .cfg-adv > summary { cursor: pointer; list-style: none; }
.cfg-help > summary::-webkit-details-marker, .cfg-adv > summary::-webkit-details-marker { display: none; }
.cfg-help > summary { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; font-weight: 800; color: #4f46e5; letter-spacing: .02em; }
.cfg-help > summary::after { content: '▾'; margin-left: .4rem; transition: transform .2s; }
.cfg-help[open] > summary::after { transform: rotate(180deg); }
.cfg-help-body { padding: .8rem 1rem; border-radius: 1rem; background: #f8fafc; border: 1px solid #e2e8f0; font-size: .85rem; line-height: 1.55; color: #475569; }
.cfg-help-body p { margin: 0 0 .6rem; } .cfg-help-body p:last-child { margin: 0; }
.cfg-help-body a { color: #4f46e5; text-decoration: underline; }
.cfg-adv { border: 1px solid #e2e8f0; border-radius: 1.1rem; background: #fff; }
.cfg-adv > summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 48px; padding: .6rem 1rem; font-weight: 800; font-size: .9rem; color: #0f172a; }
.cfg-adv > summary small { font-size: 12px; font-weight: 600; color: #64748b; margin-left: auto; text-align: right; }
.cfg-adv > summary::after { content: '▾'; color: #64748b; transition: transform .2s; }
.cfg-adv[open] > summary::after { transform: rotate(180deg); }
.cfg-adv > summary:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; border-radius: 1.1rem; }
.cfg-adv-body { padding: .25rem 1rem 1.1rem; }
.cfg-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid #e2e8f0; box-shadow: 0 -10px 30px -18px rgba(15, 23, 42, .35); }
.cfg-sticky[hidden] { display: none; }
.cfg-sticky-in { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 1rem; }
.cfg-sticky-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cfg-sticky-txt strong { font-size: 1.25rem; line-height: 1.15; font-weight: 900; color: #4f46e5; font-variant-numeric: tabular-nums; }
.cfg-sticky-txt span { font-size: 12px; line-height: 1.35; font-weight: 600; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfg-sticky-btn { flex: 0 0 auto; min-height: 48px; padding: 0 1.4rem; border: 0; border-radius: 1rem; background: #0f172a; color: #fff; font-weight: 800; font-size: .9rem; cursor: pointer; }
.cfg-sticky-btn:hover { background: #4f46e5; }
.cfg-sticky-btn:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
body.has-cfg-sticky { padding-bottom: 5rem; }
body.has-cfg-sticky .fa-root { bottom: calc(5.6rem + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 520px) { .cfg-preset-row { grid-template-columns: 1fr; } .cfg-preset { flex-direction: row; align-items: baseline; justify-content: space-between; gap: .75rem; } }
html[data-theme="dark"] .cfg-preset { background: #111a2e; border-color: #263353; color: #e2e8f0; }
html[data-theme="dark"] .cfg-preset span { color: #94a3b8; }
html[data-theme="dark"] .cfg-preset.is-on { background: #1e1b4b; border-color: #818cf8; box-shadow: 0 0 0 1px #818cf8 inset; }
html[data-theme="dark"] .cfg-preset.is-on b { color: #c7d2fe; }
html[data-theme="dark"] .cfg-help > summary { color: #a5b4fc; }
html[data-theme="dark"] .cfg-help-body { background: #0f172a; border-color: #263353; color: #cbd5e1; }
html[data-theme="dark"] .cfg-help-body a { color: #a5b4fc; }
html[data-theme="dark"] .cfg-adv { background: #111a2e; border-color: #263353; }
html[data-theme="dark"] .cfg-adv > summary { color: #e2e8f0; }
html[data-theme="dark"] .cfg-adv > summary small, html[data-theme="dark"] .cfg-adv > summary::after { color: #94a3b8; }
html[data-theme="dark"] .cfg-sticky { background: rgba(10, 15, 30, .92); border-top-color: #263353; }
html[data-theme="dark"] .cfg-sticky-txt strong { color: #a5b4fc; }
html[data-theme="dark"] .cfg-sticky-txt span { color: #94a3b8; }
html[data-theme="dark"] .cfg-sticky-btn { background: #6366f1; }

/* Upload-Hinweis (statt Pop-up) */
.cfg-msg { position: relative; margin-top: 1rem; padding: .9rem 2.9rem .9rem 1rem; border-radius: 1rem; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; }
.cfg-msg[hidden] { display: none; }
.cfg-msg-text { margin: 0; font-size: .9rem; line-height: 1.5; font-weight: 600; }
.cfg-msg-link { display: inline-block; margin-top: .5rem; font-size: .85rem; font-weight: 800; color: #4338ca; text-decoration: underline; min-height: 24px; }
.cfg-msg-x { position: absolute; top: .35rem; right: .35rem; width: 2.75rem; height: 2.75rem; border: 0; background: transparent; color: #9a3412; font-size: 1.5rem; line-height: 1; cursor: pointer; border-radius: .75rem; }
.cfg-msg-x:focus-visible { outline: 2px solid #ea580c; outline-offset: -2px; }
html[data-theme="dark"] .cfg-msg { background: #3b1d0a; border-color: #7c2d12; color: #fed7aa; }
html[data-theme="dark"] .cfg-msg-link { color: #c7d2fe; } html[data-theme="dark"] .cfg-msg-x { color: #fed7aa; }

/* Landingpages / Angebotsformular / Firmen-Einstieg */
.q-lab{display:block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted,#64748b);margin:0 0 .4rem .25rem}
.q-ok{color:#047857}.q-err{color:#b91c1c}
[data-theme="dark"] .q-ok{color:#6ee7b7}[data-theme="dark"] .q-err{color:#fca5a5}
.biz-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.5rem;margin-top:1rem;padding:1.1rem 1.4rem;border:1px solid #cbd5e1;border-radius:1.5rem;background:#fff;text-align:left}
.biz-band:hover{border-color:#6366f1}
.biz-t{display:block;font-size:1.05rem;font-weight:800;color:#0f172a}
.biz-s{display:block;font-size:.9rem;color:#475569;margin-top:.15rem}
[data-theme="dark"] .biz-band{background:#111827;border-color:#334155}
[data-theme="dark"] .biz-t{color:#f1f5f9}[data-theme="dark"] .biz-s{color:#cbd5e1}
details.acc-card summary{list-style:revert}

details.acc-card summary{min-height:44px;display:flex;align-items:center}
.rel-link{display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;border:1px solid #cbd5e1;border-radius:9999px;font-size:.875rem;font-weight:700;color:#334155;margin:0 .5rem .5rem 0}
.rel-link:hover{border-color:#6366f1;color:#4f46e5}
[data-theme="dark"] .rel-link{border-color:#475569;color:#e2e8f0}[data-theme="dark"] .rel-link:hover{border-color:#818cf8;color:#c7d2fe}

/* feste Preisleiste darf angesprungene Bedienelemente nie verdecken */
html:has(body.has-cfg-sticky){scroll-padding-bottom:110px}
body.has-cfg-sticky #multi-pills,body.has-cfg-sticky #color-grid,body.has-cfg-sticky #material-grid{scroll-margin-bottom:110px}

/* Handy: Schnellwahl untereinander (Titel oben, Beschreibung darunter), Mehrfarb-Knoepfe in gleichmaessigem Raster */
@media (max-width: 520px) {
  .cfg-preset { flex-direction: column !important; align-items: flex-start !important; gap: .1rem !important; }
  #multi-pills { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #multi-pills > * { width: 100%; justify-content: center; text-align: center; }
}

.cfg-steps { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .9rem; margin: 1rem auto 0; padding: 0; max-width: 40rem; }
.cfg-steps li { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 700; color: #475569; }
.cfg-steps b { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 999px; background: #4f46e5; color: #fff; font-size: .8rem; }
html[data-theme="dark"] .cfg-steps li { color: #cbd5e1; }
@media (max-width: 520px) { .cfg-steps { flex-direction: column; align-items: flex-start; width: max-content; max-width: 100%; gap: .4rem; } }
@media (pointer: coarse) { main a.text-indigo-600.font-bold { display: inline-block; padding: .55rem 0; } main p a.text-indigo-600.font-bold, main li a.text-indigo-600.font-bold { display: inline; padding: 0; } }

/* Hilfe-Assistent: Absaetze in Antworten, Chat-Formular */
.fa-bot { white-space: pre-line; }
.fa-chip-strong { background: #0f172a; border-color: #0f172a; color: #fff; }
.fa-chip-strong:hover { background: #4f46e5; }
.fa-formmsg { max-width: 96%; width: 96%; }
.fa-cform { display: flex; flex-direction: column; gap: .5rem; white-space: normal; }
.fa-cin { width: 100%; min-height: 2.5rem; padding: .55rem .75rem; border: 1px solid #cbd5e1; border-radius: 12px; background: #fff; color: #0f172a; font: inherit; font-size: 1rem; font-weight: 500; outline: none; resize: vertical; }
.fa-cin:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .18); }
.fa-cchk { display: flex; gap: .5rem; align-items: flex-start; font-size: .8rem; line-height: 1.4; color: #475569; }
.fa-cchk input { width: 1.15rem; height: 1.15rem; margin-top: .1rem; accent-color: #4f46e5; flex: 0 0 auto; }
.fa-csend { align-self: flex-start; }
.fa-csend:disabled { opacity: .6; cursor: wait; }
.fa-cout { min-height: 1rem; font-size: .85rem; font-weight: 700; color: #475569; }
.fa-cout.is-err { color: #b91c1c; }
.fa-cok { font-weight: 700; color: #047857; }
html[data-theme="dark"] .fa-cin { background: #0b1324; border-color: #334155; color: #e2e8f0; }
html[data-theme="dark"] .fa-cchk { color: #cbd5e1; }
html[data-theme="dark"] .fa-cout.is-err { color: #fca5a5; }
html[data-theme="dark"] .fa-cok { color: #6ee7b7; }
html[data-theme="dark"] .fa-chip-strong { background: #4f46e5; border-color: #4f46e5; }

/* ---------------------------------------------------------------- Handy: kompakter, weniger Scrollen */
@media (max-width: 640px) {
  /* Startseite: Kopfbereich straffen */
  .home-lead { display: none; }
  header h1.leading-\[1\.08\] { font-size: 1.95rem; line-height: 1.12; }
  header.pt-32 { padding-top: 6.6rem; padding-bottom: .9rem; }
  .choice-grid { gap: .6rem; }
  .choice-card { flex-direction: row; align-items: center; gap: .85rem; padding: .8rem 1rem; border-radius: 18px; }
  .choice-card .choice-ico { width: 2.5rem; height: 2.5rem; flex: 0 0 auto; }
  .choice-card .choice-text { display: none; }
  .choice-card .choice-title { font-size: 1.02rem; flex: 1 1 auto; }
  .choice-card .choice-cta { display: none; }
  .choice-card::after { content: '\2192'; flex: 0 0 auto; color: #4f46e5; font-size: 1.3rem; font-weight: 700; }
  .home-steps { margin-top: 1.1rem; gap: .55rem .9rem; }
  .home-steps li { gap: .5rem; }
  .home-steps li span:last-child { font-size: .78rem; line-height: 1.25; }
  .home-checks { margin-top: .9rem; gap: .25rem 1rem; font-size: .8rem; }
  /* Karten-Raster: zwei nebeneinander, kompakt */
  .m-tiles { gap: .6rem; }
  .m-tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .m-tiles > div { padding: .85rem .8rem; border-radius: 16px; }
  .m-tiles--2 > div p { font-size: .78rem; line-height: 1.4; }
  .m-tiles--2 > div h3 { font-size: .92rem; }
  .m-tiles--3 > div .text-3xl { font-size: 1.25rem; }
  .m-tiles--3 > div p { font-size: .82rem; }
  .m-tiles--3 > div p + p { display: none; }
  .home-cta { padding: 1.3rem 1.2rem; border-radius: 22px; gap: 1rem; }
  .home-cta h2 { font-size: 1.25rem; margin-bottom: .4rem; }
  .home-cta p { font-size: .85rem; }
  main section.py-10 { padding-top: 1.6rem; padding-bottom: 1.6rem; }
  main section.pb-10 { padding-bottom: 1.6rem; }
  main section h2.text-2xl { margin-bottom: .4rem; font-size: 1.4rem; }
  main section p.mb-8 { margin-bottom: 1rem; font-size: .85rem; }
  /* Projekte: zwei Spalten */
  .pj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .65rem; }
  .pj-card { display: flex; flex-direction: column; grid-row: auto; grid-template-rows: none; margin-bottom: .65rem; border-radius: 16px; }
  .pj-media { aspect-ratio: 1 / 1; }
  .pj-badge { left: .45rem; top: .45rem; padding: .15rem .5rem; font-size: .75rem; }
  .pj-title, .pj-specs, .pj-foot { padding-left: .75rem; padding-right: .75rem; }
  .pj-title { padding-top: .65rem; font-size: .92rem; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; min-height: 2.5em; }
  .pj-text, .pj-eta { display: none; }
  .pj-specs { padding-top: .45rem; gap: .3rem; }
  .pj-spec { font-size: .75rem; padding: .12rem .5rem; }
  .pj-spec:nth-of-type(n+3) { display: none; }
  .pj-foot { margin-top: auto; padding-top: .6rem; padding-bottom: .75rem; flex-direction: column; align-items: stretch; gap: .5rem; border-top: 0; }
  .pj-price strong { font-size: 1rem; }
  .pj-price small { font-size: .75rem; }
  .pj-btn { min-height: 2.75rem; padding: 0 .6rem; font-size: .85rem; }
  .pj-bar { gap: .55rem; margin-bottom: .5rem; }
  .pj-search { flex-basis: 100%; max-width: none; }
  .pj-selects { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .pj-sel select { min-width: 0; width: 100%; }
  .pj-meta { margin-bottom: .6rem; }
}
@media (max-width: 640px) {
  .pj-preview { display: none; }
  .m-tiles--3 > div .text-3xl { font-size: 1.05rem; white-space: nowrap; letter-spacing: -.02em; }
  .m-tiles--3 > div .font-bold { font-size: .78rem; line-height: 1.25; }
}
@media (max-width: 640px) {
  .m-hide { display: none; }
  /* Materialien: zwei Spalten, nur das Wichtigste */
  #mat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  #mat-grid .mat-card { padding: .85rem .8rem; border-radius: 18px; }
  #mat-grid .mat-card h2 { font-size: 1.05rem; }
  #mat-grid .mat-card > div:first-child { margin-bottom: .4rem; flex-direction: column; gap: .25rem; }
  #mat-grid .mat-card > div:first-child span { font-size: 8px; padding: .2rem .5rem; }
  #mat-grid .mat-card > p { font-size: .76rem; line-height: 1.4; margin-bottom: .5rem; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
  #mat-grid .mat-card .space-y-3 { display: none; }
  #mat-grid .mat-extra { font-size: .72rem; }
  .cw-row { gap: .5rem; }
  .cw-chip { width: calc(25% - .4rem); min-width: 4.1rem; padding: .55rem .2rem .45rem; border-radius: 16px; }
}
@media (max-width: 640px) {
  /* Unterseiten: Kopfbereiche straffen */
  header.pt-40 { padding-top: 6.2rem; padding-bottom: 1.2rem; }
  header .responsive-title { margin-bottom: .8rem; }
  header.pt-40 > p, header.pt-32 > p:not(.home-lead) { font-size: .9rem; line-height: 1.45; }
  main.pb-32 { padding-bottom: 3rem; }
  .service-card { padding: .9rem 1rem; display: grid; grid-template-columns: auto 1fr; column-gap: .85rem; align-items: center; border-radius: 18px; }
  .service-card > div:first-child { grid-row: span 2; width: 2.6rem; height: 2.6rem; margin: 0; border-radius: 12px; }
  .service-card > div:first-child svg { width: 1.3rem; height: 1.3rem; }
  .service-card h3 { font-size: 1rem; margin-bottom: .15rem; }
  .service-card p { font-size: .78rem; line-height: 1.4; }
  main > .grid.mb-24 { gap: .6rem; margin-bottom: 1.4rem; }
  .glass-card .gradient-indigo { padding: 1.3rem 1.2rem; }
  .glass-card .gradient-indigo h2 { font-size: 1.9rem; margin-bottom: .5rem; }
  .glass-card .gradient-indigo p { display: none; }
  .glass-card .gradient-indigo span.block { margin-bottom: .4rem; }
}
@media (max-width: 640px) {
  .pj-title { overflow-wrap: anywhere; hyphens: auto; font-size: .88rem; }
}
html[data-theme="dark"] .choice-card::after { color: #a5b4fc; }

/* Chatbot: Bestell-Karten zum erneuten Bestellen */
.fa-card { align-self: flex-start; max-width: 92%; padding: .7rem .85rem; border: 1px solid #c7d2fe; border-radius: 14px; background: #fff; }
.fa-card-t { font-weight: 800; font-size: .88rem; color: #0f172a; }
.fa-card-l { margin: .35rem 0 .6rem; padding-left: 1.1rem; list-style: disc; font-size: .84rem; color: #334155; line-height: 1.45; }
.fa-note { margin-top: .4rem; font-size: .82rem; color: #92400e; }
html[data-theme="dark"] .fa-card { background: #1a2140; border-color: #3b4a85; }
html[data-theme="dark"] .fa-card-t { color: #f1f5f9; }
html[data-theme="dark"] .fa-card-l { color: #cbd5e1; }
html[data-theme="dark"] .fa-note { color: #fcd34d; }

/* Startseite: Hauptknopf im ersten Bereich */
.hero-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.5rem; border-radius: 14px; border: 1px solid #cbd5e1; background: #fff; color: #0f172a; font-weight: 700; font-size: .95rem; text-decoration: none; transition: border-color .15s, color .15s, background .15s; }
.hero-btn:hover { border-color: #4f46e5; color: #4f46e5; }
.hero-btn--main { background: #4f46e5; border-color: #4f46e5; color: #fff; box-shadow: 0 8px 22px -10px rgba(79,70,229,.7); }
.hero-btn--main:hover { background: #4338ca; border-color: #4338ca; color: #fff; }
html[data-theme="dark"] .hero-btn { background: #1a2140; border-color: #3b4a85; color: #e2e8f0; }
html[data-theme="dark"] .hero-btn:hover { border-color: #a5b4fc; color: #fff; }
html[data-theme="dark"] .hero-btn--main { background: #4f46e5; border-color: #4f46e5; color: #fff; }
@media (max-width: 640px) {
  .home-hero-cta { display: none; }
  .home-checks li:nth-child(n+4) { display: none; }
}

/* Info-Buttons im Konfigurator bleiben auch vor dem Datei-Upload klickbar (der Rest ist gesperrt) */
#config-settings.pointer-events-none button[onclick*="openExpressInfo"],
#config-settings.pointer-events-none button[onclick*="openMaterialModal"] { pointer-events: auto; }
#config-settings.pointer-events-none button[onclick*="openExpressInfo"] { opacity: 1; }

.code-toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 250; max-width: min(92vw, 520px); padding: 12px 18px; border-radius: 14px; background: #0f172a; color: #fff; font-size: 13px; font-weight: 700; line-height: 1.4; box-shadow: 0 10px 30px rgba(15,23,42,.35); transition: opacity .5s; }
.code-toast--hide { opacity: 0; }
html[data-theme="dark"] .code-toast { background: #4f46e5; }

/* Menüpunkt „Schriftzüge“: in der Desktop-Leiste erst ab 1280 px, damit es bei schmaleren Fenstern nicht eng wird (im Handy-Menü immer da) */
@media (max-width: 1279px) { .nav-sz { display: none !important; } }

/* ---------------------------------------------------------------- Konfigurator 2026-10: Ausführung, Ausrichtung, Prüf-Karte */
.cfg-opt-grid { display: grid; gap: .45rem; }
.cfg-opt-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cfg-opt-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 520px) { .cfg-opt-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cfg-opt { position: relative; display: flex; flex-direction: column; justify-content: center; gap: .1rem; min-height: 3.1rem; height: 100%; padding: .55rem .6rem; border: 1px solid #e2e8f0; border-radius: .9rem; background: #fff; cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.cfg-opt b { font-size: .8rem; font-weight: 900; color: #0f172a; text-transform: uppercase; font-style: italic; letter-spacing: -.01em; }
.cfg-opt span { font-size: 11px; font-weight: 700; color: #64748b; line-height: 1.25; }
.cfg-opt:hover { border-color: #a5b4fc; }
.custom-radio:checked + .cfg-opt { border-color: #6366f1; background: #eef2ff; box-shadow: 0 0 0 1px #6366f1 inset; }
.custom-radio:checked + .cfg-opt b { color: #4338ca; }
.custom-radio:focus-visible + .cfg-opt { outline: 2px solid #6366f1; outline-offset: 2px; }
.cfg-opt-info { position: absolute; top: 0; right: 0; width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; border-radius: 0 .9rem 0 .7rem; background: #eef2ff; color: #4f46e5; }
.cfg-hint { margin: .45rem 0 0; font-size: 12px; line-height: 1.45; font-weight: 600; color: #64748b; }

.orient-bar { position: absolute; top: .6rem; left: .6rem; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem; max-width: calc(100% - 7.8rem); padding: .3rem; border-radius: .9rem; background: rgba(255, 255, 255, .92); border: 1px solid #e2e8f0; box-shadow: 0 6px 18px -10px rgba(15, 23, 42, .4); }
.orient-bar[hidden], .orient-legend[hidden], .orient-pickhint[hidden], .check-card[hidden], .price-breakdown[hidden], .eta-note[hidden] { display: none; }
.orient-t { padding: 0 .35rem; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: #64748b; }
.orient-b { min-height: 34px; padding: .35rem .55rem; border-radius: .65rem; border: 1px solid transparent; background: transparent; color: #334155; font-size: 12px; font-weight: 800; cursor: pointer; }
.orient-b:hover { background: #f1f5f9; }
.orient-b.is-on { background: #4f46e5; color: #fff; }
.orient-b:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.orient-legend { position: absolute; right: .6rem; bottom: .6rem; z-index: 30; display: flex; align-items: center; gap: .4rem; padding: .35rem .6rem; border-radius: .7rem; background: rgba(255, 255, 255, .92); border: 1px solid #e2e8f0; font-size: 11px; font-weight: 800; color: #475569; }
.ol-dot { width: .7rem; height: .7rem; border-radius: 50%; background: #ef4444; }
.orient-pickhint { position: absolute; left: 50%; top: 3.6rem; transform: translateX(-50%); z-index: 30; width: max-content; max-width: 90%; padding: .5rem .8rem; border-radius: .8rem; background: #0f172a; color: #fff; font-size: 12px; font-weight: 700; text-align: center; }
.orient-t { display: none; }
.ob-s { display: none; }
@media (max-width: 479px) {
  .orient-bar { top: auto; bottom: .5rem; left: .5rem; right: .5rem; max-width: none; flex-wrap: nowrap; }
  .orient-b { flex: 1 1 0; padding: .35rem .3rem; }
  .ob-l { display: none; } .ob-s { display: inline; }
  #viewer-container.has-file #dimension-label { top: .6rem; bottom: auto; }
  .orient-legend { bottom: 3.6rem; right: .5rem; }
  .orient-pickhint { top: auto; bottom: 3.5rem; font-size: 11px; padding: .4rem .65rem; }
}

.check-card { margin-top: 1rem; padding: 1rem; border-radius: 1.25rem; border: 1px solid #c7d2fe; background: #f5f7ff; }
.check-card h3 { margin: 0 0 .6rem; font-size: .95rem; font-weight: 900; color: #1e1b4b; }
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; margin: 0 0 .7rem; }
@media (min-width: 520px) { .check-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.check-grid div { padding: .5rem .6rem; border-radius: .75rem; background: #fff; border: 1px solid #e0e7ff; }
.check-grid dt { font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #6366f1; }
.check-grid dd { margin: .1rem 0 0; font-size: .9rem; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; }
.check-warn { margin: 0 0 .6rem; padding: .6rem .75rem; border-radius: .75rem; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; font-size: 13px; font-weight: 600; line-height: 1.45; }
.check-warn button { margin: .35rem .35rem 0 0; padding: .35rem .65rem; border-radius: .6rem; border: 1px solid #fdba74; background: #fff; color: #9a3412; font-weight: 800; font-size: 12px; cursor: pointer; }
.check-info { margin: 0 0 .6rem; font-size: 13px; line-height: 1.45; font-weight: 600; color: #475569; }
.check-ok { display: flex; align-items: flex-start; gap: .6rem; padding: .7rem .8rem; border-radius: .9rem; background: #fff; border: 2px solid #6366f1; cursor: pointer; }
.check-ok input { width: 1.2rem; height: 1.2rem; margin-top: .1rem; accent-color: #4f46e5; flex-shrink: 0; }
.check-ok span { font-size: 14px; font-weight: 800; color: #1e1b4b; line-height: 1.35; }
.check-ok.is-done { border-color: #16a34a; background: #f0fdf4; }
.check-ok.is-done span { color: #166534; }
.check-ok.need { animation: f3dPulse 1s ease 2; }
@keyframes f3dPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); } 50% { box-shadow: 0 0 0 6px rgba(99, 102, 241, .25); } }
.fl-badge { display: inline-flex; align-items: center; gap: .2rem; padding: .05rem .4rem; border-radius: .4rem; font-size: 9px; font-weight: 900; letter-spacing: .06em; }
.fl-badge.ok { background: #dcfce7; color: #166534; }
.fl-badge.todo { background: #fef3c7; color: #92400e; }

.price-breakdown { margin-top: .15rem; font-size: 12px; font-weight: 700; color: #475569; text-align: right; line-height: 1.45; }
.eta-note { margin-top: .4rem; padding: .35rem .6rem; border-radius: .6rem; background: #ecfdf5; color: #047857; font-size: 12px; font-weight: 800; text-align: right; }

html[data-theme="dark"] .cfg-opt, html[data-theme="dark"] .check-grid div, html[data-theme="dark"] .check-ok, html[data-theme="dark"] .orient-bar, html[data-theme="dark"] .orient-legend { background: #111a2e; border-color: #334155; }
html[data-theme="dark"] .cfg-opt b, html[data-theme="dark"] .check-grid dd, html[data-theme="dark"] .check-ok span, html[data-theme="dark"] .check-card h3 { color: #e2e8f0; }
html[data-theme="dark"] .custom-radio:checked + .cfg-opt { background: #1e2750; }
html[data-theme="dark"] .check-card { background: #0f1830; border-color: #334155; }
html[data-theme="dark"] .orient-b { color: #cbd5e1; }
html[data-theme="dark"] .orient-b:hover { background: #1e293b; }
html[data-theme="dark"] .check-ok.is-done { background: #052e1a; }
html[data-theme="dark"] .price-breakdown { color: #94a3b8; }
html[data-theme="dark"] .eta-note { background: #052e1a; color: #6ee7b7; }

/* Warenkorb 2026-10: Versand als Liste, Gebührenzeilen */
.ship-list { display: grid; gap: .6rem; }
.ship-opt { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border: 2px solid #e2e8f0; border-radius: 1.25rem; background: #fff; cursor: pointer; transition: border-color .15s, background .15s; }
.ship-opt:hover { border-color: #a5b4fc; }
.ship-opt input { width: 1.15rem; height: 1.15rem; accent-color: #4f46e5; flex-shrink: 0; }
.ship-opt .so-t { display: block; font-size: .95rem; font-weight: 900; color: #0f172a; }
.ship-opt .so-s { display: block; margin-top: .1rem; font-size: 12px; font-weight: 600; color: #64748b; line-height: 1.4; }
.ship-opt .so-p { margin-left: auto; font-size: 1.05rem; font-weight: 900; font-style: italic; color: #0f172a; white-space: nowrap; }
.ship-opt.is-on { border-color: #6366f1; background: #eef2ff; }
.ship-note { margin: .2rem 0 0; font-size: 12px; font-weight: 600; color: #64748b; line-height: 1.45; }
.cart-meta { margin-top: .35rem; font-size: 11px; font-weight: 700; color: #64748b; }
.cart-meta b { color: #4f46e5; }
.cart-save { display: inline-block; margin-left: .35rem; padding: 0 .35rem; border-radius: .35rem; background: #dcfce7; color: #166534; font-size: 10px; font-weight: 900; }
html[data-theme="dark"] .ship-opt { background: #111a2e; border-color: #334155; }
html[data-theme="dark"] .ship-opt.is-on { background: #1e2750; border-color: #6366f1; }
html[data-theme="dark"] .ship-opt .so-t, html[data-theme="dark"] .ship-opt .so-p { color: #e2e8f0; }
html[data-theme="dark"] .check-info, html[data-theme="dark"] .cfg-hint, html[data-theme="dark"] .ship-opt .so-s, html[data-theme="dark"] .cart-meta { color: #a8b3c7; }

/* ---------- Konfigurator: Einsatzzweck (4 Stufen) ---------- */
.cfg-purpose-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.cfg-purpose-b { position: relative; display: grid; grid-template-columns: 2.1rem 1fr; grid-template-rows: auto auto auto; column-gap: .6rem; align-items: center; text-align: left; padding: .75rem .8rem; min-height: 64px; border: 1px solid #e2e8f0; border-radius: 1.1rem; background: #fff; color: #0f172a; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s, transform .15s; }
.cfg-purpose-b[hidden] { display: none; }
.cfg-purpose-b:hover { border-color: #a5b4fc; transform: translateY(-1px); }
.cfg-purpose-b:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.cfg-purpose-b .cp-ic { grid-row: 1 / span 4; align-self: start; width: 2.1rem; height: 2.1rem; border-radius: .7rem; background: #eef2ff; color: #4f46e5; display: flex; align-items: center; justify-content: center; }
.cfg-purpose-b .cp-ic svg { width: 1.15rem; height: 1.15rem; }
.cfg-purpose-b b { font-size: .86rem; font-weight: 800; line-height: 1.15; }
.cfg-purpose-b .cp-s { font-size: 11.5px; line-height: 1.25; font-weight: 600; color: #64748b; }
.cfg-purpose-b .cp-m { font-size: 10px; line-height: 1.2; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #94a3b8; margin-top: .1rem; }
.cfg-purpose-b .cp-p { grid-column: 2; font-style: normal; font-size: .82rem; font-weight: 900; color: #4f46e5; margin-top: .2rem; }
.cfg-purpose-b .cp-p:empty { display: none; }
.cfg-purpose-b.is-on { border-color: #6366f1; background: #eef2ff; box-shadow: 0 0 0 1px #6366f1 inset; }
.cfg-purpose-b.is-on .cp-ic { background: #6366f1; color: #fff; }
.cfg-purpose-own { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #b45309; background: #fef3c7; border-radius: 999px; padding: .15rem .55rem; }
.cfg-purpose-own[hidden] { display: none; }
@media (max-width: 480px) { .cfg-purpose-grid { grid-template-columns: 1fr; } .cfg-purpose-b { grid-template-columns: 2.1rem 1fr auto; min-height: 0; padding: .65rem .75rem; } .cfg-purpose-b .cp-ic { grid-row: 1 / span 3; align-self: center; } .cfg-purpose-b .cp-p { grid-column: 3; grid-row: 1 / span 3; align-self: center; margin: 0 0 0 .5rem; } }
html[data-theme="dark"] .cfg-purpose-b { background: #111a2e; border-color: #263353; color: #e2e8f0; }
html[data-theme="dark"] .cfg-purpose-b .cp-s { color: #94a3b8; }
html[data-theme="dark"] .cfg-purpose-b .cp-ic { background: #1e1b4b; color: #a5b4fc; }
html[data-theme="dark"] .cfg-purpose-b .cp-p { color: #a5b4fc; }
html[data-theme="dark"] .cfg-purpose-b.is-on { background: #1e1b4b; border-color: #818cf8; box-shadow: 0 0 0 1px #818cf8 inset; }
html[data-theme="dark"] .cfg-purpose-b.is-on .cp-ic { background: #6366f1; color: #fff; }
html[data-theme="dark"] .cfg-purpose-own { background: #422006; color: #fcd34d; }

/* ---------- Kurz-Feedback ---------- */
.fb-pop { position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 1000; width: min(360px, calc(100vw - 2rem)); padding: 1.15rem 1.15rem 1rem; border-radius: 1.4rem; background: #fff; color: #0f172a; border: 1px solid #e0e7ff; box-shadow: 0 24px 60px -18px rgba(30, 27, 75, .45); transform: translateY(30px) scale(.97); opacity: 0; transition: transform .35s cubic-bezier(.2,.9,.3,1.2), opacity .3s; text-align: left; }
.fb-pop.is-in { transform: none; opacity: 1; }
.fb-pop h3 { margin: 0 0 .55rem; font-size: 1.05rem; font-weight: 900; letter-spacing: -.01em; }
.fb-kick { margin: 0 0 .15rem; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: #6366f1; }
.fb-x { position: absolute; top: .45rem; right: .55rem; width: 2rem; height: 2rem; border-radius: 999px; font-size: 1.35rem; line-height: 1; color: #94a3b8; background: transparent; border: 0; cursor: pointer; }
.fb-x:hover { background: #f1f5f9; color: #0f172a; }
.fb-q { margin: 0 0 .6rem; }
.fb-q p { margin: 0 0 .3rem; font-size: 12.5px; font-weight: 700; color: #334155; }
.fb-chips { display: flex; gap: .35rem; flex-wrap: wrap; }
.fb-chips button { flex: 1 1 0; min-height: 34px; padding: .35rem .5rem; border-radius: .8rem; border: 1px solid #e2e8f0; background: #f8fafc; font-size: 12px; font-weight: 800; color: #334155; cursor: pointer; transition: all .15s; }
.fb-chips button:hover { border-color: #a5b4fc; }
.fb-chips button[aria-pressed="true"] { background: #6366f1; border-color: #6366f1; color: #fff; }
.fb-more summary { cursor: pointer; font-size: 12px; font-weight: 700; color: #6366f1; margin: .2rem 0 .4rem; }
.fb-more textarea { width: 100%; border: 1px solid #e2e8f0; border-radius: .8rem; padding: .5rem .65rem; font-size: 13px; resize: vertical; background: #fff; color: inherit; }
.fb-send { width: 100%; margin-top: .4rem; min-height: 40px; border-radius: .9rem; background: #0f172a; color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; border: 0; cursor: pointer; }
.fb-send:disabled { opacity: .35; cursor: default; }
.fb-send:not(:disabled):hover { background: #4f46e5; }
.fb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.fb-thanks { margin: .3rem 2rem .3rem 0; font-size: 14px; line-height: 1.45; }
.fb-thanks b { color: #4f46e5; }
body.has-cfg-sticky .fb-pop { bottom: 5.5rem; }
@media (max-width: 520px) { .fb-pop { right: .75rem; left: .75rem; width: auto; bottom: .75rem; max-height: calc(100vh - 1.5rem); overflow-y: auto; } body.has-cfg-sticky .fb-pop { bottom: 5rem; } }
html[data-theme="dark"] .fb-pop { background: #0f172a; color: #e2e8f0; border-color: #263353; }
html[data-theme="dark"] .fb-q p { color: #cbd5e1; }
html[data-theme="dark"] .fb-chips button { background: #111a2e; border-color: #263353; color: #cbd5e1; }
html[data-theme="dark"] .fb-chips button[aria-pressed="true"] { background: #6366f1; color: #fff; }
html[data-theme="dark"] .fb-more textarea { background: #111a2e; border-color: #263353; }
html[data-theme="dark"] .fb-send { background: #6366f1; }
html[data-theme="dark"] .fb-x:hover { background: #1e293b; color: #fff; }

/* ---------- Startseite: Upload-Fläche (leitet zum Konfigurator) ---------- */
.home-upload { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .45rem; padding: clamp(1.8rem, 5vw, 3.2rem) 1.25rem; border: 2px dashed #a5b4fc; border-radius: 2rem; background: linear-gradient(160deg, #eef2ff, #fff 60%); box-shadow: 0 30px 70px -45px rgba(79, 70, 229, .6); transition: border-color .2s, transform .2s, box-shadow .2s; cursor: pointer; }
.home-upload:hover, .home-upload.is-drop { border-color: #6366f1; transform: translateY(-2px); box-shadow: 0 34px 80px -40px rgba(79, 70, 229, .75); }
.home-upload input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.hu-ico { width: 4rem; height: 4rem; border-radius: 1.3rem; background: #6366f1; color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: .3rem; }
.hu-ico svg { width: 2rem; height: 2rem; }
.hu-t { margin: 0; font-size: clamp(1.25rem, 3vw, 1.9rem); font-weight: 900; letter-spacing: -.02em; color: #0f172a; }
.hu-s { margin: 0; font-size: 14px; font-weight: 600; color: #64748b; max-width: 36rem; }
.hu-btn { margin-top: .7rem; display: inline-block; padding: .95rem 1.6rem; border-radius: 1.1rem; background: #0f172a; color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; pointer-events: none; }
.hu-msg { margin: .3rem 0 0; min-height: 1.2em; font-size: 13px; font-weight: 700; color: #4f46e5; }
.hu-alt { text-align: center; margin: 1rem 0 0; font-size: 13.5px; color: #64748b; }
.hu-alt a { color: #4f46e5; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
html[data-theme="dark"] .home-upload { background: linear-gradient(160deg, #1e1b4b, #0f172a 65%); border-color: #4338ca; }
html[data-theme="dark"] .hu-t { color: #f1f5f9; }
html[data-theme="dark"] .hu-s, html[data-theme="dark"] .hu-alt { color: #94a3b8; }
html[data-theme="dark"] .hu-btn { background: #6366f1; }
html[data-theme="dark"] .hu-alt a { color: #a5b4fc; }