/* Anfrage v5, 11.10.2026: ein Popup, ein Bildschirm. Moos-/Sand-Farben wie v4, Inhalt scrollt, Senden bleibt sichtbar. */
.wz{--wz-bg:var(--bg,#f6f4ee);--wz-ink:var(--ink,#121611);--wz-muted:#5d635c;--wz-line:#babeb3;--wz-sel:linear-gradient(135deg,#2a3325,#3a4632);--wz-focus:var(--olive,#56701f);--wz-error:#9d2720;color:var(--wz-ink);font-family:var(--text,system-ui)}
html.wz-lock,body.wz-lock{overflow:hidden}
dialog.wz{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:24px;border:0;background:transparent;overflow:hidden}
dialog.wz:not([open]){display:none}
dialog.wz[open]{display:grid;place-items:center}
.wz::backdrop{background:rgba(5,12,8,.7);backdrop-filter:blur(6px)}
.wz-box{display:flex;flex-direction:column;width:min(720px,100%);max-height:calc(100dvh - 48px);min-height:0;margin:0;background:var(--wz-bg);border-radius:12px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.35),0 4px 16px rgba(0,0,0,.16)}
.wz [hidden]{display:none !important}

.wz-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 28px 14px}
.wz-kicker{margin:0 0 4px;font:600 .8125rem/1.3 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--wz-focus)}
.wz-top h2{margin:0;font:600 clamp(1.5rem,2.4vw,2rem)/1.15 var(--display);text-transform:uppercase;letter-spacing:-.01em;text-wrap:balance}
.wz-top h2:focus{outline:0}
.wz-close{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#e9e5da;color:var(--wz-ink);font:400 1.75rem/1 var(--text);cursor:pointer}
.wz-close:focus-visible{outline:3px solid var(--wz-focus);outline-offset:3px}

.wz-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding:4px 28px 24px;scroll-padding:24px}
.wz-form{display:grid;gap:22px}
.wz fieldset{margin:0;padding:0;border:0;min-width:0}
.wz legend,.wz-label{margin:0 0 10px;padding:0;font:600 1rem/1.4 var(--text);color:var(--wz-ink)}
.wz legend+.wz-note{margin:-6px 0 12px}
.wz-note,.wz-klein{margin:0;font-size:.875rem;line-height:1.5;color:var(--wz-muted)}
.wz-klein a{color:inherit}

/* Gegenstand: Karte mit Bild oder einfache Auswahl */
.wz-karte{display:grid;grid-template-columns:104px minmax(0,1fr) auto;align-items:center;gap:16px;padding:12px 16px 12px 12px;background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(20,30,20,.08),0 10px 22px -18px rgba(29,36,24,.3)}
.wz-karte img{width:104px;height:68px;object-fit:contain}
.wz-karte>.wz-ico{justify-self:center}
.wz-karte small{display:block;font-size:.8125rem;line-height:1.3;color:var(--wz-muted)}
.wz-karte b{display:block;font:600 1.125rem/1.25 var(--display);text-transform:uppercase;overflow-wrap:anywhere}
.wz-link{min-height:44px;padding:10px 4px;border:0;background:none;color:var(--wz-ink);font:600 .9375rem/1.4 var(--text);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.wz-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#edf1dd}
.wz-ico svg{width:24px;height:24px;fill:none;stroke:var(--wz-focus);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Anliegen als Chips (echte Radio-Knöpfe) */
.wz-chips{display:flex;flex-wrap:wrap;gap:8px}
.wz-chip{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border:1px solid var(--wz-line);border-radius:999px;background:#fff;font:500 .9375rem/1.3 var(--text);cursor:pointer;transition:background-color .15s ease,color .15s ease}
.wz-chip input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.wz-chip:has(input:checked){border-color:transparent;background:var(--wz-sel);color:#fff}
.wz-chip:has(input:focus-visible){outline:3px solid var(--wz-focus);outline-offset:3px}

/* Felder */
.wz-felder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.wz-feld label{display:block;margin-bottom:6px;font:600 .9375rem/1.4 var(--text)}
.wz-feld label small{font-weight:400;color:var(--wz-muted)}
.wz input:not([type=radio]):not([type=file]),.wz select,.wz textarea{display:block;width:100%;min-height:48px;padding:11px 12px;border:1px solid var(--wz-line);border-radius:6px;background:#fff;color:var(--wz-ink);font:400 1rem/1.4 var(--text);box-sizing:border-box}
.wz textarea{min-height:96px;resize:vertical}
.wz select{appearance:auto}
.wz input:focus-visible,.wz select:focus-visible,.wz textarea:focus-visible{outline:3px solid var(--wz-focus);outline-offset:1px;border-color:var(--wz-focus)}
.wz input[aria-invalid="true"]:not([type=radio]):not([type=file]),.wz textarea[aria-invalid="true"]{border-color:var(--wz-error);box-shadow:inset 0 0 0 1px var(--wz-error)}
.wz-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wz-sendefehler{margin:0;padding:12px 16px;border-left:3px solid var(--wz-error);background:#f7e6e4;color:var(--wz-error);font-size:.9375rem;line-height:1.5}
.wz-fehler{margin:6px 0 0;font-size:.875rem;line-height:1.45;color:var(--wz-error)}
.wz-anliegen .wz-fehler{margin-top:10px}

/* Ersatzteil: Fotos */
.wz-teile{display:grid;gap:18px}
.wz-fotos{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 10px;padding:0;list-style:none}
.wz-fotos:empty{display:none}
.wz-fotos li{position:relative}
.wz-fotos img{display:block;width:84px;height:84px;object-fit:cover;border-radius:6px}
.wz-fotos button{position:absolute;top:-8px;right:-8px;width:32px;height:32px;border:0;border-radius:50%;background:#171c15;color:#fff;font:400 1.25rem/1 var(--text);cursor:pointer}
.wz-foto-add{position:relative;display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px dashed var(--wz-line);border-radius:8px;background:#fff;cursor:pointer}
.wz-foto-add b{display:block;font-size:.9375rem}
.wz-foto-add small{display:block;font-size:.8125rem;color:var(--wz-muted)}
.wz-foto-add.is-voll{opacity:.6;cursor:default}
.wz-datei{position:absolute;inset:0;opacity:0;cursor:pointer}
.wz-foto-add:has(input:focus-visible){outline:3px solid var(--wz-focus);outline-offset:3px}
.wz-foto-status{margin:8px 0 0;font-size:.875rem;color:var(--wz-muted)}
.wz-foto-status:empty{display:none}
.wz-foto-status.is-error{color:var(--wz-error)}

/* Fuß: Senden bleibt immer sichtbar */
.wz-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 28px;background:var(--wz-bg);box-shadow:0 -10px 24px -22px rgba(18,22,15,.5)}
.wz-tel{display:flex;align-items:center;gap:10px;min-height:44px;color:var(--wz-ink);font-size:.875rem;line-height:1.35;text-decoration:none}
.wz-tel svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--wz-focus);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wz-tel b{white-space:nowrap}
.wz .btn-primary{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border:0;border-radius:6px;background:var(--lime,#a4c639);color:var(--lime-ink,#1b2112);font:600 1rem/1.4 var(--text);cursor:pointer}
.wz .btn-primary:disabled{opacity:.55;cursor:wait}
.wz .btn-primary:focus-visible,.wz-tel:focus-visible,.wz-link:focus-visible{outline:3px solid var(--wz-focus);outline-offset:3px}

/* Bestätigung */
.wz-fertig{display:grid;gap:18px}
.wz-danke{display:flex;align-items:center;gap:14px;padding:16px;background:#fff;border-radius:8px}
.wz-danke .wz-ico{flex:none}
.wz .wz-zu::after{content:none}
.wz-danke p{margin:0;font-size:1rem;line-height:1.5}
.wz-vorschau{margin:0;padding:12px 16px;border-left:3px solid var(--wz-focus);background:#edf1dd;font-size:.875rem;line-height:1.5}
.wz-vorschau b{margin-right:6px}
.wz-liste{display:grid;margin:0;background:#fff;border-radius:8px}
.wz-liste div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:12px;padding:10px 16px;border-top:1px solid #ecebe5}
.wz-liste div:first-child{border-top:0}
.wz-liste dt{color:var(--wz-muted);font-size:.875rem}
.wz-liste dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}

@media(hover:hover){.wz-close:hover{background:#dcd8cd}.wz-chip:not(:has(input:checked)):hover{border-color:var(--wz-ink)}}

/* Handy: ganzer Bildschirm, Inhalt scrollt, Senden unten fest */
@media(max-width:760px){
 dialog.wz{padding:0}
 .wz-box{width:100%;height:100dvh;max-height:none;border-radius:0}
 .wz-top{padding:14px 16px 10px}
 .wz-top h2{font-size:1.5rem}
 .wz-body{padding:4px 16px 24px}
 .wz-felder{grid-template-columns:1fr}
 .wz-karte{grid-template-columns:84px minmax(0,1fr) auto;gap:12px}
 .wz-karte img{width:84px;height:56px}
 .wz-foot{flex-direction:column-reverse;align-items:stretch;gap:4px;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
 .wz-foot .btn-primary{width:100%}
 .wz-tel{justify-content:center}
 .wz-liste div{grid-template-columns:1fr;gap:2px}
}

@media(prefers-reduced-motion:no-preference){
 dialog.wz[open]::backdrop{animation:wz-fade .3s ease both}
 dialog.wz[open] .wz-box{animation:wz-in .32s cubic-bezier(.2,.8,.2,1) both}
 dialog.wz.is-closing[open]::backdrop{animation:wz-fade-out .26s ease both}
 dialog.wz.is-closing[open] .wz-box{animation:wz-out .26s cubic-bezier(.4,0,1,1) both}
}
@keyframes wz-in{from{opacity:0;transform:translateY(24px) scale(.97)}}
@keyframes wz-out{to{opacity:0;transform:translateY(12px) scale(.98)}}
@keyframes wz-fade{from{opacity:0}}
@keyframes wz-fade-out{to{opacity:0}}
/* Einwilligung vor dem Absenden (13.10.2026, Nutzer: „Häkchen setzen, dass man einverstanden ist“) */
.wz-ok{margin:2px 0 0}
.wz-check{display:flex;align-items:flex-start;gap:12px;font-size:.875rem;line-height:1.5;color:var(--wz-ink);cursor:pointer}
.wz .wz-check input[type=checkbox]{flex:none;width:22px;height:22px;min-height:0;margin:0;padding:0;border:0;box-shadow:none;accent-color:#3a4632;cursor:pointer}
.wz-check a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.wz-check input[aria-invalid="true"]{outline:2px solid var(--wz-error);outline-offset:2px}
.wz-ok .wz-fehler{margin-left:34px}
/* 15.10.2026 Mehrere Ersatzteile in einer Anfrage */
.wz-teilliste ul{display:grid;gap:8px;margin:6px 0 14px;padding:0;list-style:none}
.wz-teilliste li{display:grid;grid-template-columns:56px minmax(0,1fr) 64px 32px;align-items:center;gap:12px;padding:8px 10px 8px 8px;background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(20,30,20,.08)}
.wz-teilliste img{width:56px;height:56px;object-fit:cover;border-radius:6px}
.wz-teilliste .wz-ico{justify-self:center}
.wz-teilliste b{font:600 14.5px/1.3 var(--text,Barlow,sans-serif);overflow-wrap:anywhere}
.wz .wz-menge input[type=number]{width:64px;min-height:40px;padding:6px 8px;text-align:center}
.wz-teil-rm{width:32px;height:32px;border:0;border-radius:50%;background:#eef0ea;color:#1f231c;font-size:18px;line-height:1;cursor:pointer}
.wz-teil-rm:hover{background:#e0452f;color:#fff}
.wz-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wz-teil-zeile{display:flex;gap:8px}
.wz-teil-zeile input{flex:1;min-width:0}
.wz-teil-plus{flex:none;padding:0 16px;border:0;border-radius:6px;background:#1f261c;color:#fff;font:600 14px/1 var(--text,Barlow,sans-serif);cursor:pointer}
.wz-teil-plus:hover{background:#56701f}
.wz-teil-katalog{display:inline-block;margin-top:8px}