:root {
  --bg:#f5f7f6; --surface:#fff; --surface-soft:#eef3f1; --text:#17322c; --muted:#687a75;
  --primary:#0d6b5b; --primary-strong:#075246; --primary-soft:#dff0eb; --danger:#b42318;
  --border:#dbe4e1; --shadow-sm:0 8px 24px rgba(19,50,44,.08); --shadow-lg:0 22px 54px rgba(19,50,44,.12);
  --r-sm:14px; --r-md:20px; --r-lg:28px; --safe-bottom:env(safe-area-inset-bottom,0px); --browser-bottom-offset:0px;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color-scheme:light;
}
*{box-sizing:border-box} html{min-height:100%;background:var(--bg)} body{margin:0;min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--text)}
button,select{font:inherit} button{-webkit-tap-highlight-color:transparent} button:focus-visible,select:focus-visible{outline:3px solid rgba(13,107,91,.25);outline-offset:3px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.app-shell{width:min(100%,780px);min-height:100vh;min-height:100dvh;margin:auto;position:relative;padding-bottom:calc(104px + var(--safe-bottom))}
.app-header{padding:max(18px,env(safe-area-inset-top)) 20px 8px;display:flex;align-items:center;justify-content:space-between;gap:12px}.brand-block{display:flex;align-items:center;gap:11px;min-width:0}.brand-logo{width:44px;height:44px;border-radius:14px;background-position:center;background-size:cover;box-shadow:var(--shadow-sm)}.brand-copy{min-width:0}.company-name{margin:0;font-size:1.05rem;font-weight:900;letter-spacing:-.025em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.company-caption{margin:2px 0 0;color:var(--muted);font-size:.72rem;font-weight:700}
.business-switcher-wrap{position:relative;flex:none}.business-switcher{min-height:44px;max-width:150px;padding:0 34px 0 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font-weight:850;appearance:none;box-shadow:0 3px 12px rgba(19,50,44,.05)}.select-chevron{position:absolute;right:13px;top:50%;transform:translateY(-56%);color:var(--muted);pointer-events:none}
.main-content{padding:10px 20px 28px;outline:none}.home-layout{display:grid;gap:14px}.home-layout>.setup-start-hint,.home-layout>.settings-save-notice{grid-column:1/-1}.hero-card,.content-card,.placeholder-card,.open-receipt{background:var(--surface);border:1px solid rgba(219,228,225,.9);box-shadow:var(--shadow-sm)}.hero-card{border-radius:var(--r-lg);padding:24px}.eyebrow{margin:0 0 9px;color:var(--primary);font-size:.76rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}h1,h2,p{overflow-wrap:anywhere}h1{margin:0;font-size:clamp(2rem,8vw,3rem);line-height:1.02;letter-spacing:-.05em}.hero-copy,.page-copy{margin:12px 0 22px;color:var(--muted);line-height:1.5}
.button{min-height:52px;border:0;border-radius:var(--r-sm);padding:0 18px;font-weight:900;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}.button-primary{width:100%;min-height:64px;background:var(--primary);color:#fff;font-size:1.04rem;box-shadow:0 12px 26px rgba(13,107,91,.22)}.button-primary:active{background:var(--primary-strong);transform:translateY(1px)}.button-secondary{background:var(--surface-soft);color:var(--text)}.button-ghost{background:transparent;color:var(--primary);padding-inline:10px}.button-danger{background:var(--danger);color:#fff}.button-back{min-height:44px;padding:0 6px;background:transparent;color:var(--primary);justify-content:flex-start}
.open-receipt{border-radius:var(--r-md);padding:17px 18px}.open-receipt-header{display:flex;justify-content:space-between;align-items:center;gap:12px}.open-receipt h2{margin:0;font-size:1rem}.status-pill{padding:6px 9px;border-radius:999px;background:var(--primary-soft);color:var(--primary-strong);font-size:.7rem;font-weight:900}.open-receipt p{margin:7px 0 14px;color:var(--muted);font-size:.88rem;line-height:1.4}.open-receipt-actions{display:grid;grid-template-columns:1fr auto;gap:8px}
.bottom-nav{position:fixed;z-index:20;left:50%;bottom:calc(12px + var(--safe-bottom));transform:translateX(-50%);width:min(calc(100% - 24px),744px);min-height:72px;padding:7px 6px;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;border:1px solid rgba(219,228,225,.95);border-radius:24px;background:rgba(255,255,255,.94);box-shadow:var(--shadow-lg);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.nav-item{min-width:0;min-height:56px;border:0;border-radius:18px;background:transparent;color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:.68rem;font-weight:800}.nav-icon{font-size:1.18rem;line-height:1}.nav-item.is-active{background:var(--primary-soft);color:var(--primary-strong)}
.flow-page{min-height:calc(100dvh - 110px);display:flex;flex-direction:column}.flow-head{margin-bottom:15px}.step-line{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 11px}.step-badge{padding:6px 10px;border-radius:999px;background:var(--primary-soft);color:var(--primary-strong);font-size:.72rem;font-weight:900}.flow-title{font-size:clamp(1.9rem,7vw,2.55rem)}.flow-grid{display:grid;gap:11px}.choice-card{width:100%;min-height:92px;padding:15px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);color:var(--text);text-align:left;display:grid;grid-template-columns:50px 1fr auto;align-items:center;gap:13px;cursor:pointer;box-shadow:0 4px 14px rgba(19,50,44,.04)}.choice-card:active{transform:translateY(1px)}.choice-card.is-selected{border-color:var(--primary);box-shadow:0 0 0 2px rgba(13,107,91,.09)}.choice-icon{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:1.3rem;font-weight:900}.choice-title{display:block;font-weight:900}.choice-note{display:block;margin-top:4px;color:var(--muted);font-size:.85rem;line-height:1.35}.choice-arrow{color:var(--muted);font-size:1.2rem}.flow-footer{margin-top:auto;padding-top:20px}
.items-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}.items-list{list-style:none;margin:0;padding:0}.item-row{min-height:68px;padding:15px 18px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;border-bottom:1px solid var(--border)}.item-row:last-child{border-bottom:0}.item-name{font-weight:800}.item-price{font-weight:900;white-space:nowrap}.add-item{width:100%;margin-bottom:11px;background:var(--primary-soft);color:var(--primary-strong);border:1px solid rgba(13,107,91,.12)}.total-card{margin-top:13px;padding:19px;border-radius:var(--r-md);background:var(--text);color:#fff;display:flex;justify-content:space-between;align-items:end;gap:16px}.total-label{font-size:.78rem;opacity:.72;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.total-value{font-size:clamp(1.8rem,7vw,2.4rem);font-weight:950;letter-spacing:-.04em;white-space:nowrap}.summary-list{display:grid;gap:0}.summary-row{padding:14px 0;display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--border)}.summary-row:last-child{border:0}.summary-row span{color:var(--muted)}.prototype-note{margin:14px 4px;color:var(--muted);font-size:.8rem;line-height:1.45}.placeholder-page{min-height:calc(100dvh - 190px);display:grid;place-items:center}.placeholder-card{width:100%;border-radius:var(--r-lg);padding:28px}.placeholder-icon{width:54px;height:54px;border-radius:18px;background:var(--primary-soft);display:grid;place-items:center;color:var(--primary);font-size:1.4rem;margin-bottom:20px}.placeholder-card h1{font-size:2rem}.placeholder-card>p:last-of-type{color:var(--muted);line-height:1.5}.prototype-tools{margin-top:20px;padding:16px;border-radius:var(--r-sm);background:var(--surface-soft)}.build-label{margin:18px 0 2px;text-align:center;color:var(--muted);font-size:.7rem;font-weight:750}
.dialog-backdrop{position:fixed;z-index:50;inset:0;padding:20px;display:grid;place-items:center;background:rgba(12,31,27,.46);backdrop-filter:blur(8px)}.dialog{width:min(100%,430px);padding:24px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-lg)}.dialog-symbol{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:#fee9e7;color:var(--danger);font-weight:950;font-size:1.2rem}.dialog h2{margin:18px 0 8px}.dialog p{margin:0;color:var(--muted);line-height:1.5}.dialog-actions{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.page-enter{animation:page-in .18s ease-out both}@keyframes page-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.page-enter{animation:none}}
@media (min-width:700px){.app-header{padding-inline:30px}.main-content{padding-inline:30px}.home-layout{grid-template-columns:1.25fr .85fr;align-items:start;padding-top:22px}.home-layout.has-no-draft .hero-card{grid-column:1/-1}.hero-card{padding:34px}.flow-grid.two-column{grid-template-columns:1fr 1fr}.choice-card{min-height:104px}.placeholder-page{min-height:calc(100dvh - 210px)}}
@media (max-width:380px){.company-caption{display:none}.business-switcher{max-width:125px}.nav-item{font-size:.62rem}.nav-icon{font-size:1.08rem}.hero-card{padding:21px}}
/* UX-003 – direkte Kassenansicht */
.search-field{min-height:52px;padding:0 16px;margin-bottom:12px;border:1px solid var(--border);border-radius:16px;background:var(--surface);display:flex;align-items:center;gap:10px;color:var(--muted)}.search-field input{width:100%;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-weight:750}.category-tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:none}.category-tabs::-webkit-scrollbar{display:none}.category-tab{min-height:40px;padding:0 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--muted);font-weight:850;white-space:nowrap}.category-tab.is-active{background:var(--primary);border-color:var(--primary);color:#fff}.product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-bottom:150px}.product-tile{min-height:132px;padding:15px;border:1px solid var(--border);border-radius:20px;background:var(--surface);color:var(--text);text-align:left;display:flex;flex-direction:column;align-items:flex-start;box-shadow:0 5px 16px rgba(19,50,44,.05)}.product-tile:active{transform:scale(.985);border-color:var(--primary)}.product-icon{width:42px;height:42px;border-radius:14px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;font-size:1.15rem;font-weight:900}.product-title{margin-top:13px;font-weight:900;line-height:1.15}.product-price{margin-top:auto;padding-top:8px;color:var(--primary-strong);font-weight:900}.cart-panel{position:fixed;z-index:15;left:50%;bottom:calc(14px + var(--safe-bottom));transform:translateX(-50%);width:min(calc(100% - 24px),744px);padding:12px 14px;border:1px solid var(--border);border-radius:22px;background:rgba(255,255,255,.96);box-shadow:var(--shadow-lg);display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 12px}.cart-label{display:block;color:var(--muted);font-size:.68rem;font-weight:850;text-transform:uppercase;letter-spacing:.05em}.cart-total{font-size:1.18rem;font-weight:950}.cart-next{grid-column:1/-1;min-height:54px}.cart-next:disabled{opacity:.45;box-shadow:none}.summary-card{margin-top:12px;padding:18px}.item-row small{display:block;margin-top:4px;color:var(--muted);font-size:.78rem}.empty-state{grid-column:1/-1;padding:28px 16px;text-align:center;color:var(--muted);background:var(--surface);border:1px dashed var(--border);border-radius:20px}.compact-flow-head{margin-bottom:10px}
@media(min-width:700px){.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.product-tile{min-height:145px}}

/* UX-004: schneller Arbeitsmodus */
.catalog-page{padding-bottom:230px}.catalog-page .compact-flow-head{margin-bottom:12px}.catalog-page .flow-title{margin-top:2px}.product-tile{position:relative}.product-tile.is-in-cart{border-color:var(--primary);background:var(--primary);color:#fff;box-shadow:0 0 0 3px rgba(13,107,91,.14),var(--shadow-sm)}.product-tile.is-in-cart .product-icon{background:rgba(255,255,255,.18);color:#fff}.product-tile.is-in-cart .product-price{color:#fff}.tile-selected{position:absolute;right:12px;top:12px;width:32px;height:32px;border-radius:999px;background:#fff;color:var(--primary);display:grid;place-items:center;font-size:1rem;font-weight:950;box-shadow:0 3px 10px rgba(0,0,0,.12)}
.quick-cart{position:fixed;z-index:18;left:50%;bottom:calc(12px + var(--safe-bottom));transform:translateX(-50%);width:min(calc(100% - 24px),744px);padding:13px;border:1px solid var(--border);border-radius:25px;background:rgba(255,255,255,.97);box-shadow:var(--shadow-lg);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.quick-cart-summary{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px}.cart-toggle{border:0;background:transparent;color:var(--text);text-align:left;padding:2px 0;display:grid;gap:1px}.cart-toggle:disabled{opacity:.55}.cart-toggle .cart-label{font-size:.68rem;color:var(--muted);font-weight:900;letter-spacing:.06em;text-transform:uppercase}.cart-toggle strong{font-size:1rem}.cart-toggle-hint{font-size:.7rem;color:var(--primary);font-weight:800}.quick-cart .cart-total{font-size:1.35rem;font-weight:950}.quick-cart .cart-next{min-height:54px;margin-top:10px}.quick-cart .cart-next:disabled{background:#d9e1de;color:#82908c;box-shadow:none}.quick-cart-list{max-height:42vh;overflow:auto;margin:-2px -2px 12px;padding:2px}.quick-cart-row{padding:12px 4px;border-bottom:1px solid var(--border);display:grid;grid-template-columns:1fr auto;gap:9px 12px;align-items:center}.quick-cart-row:last-child{border-bottom:0}.quick-cart-name{display:grid;gap:2px}.quick-cart-name span{font-size:.76rem;color:var(--muted)}.quantity-control{display:grid;grid-template-columns:38px 28px 38px;align-items:center;text-align:center}.quantity-control button{width:38px;height:38px;border:0;border-radius:12px;background:var(--primary-soft);color:var(--primary-strong);font-size:1.15rem;font-weight:900}.remove-item{grid-column:1/-1;justify-self:start;border:0;background:transparent;color:var(--danger);padding:3px 0;font-size:.75rem;font-weight:850}
.checkout-page{padding-bottom:118px}.checkout-section{margin-bottom:14px;padding:18px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);box-shadow:0 4px 14px rgba(19,50,44,.04)}.checkout-section h2{margin:0 0 13px;font-size:1rem}.checkout-section h2 span{color:var(--muted);font-size:.72rem;font-weight:700}.section-title-row{display:flex;align-items:center;justify-content:space-between}.text-action{border:0;background:transparent;color:var(--primary);font-weight:850}.checkout-items{display:grid;gap:12px}.checkout-item{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding-top:12px;border-top:1px solid var(--border)}.checkout-item:first-child{padding-top:0;border-top:0}.checkout-item span{display:grid;gap:3px}.checkout-item small{color:var(--muted)}.mini-choice-grid{display:grid;gap:9px}.mini-choice{min-height:70px;padding:10px 12px;border:1px solid var(--border);border-radius:16px;background:#fff;color:var(--text);display:grid;grid-template-columns:42px 1fr;align-items:center;gap:11px;text-align:left}.mini-choice.is-selected,.payment-choice.is-selected{border-color:var(--primary);background:var(--primary-soft);box-shadow:0 0 0 2px rgba(13,107,91,.08)}.mini-choice-icon{width:42px;height:42px;border-radius:13px;background:var(--surface-soft);display:grid;place-items:center;color:var(--primary);font-weight:900}.mini-choice span:last-child{display:grid;gap:2px}.mini-choice small{color:var(--muted)}.payment-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.payment-choice{min-height:76px;border:1px solid var(--border);border-radius:16px;background:#fff;color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}.payment-choice>span{font-size:1.2rem;color:var(--primary)}.checkout-total{margin:18px 0;padding:18px 4px;display:flex;align-items:center;justify-content:space-between;font-size:1.05rem}.checkout-total strong{font-size:1.65rem}.checkout-action{position:fixed;z-index:17;left:50%;bottom:calc(12px + var(--safe-bottom));transform:translateX(-50%);width:min(calc(100% - 40px),720px)}
@media (min-width:700px){.mini-choice-grid{grid-template-columns:repeat(3,1fr)}.mini-choice{grid-template-columns:42px 1fr}.catalog-page{padding-bottom:220px}}

/* UX-004a: Auswahl-Rückmeldung */
.product-tile.is-in-cart:active{background:var(--primary-strong)}


/* UX-005: eigener Bearbeitungsbildschirm für Belegpositionen */
.cart-editor-page{padding-bottom:150px}
.editor-list{display:grid;gap:12px}
.editor-item{padding:17px;border:1px solid var(--border);border-radius:20px;background:var(--surface);box-shadow:0 5px 16px rgba(19,50,44,.05)}
.editor-item-main{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:start}
.editor-item-main>div{display:grid;gap:4px}
.editor-item-main>div>strong{font-size:1rem;line-height:1.2}
.editor-item-main span{color:var(--muted);font-size:.78rem}
.editor-line-total{font-size:1.05rem;white-space:nowrap}
.editor-item-actions{margin-top:15px;padding-top:14px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:12px}
.editor-quantity{display:grid;grid-template-columns:46px 44px 46px;align-items:center;text-align:center}
.editor-quantity button{width:46px;height:44px;border:0;border-radius:14px;background:var(--primary-soft);color:var(--primary-strong);font-size:1.25rem;font-weight:950}
.editor-quantity strong{font-size:1.05rem}
.editor-remove{min-height:44px;padding:0 10px;border:0;background:transparent;color:var(--danger);font-weight:850}
.editor-total{margin:18px 2px 0;padding:18px 4px;display:flex;justify-content:space-between;align-items:center;font-size:1.05rem}
.editor-total strong{font-size:1.7rem}
.editor-actions{position:fixed;z-index:17;left:50%;bottom:calc(12px + var(--safe-bottom));transform:translateX(-50%);width:min(calc(100% - 24px),744px);padding:10px;border:1px solid var(--border);border-radius:24px;background:rgba(255,255,255,.97);box-shadow:var(--shadow-lg);display:grid;grid-template-columns:.9fr 1.1fr;gap:9px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.editor-actions .button{min-height:54px;padding-inline:10px}
@media(max-width:390px){.editor-actions{grid-template-columns:1fr}.editor-actions .button-secondary{display:none}.cart-editor-page{padding-bottom:100px}}


/* UX-006: unterschiedliche Bearbeitung für Dienstleistungen und Produkte */
.item-type{display:inline-flex!important;width:max-content;padding:3px 8px;border-radius:999px;background:var(--primary-soft);color:var(--primary-strong)!important;font-size:.62rem!important;font-weight:900;text-transform:uppercase;letter-spacing:.05em}
.editor-item-actions{flex-wrap:wrap}
.editor-item-actions.no-quantity{justify-content:flex-end}
.fixed-quantity{margin-right:auto;min-height:44px;display:flex;align-items:center;color:var(--muted);font-weight:850}
.editor-price{min-height:44px;padding:0 11px;border:0;border-radius:13px;background:var(--primary-soft);color:var(--primary-strong);font-weight:850}
.price-editor{margin-top:15px;padding-top:15px;border-top:1px solid var(--border)}
.price-editor-title{margin:0 0 12px;font-weight:900}
.price-editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.price-editor label{display:grid;gap:6px}
.price-editor label>span{font-size:.72rem;color:var(--muted);font-weight:800}
.money-input{min-height:50px;padding:0 12px;border:1px solid var(--border);border-radius:14px;background:#fff;display:flex;align-items:center;gap:8px}
.money-input:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(13,107,91,.09)}
.money-input input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-weight:850}
.money-input>span{color:var(--primary-strong);font-weight:900}
.price-editor-note{margin:9px 0 0;color:var(--muted);font-size:.7rem;line-height:1.35}
.price-editor-actions{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.price-editor-actions .button{min-height:48px;padding:8px 10px}
@media(max-width:390px){
  .price-editor-grid{grid-template-columns:1fr}
  .editor-item-actions{display:grid;grid-template-columns:auto 1fr auto}
  .editor-item-actions.no-quantity{grid-template-columns:auto 1fr auto}
  .editor-price{justify-self:stretch}
  .editor-remove{padding-inline:5px}
}


/* UX-007: Rabatt wahlweise in Prozent oder Euro */
.price-mode-label{display:grid;gap:6px}
.price-mode-label>span,.discount-label{font-size:.72rem;color:var(--muted);font-weight:800}
.discount-block{margin-top:12px;display:grid;grid-template-columns:auto 104px 1fr;gap:10px;align-items:end}
.discount-switch{display:grid;grid-template-columns:1fr 1fr;padding:3px;border:1px solid var(--border);border-radius:14px;background:var(--surface-soft)}
.discount-switch button{min-height:44px;border:0;border-radius:11px;background:transparent;color:var(--muted);font-weight:950;font-size:1rem}
.discount-switch button.is-active{background:var(--primary);color:#fff;box-shadow:0 4px 12px rgba(13,107,91,.18)}
@media(max-width:430px){
  .discount-block{grid-template-columns:auto 104px;align-items:end}
  .discount-block .money-input{grid-column:1/-1}
}

/* UX-008 Kundenverwaltung */
.customer-toolbar{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.customer-new-button{min-height:54px;padding-inline:16px}.customer-list{display:grid;gap:10px;margin-top:14px}.customer-card{border:1px solid var(--border);border-radius:18px;background:var(--surface);overflow:hidden}.customer-card-main{width:100%;padding:14px;border:0;background:transparent;display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;text-align:left;align-items:center;color:var(--text)}.customer-avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary-strong);font-weight:950}.customer-avatar.large{width:64px;height:64px;font-size:1.15rem}.customer-card-text{display:grid;gap:2px;min-width:0}.customer-card-text small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.customer-card-meta{text-align:right;color:var(--muted);font-size:.7rem;line-height:1.45}.customer-none{width:100%;margin-top:12px;min-height:52px;border:1px dashed var(--primary);border-radius:16px;background:var(--primary-soft);color:var(--primary-strong);font-weight:900}.customer-form{padding-bottom:30px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-grid label{display:grid;gap:6px}.form-grid label span{font-size:.74rem;color:var(--muted);font-weight:800}.form-grid input,.form-grid textarea{width:100%;border:1px solid var(--border);border-radius:14px;padding:13px;background:#fff;font:inherit}.form-grid .full{grid-column:1/-1}.form-submit{width:100%;margin-top:18px}.customer-detail-card{display:flex;gap:14px;align-items:center;padding:18px;border:1px solid var(--border);border-radius:20px;background:var(--surface)}.customer-detail-card p{margin:3px 0;color:var(--muted)}.customer-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.customer-facts>div,.customer-note{padding:16px;border:1px solid var(--border);border-radius:18px;background:var(--surface)}.customer-facts span{display:block;color:var(--muted);font-size:.75rem}.selected-customer{padding:14px;border:1px solid var(--primary);border-radius:16px;background:var(--primary-soft);display:flex;justify-content:space-between;gap:12px;align-items:center}.selected-customer div{display:grid;gap:3px}.selected-customer small{color:var(--muted)}@media(max-width:520px){.customer-toolbar{grid-template-columns:1fr}.customer-new-button{width:100%}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.customer-card-main{grid-template-columns:44px minmax(0,1fr)}.customer-card-meta{grid-column:2;text-align:left}.customer-avatar{width:44px;height:44px}}


/* UX-009: professioneller, vollständig simulierter Belegabschluss */
.receipt-success-page{padding-bottom:40px}
.success-hero{text-align:center;padding:12px 0 20px}
.success-mark{width:86px;height:86px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:#fff;font-size:2.65rem;font-weight:950;box-shadow:0 16px 34px rgba(13,107,91,.22);animation:success-pop .38s cubic-bezier(.2,.8,.2,1)}
.success-hero h1{margin:7px auto 8px;max-width:620px;font-size:clamp(2rem,7vw,3.4rem);line-height:1.02}
.success-hero>p:last-child{margin:0;color:var(--muted)}
@keyframes success-pop{0%{transform:scale(.55);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.receipt-success-summary{display:grid;grid-template-columns:1fr 1fr;gap:1px;overflow:hidden;border:1px solid var(--border);border-radius:24px;background:var(--border);box-shadow:var(--shadow-sm)}
.receipt-success-summary>div{padding:16px;background:var(--surface);display:grid;gap:5px}
.receipt-success-summary span{color:var(--muted);font-size:.72rem;font-weight:800}
.receipt-success-summary strong{font-size:1rem;line-height:1.2}
.success-notice{margin-top:14px;padding:14px 16px;border-radius:16px;background:var(--primary-soft);color:var(--primary-strong);font-weight:800;text-align:center}
.success-actions{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.success-action-card{min-height:142px;padding:18px;border:1px solid var(--border);border-radius:22px;background:var(--surface);color:var(--text);text-align:left;display:grid;align-content:start;gap:8px;box-shadow:var(--shadow-sm)}
.success-action-card>span{width:48px;height:48px;border-radius:15px;background:var(--primary-soft);color:var(--primary-strong);display:grid;place-items:center;font-size:1.35rem;font-weight:900}
.success-action-card strong{font-size:1rem}
.success-action-card small{color:var(--muted);line-height:1.3}
.success-action-card.primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.success-action-card.primary>span{background:rgba(255,255,255,.16);color:#fff}
.success-action-card.primary small{color:rgba(255,255,255,.78)}
.success-secondary-actions{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.receipt-preview-page{padding-bottom:50px}
.receipt-paper{max-width:560px;margin:0 auto;padding:24px;border-radius:6px;background:#fff;box-shadow:0 18px 48px rgba(19,50,44,.14);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#1c2623}
.receipt-paper header{text-align:center;display:grid;gap:4px;padding-bottom:16px;border-bottom:1px dashed #9da9a5}
.receipt-paper header strong{font-size:1.2rem}
.receipt-paper header span,.receipt-paper-meta{font-size:.72rem;color:#66726e}
.receipt-paper-meta{padding:13px 0;display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed #9da9a5}
.receipt-paper-items{padding:7px 0}
.receipt-paper-items>div{padding:9px 0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;border-bottom:1px dotted #c2cbc8}
.receipt-paper-items span{display:grid;gap:3px}
.receipt-paper-items small{color:#66726e}
.receipt-paper-row{padding:10px 0;display:flex;justify-content:space-between;gap:14px}
.receipt-paper-total{margin-top:5px;padding:15px 0;border-top:2px solid #1c2623;display:flex;justify-content:space-between;align-items:center;font-size:1.2rem}
.receipt-paper footer{padding-top:22px;text-align:center;font-size:.72rem;color:#66726e}
.preview-download{max-width:560px;margin:16px auto 0}
@media(max-width:430px){
  .receipt-success-summary{grid-template-columns:1fr}
  .success-actions{grid-template-columns:1fr 1fr}
  .success-action-card{min-height:132px;padding:15px}
  .success-secondary-actions{grid-template-columns:1fr}
}
@media(max-width:360px){.success-actions{grid-template-columns:1fr}}


/* UX-010: dauerhaft sichtbare Live-Belegleiste */
.catalog-page{padding-bottom:calc(156px + var(--browser-bottom-offset))}
.live-receipt-bar{position:fixed;z-index:24;left:50%;bottom:calc(12px + var(--safe-bottom));transform:translateX(-50%);width:min(calc(100% - 20px),744px);padding:9px;border:1px solid var(--border);border-radius:23px;background:rgba(255,255,255,.97);box-shadow:0 16px 38px rgba(19,50,44,.18);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:center;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.live-receipt-summary{min-width:0;min-height:58px;padding:6px 8px;border:0;background:transparent;color:var(--text);display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;text-align:left}
.live-receipt-summary:disabled{opacity:.58}
.live-receipt-icon{width:42px;height:42px;border-radius:14px;background:var(--primary-soft);color:var(--primary-strong);display:grid;place-items:center;font-size:1.15rem;font-weight:950}
.live-receipt-text{min-width:0;display:grid;gap:2px}
.live-receipt-text strong{font-size:.95rem;white-space:nowrap}
.live-receipt-text small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:.68rem}
.live-receipt-total{font-size:1.16rem;white-space:nowrap;animation:receipt-total-in .18s ease-out}
.live-receipt-next{min-width:104px;min-height:56px;padding-inline:17px}
.live-receipt-next:disabled{background:#d9e1de;color:#82908c;box-shadow:none}
.live-receipt-bar.has-items .live-receipt-icon{background:var(--primary);color:#fff}
@keyframes receipt-total-in{from{transform:scale(.94);opacity:.65}to{transform:scale(1);opacity:1}}
@media(max-width:420px){
  .live-receipt-bar{grid-template-columns:minmax(0,1fr) 92px;gap:6px;padding:7px}
  .live-receipt-summary{grid-template-columns:38px minmax(0,1fr);gap:8px;padding-inline:5px}
  .live-receipt-icon{width:38px;height:38px;border-radius:12px}
  .live-receipt-total{grid-column:2;justify-self:start;font-size:1.05rem}
  .live-receipt-text small{display:none}
  .live-receipt-next{min-width:92px;padding-inline:12px}
}


/* UX-010a: iOS/Android Browserleisten berücksichtigen */
@media (display-mode: standalone){
  :root{--browser-bottom-offset:0px!important}
}
@media (display-mode: fullscreen){
  :root{--browser-bottom-offset:0px!important}
}

/* UX-010b: echter Safari-Fix – Leiste außerhalb des animierten Scrollbereichs */
.catalog-page.page-enter{animation:none!important;transform:none!important}
.live-receipt-bar{
  bottom:calc(12px + var(--safe-bottom) + 100vh - 100dvh)!important;
  transform:translateX(-50%) translateZ(0)!important;
  -webkit-transform:translateX(-50%) translateZ(0)!important;
  will-change:transform;
}
@media (display-mode: standalone),(display-mode: fullscreen){
  .live-receipt-bar{bottom:calc(12px + var(--safe-bottom))!important}
}


/* UX-010d – echter kompakter POS-Katalog */
body.catalog-mode .app-header {
  display: none !important;
}

body.catalog-mode .app-shell {
  padding-top: 0 !important;
}

body.catalog-mode .main-content {
  padding-top: 0 !important;
}

.catalog-page {
  padding-top: max(14px, env(safe-area-inset-top)) !important;
  padding-bottom: 120px !important;
}

.catalog-work-header {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.catalog-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
}

.catalog-back {
  min-height: 42px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-weight: 900;
}

.catalog-back span:first-child {
  font-size: 1.35rem;
}

.catalog-area {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  color: var(--text);
  font-size: .9rem;
  font-weight: 850;
}

.catalog-heading-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  gap: 14px;
}

.catalog-heading-line > div {
  min-width: 0;
}

.catalog-eyebrow {
  margin: 0 0 1px;
  color: var(--primary);
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.catalog-heading-line h1 {
  margin: 0;
  font-size: clamp(1.85rem, 8vw, 2.55rem);
  line-height: .98;
  letter-spacing: -.045em;
}

.catalog-heading-line > p {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.3;
  text-align: right;
}

.catalog-search-field {
  min-height: 54px !important;
  margin: 0 !important;
  border-radius: 18px !important;
}

.catalog-search-field input {
  font-size: .96rem !important;
}

.catalog-category-tabs {
  margin: 0 !important;
  padding-bottom: 2px;
}

.catalog-category-tabs .category-tab {
  min-height: 42px;
  padding: 0 17px;
  font-size: .9rem;
}

.catalog-product-grid {
  margin-top: 0 !important;
  gap: 10px !important;
}

.catalog-product-grid .product-tile {
  min-width: 0;
  min-height: 148px;
  padding: 15px;
  border-radius: 20px;
}

.catalog-product-grid .product-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
}

.catalog-product-grid .product-title {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: 1rem;
}

.catalog-product-grid .product-price {
  font-size: .94rem;
}

/* Eingeklappter Warenkorb: schmale Werkzeugleiste */
.compact-cart {
  position: fixed;
  z-index: 40;
  left: 12px;
  right: 12px;
  bottom: calc(10px + var(--safe-bottom) + 100vh - 100dvh);
  max-width: 760px;
  margin-inline: auto;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 14px 34px rgba(19,50,44,.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.compact-cart-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
}

.compact-cart-summary {
  min-width: 0;
  min-height: 50px;
  padding: 0 10px;
  border: 0;
  border-radius: 15px;
  background: transparent;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 7px;
  text-align: left;
  font: inherit;
}

.compact-cart-summary span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .88rem;
  font-weight: 850;
}

.compact-cart-summary strong {
  white-space: nowrap;
  font-size: .94rem;
  font-weight: 950;
}

.compact-cart-chevron {
  margin-left: auto;
  color: var(--muted);
  font-size: .88rem;
}

.compact-cart-summary:disabled {
  opacity: .48;
}

.compact-cart-next {
  min-width: 105px;
  min-height: 50px;
  padding: 0 16px;
  border: 0;
  border-radius: 15px;
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-size: .94rem;
  font-weight: 950;
}

.compact-cart-next:disabled {
  background: #d9e1de;
  color: #82908c;
}

.compact-cart-expanded {
  margin: 2px 2px 7px;
  padding: 11px 12px;
  border-radius: 14px;
  background: var(--primary-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.compact-cart-expanded > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.compact-cart-expanded span {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
}

.compact-cart-expanded strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .9rem;
}

.compact-cart-expanded button {
  min-height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: var(--surface);
  color: var(--primary-strong);
  font: inherit;
  font-size: .76rem;
  font-weight: 900;
  white-space: nowrap;
}

@media (display-mode: standalone), (display-mode: fullscreen) {
  .compact-cart {
    bottom: calc(10px + var(--safe-bottom));
  }
}

@media (max-width: 390px) {
  .catalog-heading-line {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .catalog-heading-line > p {
    text-align: left;
  }

  .catalog-product-grid .product-tile {
    min-height: 140px;
  }

  .compact-cart-summary {
    padding-inline: 8px;
  }

  .compact-cart-next {
    min-width: 96px;
    padding-inline: 13px;
  }
}


/* UX-011 – kompakte Arbeitsköpfe auf Folgeseiten */
body.work-mode:not(.catalog-mode) .app-header {
  display: none !important;
}

body.work-mode:not(.catalog-mode) .app-shell,
body.work-mode:not(.catalog-mode) .main-content {
  padding-top: 0 !important;
}

body.work-mode:not(.catalog-mode) .flow-page {
  padding-top: max(14px, env(safe-area-inset-top)) !important;
}

.compact-work-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "back back"
    "eyebrow copy"
    "title copy";
  align-items: end;
  gap: 2px 14px !important;
  margin-bottom: 18px !important;
}

.compact-work-head .button-back {
  grid-area: back;
  justify-self: start;
  min-height: 42px;
  margin: 0 0 8px !important;
  padding: 0 4px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 1rem;
}

.compact-work-head .eyebrow {
  grid-area: eyebrow;
  margin: 0 !important;
  font-size: .68rem !important;
  line-height: 1.1;
}

.compact-work-head .flow-title {
  grid-area: title;
  margin: 0 !important;
  font-size: clamp(1.85rem, 8vw, 2.55rem) !important;
  line-height: .98 !important;
  letter-spacing: -.045em !important;
}

.compact-work-head .page-copy {
  grid-area: copy;
  max-width: 250px;
  margin: 0 0 2px !important;
  font-size: .78rem !important;
  line-height: 1.3 !important;
  text-align: right;
}

/* Inhalt näher an den Kopf ziehen */
.work-mode .cart-editor-page .editor-list,
.work-mode .checkout-page .checkout-section:first-of-type,
.work-mode .customer-page .customer-toolbar,
.work-mode .customer-form-page .customer-form,
.work-mode .customer-detail-page .customer-detail-card,
.work-mode .receipt-preview-page .receipt-paper {
  margin-top: 0 !important;
}

/* Checkout kompakter */
.work-mode .checkout-page .checkout-section {
  padding: 18px !important;
  border-radius: 20px !important;
  margin-bottom: 12px !important;
}

.work-mode .checkout-page .checkout-section h2 {
  margin-bottom: 12px !important;
}

.work-mode .checkout-page .checkout-item {
  padding-block: 10px !important;
}

.work-mode .checkout-page .mini-choice {
  min-height: 72px !important;
}

.work-mode .checkout-page .payment-choice {
  min-height: 92px !important;
}

.work-mode .checkout-page .checkout-total {
  margin-block: 18px !important;
}

/* Positionseditor kompakter */
.work-mode .cart-editor-page .editor-item {
  padding: 18px !important;
  border-radius: 20px !important;
  margin-bottom: 12px !important;
}

.work-mode .cart-editor-page .editor-item-actions {
  padding-top: 14px !important;
}

/* Kundenbereich kompakter */
.work-mode .customer-page .customer-toolbar {
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.work-mode .customer-page .customer-card {
  margin-bottom: 10px !important;
}

.work-mode .customer-form-page .customer-form {
  padding: 18px !important;
  border-radius: 20px !important;
}

.work-mode .customer-detail-page .customer-detail-card,
.work-mode .customer-detail-page .customer-facts,
.work-mode .customer-detail-page .customer-note {
  margin-bottom: 12px !important;
}

/* PDF-Vorschau kompakter einleiten */
.work-mode .receipt-preview-page .receipt-paper {
  margin-top: 8px !important;
}

@media (max-width: 430px) {
  .compact-work-head {
    grid-template-columns: 1fr;
    grid-template-areas:
      "back"
      "eyebrow"
      "title"
      "copy";
    gap: 2px !important;
  }

  .compact-work-head .page-copy {
    max-width: none;
    margin-top: 5px !important;
    text-align: left;
  }

  .work-mode .checkout-page .checkout-section,
  .work-mode .cart-editor-page .editor-item,
  .work-mode .customer-form-page .customer-form {
    padding: 16px !important;
  }
}


/* UX-012 – steuer- und rabattfähige Belegvorschau */
.receipt-paper header small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: .64rem;
  font-weight: 600;
  line-height: 1.35;
}

.receipt-paper-item em {
  display: block;
  margin-top: 4px;
  color: #a93628;
  font-size: .72rem;
  font-style: normal;
  font-weight: 800;
}

.receipt-paper-totals {
  padding: 14px 0 8px;
  border-top: 1px dashed #9ba8a4;
}

.receipt-paper-totals > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 4px 0;
  font-size: .78rem;
}

.receipt-paper-totals strong {
  white-space: nowrap;
}

.receipt-discount-total {
  color: #a93628;
}


/* UX-014 – Kunden bearbeiten und Belegtransparenz */
.customer-card {
  position: relative;
}
.customer-card-edit {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  padding: 13px 18px;
  color: var(--primary);
  font: inherit;
  font-weight: 800;
  text-align: right;
}
.customer-detail-actions {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.customer-filter-tabs {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  overflow-x: auto;
  padding: 1px 0 3px;
}
.customer-filter-tabs button {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: .76rem;
  font-weight: 850;
}
.customer-filter-tabs button.is-active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}
.customer-name-line {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.customer-name-line > strong { min-width: 0; overflow-wrap: anywhere; }
.customer-status {
  display: inline-flex;
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: .62rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1.2;
}
.customer-status.is-active { background: var(--primary-soft); color: var(--primary-strong); }
.customer-status.is-disabled { background: #ecefed; color: #59645f; }
.customer-card.is-disabled { background: #f8f9f8; }
.customer-card.is-disabled .customer-avatar { background: #e7ebe9; color: #68736e; }
.selected-customer-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.selected-customer small {
  display: block;
}
.receipt-summary div small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
}
.receipt-paper-customer {
  padding: 13px 0;
  border-top: 1px dashed #9ba8a4;
}
.receipt-paper-customer > span,
.receipt-paper-customer > strong,
.receipt-paper-customer > small {
  display: block;
}
.receipt-paper-customer > strong {
  margin-top: 4px;
}
.receipt-paper-customer > small {
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.35;
}
.receipt-paper-item em {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #a93628;
}
.receipt-paper-item em b {
  white-space: nowrap;
}


/* UX-016: kompakte Kundenhistorie */
.customer-facts {
  grid-template-columns: 1fr 1fr;
}
.customer-facts .customer-turnover {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: end;
}
.customer-history {
  margin: 12px 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}
.customer-history-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: end;
  margin-bottom: 10px;
}
.customer-history-head h2 {
  margin: 0;
  font-size: 1rem;
}
.customer-history-head p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: .72rem;
}
.customer-history-head > strong {
  color: var(--primary-strong);
  white-space: nowrap;
}
.customer-history-list {
  display: grid;
}
.customer-history-item {
  border-top: 1px solid var(--border);
}
.customer-history-item > button {
  width: 100%;
  padding: 11px 0;
  border: 0;
  background: transparent;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  font: inherit;
}
.customer-history-item > button > span {
  display: grid;
  gap: 2px;
}
.customer-history-item > button > span:last-child {
  text-align: right;
}
.customer-history-item small {
  color: var(--muted);
  font-size: .68rem;
}
.customer-history-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 0 11px;
}
.customer-history-detail span {
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: .68rem;
  font-weight: 800;
}


/* UX-017 – Belegverwaltung */
.receipts-page {
  width: min(100%, 780px);
  margin: 0 auto;
  padding: 8px 0 24px;
}
.receipt-list-head h1 {
  margin: 2px 0 4px;
  font-size: clamp(2.25rem, 10vw, 3.5rem);
  line-height: .98;
}
.receipt-list-head > p:last-of-type {
  margin: 0 0 18px;
  color: var(--muted);
}
.receipt-search {
  margin-bottom: 12px;
}
.receipt-filter-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.receipt-filter-tabs button {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  padding: 10px 14px;
  font: inherit;
  font-weight: 800;
}
.receipt-filter-tabs button.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}
.receipt-list-summary {
  display: flex;
  justify-content: space-between;
  margin: 18px 2px 10px;
  color: var(--muted);
}
.receipt-list-summary strong {
  color: var(--text);
}
.receipt-admin-list {
  display: grid;
  gap: 10px;
}
.receipt-admin-card {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  padding: 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--text);
  text-align: left;
  font: inherit;
}
.receipt-card-main,
.receipt-card-side {
  display: grid;
  gap: 4px;
}
.receipt-card-main strong {
  font-size: 1rem;
}
.receipt-card-main small {
  color: var(--muted);
  font-size: .7rem;
}
.receipt-card-number {
  color: var(--primary-strong);
  font-weight: 900;
  font-size: .72rem;
}
.receipt-card-side {
  text-align: right;
  justify-items: end;
  white-space: nowrap;
}
.receipt-status {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: .62rem;
  font-weight: 900;
}
.receipt-status.is-paid { background: var(--primary-soft); color: var(--primary-strong); }
.receipt-status.is-open { background: #fff0c8; color: #755100; }
.receipt-status.is-cancelled { background: #fbe0dc; color: #9b2c20; }
.receipt-status.is-credit { background: #e7e4fb; color: #4a3c92; }
.receipt-status.is-partial { background: #fde9d1; color: #8a4b00; }
.receipt-detail-status {
  margin: 0 0 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.receipt-detail-status > strong {
  font-size: 1.4rem;
}
.receipt-detail-card {
  margin-bottom: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
}
.receipt-detail-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  color: var(--muted);
}
.receipt-detail-row strong,
.receipt-detail-row button {
  color: var(--text);
  text-align: right;
  font: inherit;
  font-weight: 900;
}
.receipt-detail-row button {
  border: 0;
  background: transparent;
  color: var(--primary-strong);
}
.receipt-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.receipt-section-title h2 {
  margin: 0;
  font-size: 1.1rem;
}
.receipt-detail-items > div,
.related-receipt {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border: 0;
  border-top: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
}
.receipt-detail-items span,
.related-receipt span {
  display: grid;
  gap: 2px;
}
.receipt-detail-items small,
.related-receipt small {
  color: var(--muted);
  font-size: .7rem;
}
.receipt-detail-total {
  border-top: 2px solid var(--text);
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  font-size: 1.15rem;
}
.activity-log > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.activity-log small { color: var(--muted); }
.receipt-primary-actions {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}
.receipt-correction-card {
  padding: 18px;
  border: 1px solid #efc7c1;
  border-radius: 20px;
  background: #fffafa;
}
.receipt-correction-card h2 { margin: 3px 0 5px; }
.receipt-correction-card > p:not(.eyebrow) { color: var(--muted); margin: 0 0 14px; }
.receipt-correction-card .button + .button { margin-top: 8px; }
.button-danger-outline {
  background: transparent;
  border: 2px solid #aa3326;
  color: #aa3326;
}
.receipt-action-notice { margin-top: 12px; }
.credit-mode-card {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}
.credit-mode-card button {
  width: 100%;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  display: grid;
  gap: 4px;
}
.credit-mode-card button span { color: var(--muted); }
.credit-mode-card button.is-active {
  border: 2px solid var(--primary);
  background: var(--primary-soft);
}
.credit-form,
.credit-full-summary {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
}
.credit-form {
  display: grid;
  gap: 14px;
}
.credit-form label {
  display: grid;
  gap: 7px;
  font-weight: 800;
}
.credit-form input {
  width: 100%;
  min-height: 54px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  font: inherit;
}
.credit-form > p,
.credit-full-summary > p {
  color: var(--muted);
  font-size: .78rem;
}
.credit-full-summary > strong {
  display: block;
  margin: 18px 0;
  font-size: 2rem;
}
.customer-history-detail button {
  padding: 5px 10px;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: white;
  font: inherit;
  font-size: .68rem;
  font-weight: 900;
}


/* UX-018 – Kunden-Belegverlauf als kompaktes Akkordeon */
.customer-history-accordion {
  overflow: hidden;
  padding: 0;
}
.customer-history-toggle {
  width: 100%;
  min-height: 78px;
  border: 0;
  background: var(--surface);
  color: var(--text);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  font: inherit;
}
.customer-history-toggle > span:first-child {
  display: grid;
  gap: 3px;
}
.customer-history-toggle strong {
  font-size: 1.1rem;
}
.customer-history-toggle small,
.customer-history-more {
  color: var(--muted);
  font-size: .72rem;
}
.customer-history-chevron {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  display: grid;
  place-items: center;
  font-weight: 900;
}
.customer-history-panel {
  border-top: 1px solid var(--border);
  padding: 0 16px 16px;
}
.customer-history-right {
  justify-items: end;
}
.customer-history-item > button {
  align-items: center;
}
.customer-history-detail {
  display: grid;
  gap: 7px;
}
.customer-history-related {
  display: grid;
  gap: 6px;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.customer-history-related > strong {
  font-size: .75rem;
  color: var(--muted);
}
.customer-history-related button {
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--text);
  padding: 9px 10px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  text-align: left;
  font: inherit;
  font-size: .72rem;
}
.customer-history-open-receipt {
  width: 100%;
  margin-top: 5px;
}
.customer-history-more {
  margin: 12px 0 0;
  text-align: center;
}
.receipt-internal-notes textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  font: inherit;
  resize: vertical;
  margin-bottom: 10px;
}


/* UX-019 – zuverlässige In-App-Bestätigung statt Browser-confirm */
.dialog-backdrop {
  z-index: 9999;
}
.dialog {
  max-width: 430px;
}
.dialog-actions .button {
  min-height: 54px;
}

/* UX-020a – Gutscheinübersicht, Detail und feste Druckvorlage */
.voucher-overview {
  display: grid;
  gap: 14px;
  padding-bottom: 8px;
}
.voucher-overview-head p:last-child {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.45;
}
.voucher-sell-button {
  margin-top: 2px;
}
.voucher-search-field {
  margin: 2px 0 0;
}
.voucher-notice {
  padding: 13px 15px;
  border-radius: 15px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.45;
}
.voucher-list {
  display: grid;
  gap: 9px;
}
.voucher-list-item {
  width: 100%;
  min-height: 82px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 19px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 4px 14px rgba(19,50,44,.04);
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto 10px;
  align-items: center;
  gap: 11px;
  text-align: left;
}
.voucher-list-item:active {
  border-color: var(--primary);
  transform: translateY(1px);
}
.voucher-list-symbol {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  font-weight: 950;
}
.voucher-list-main,
.voucher-list-value {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.voucher-list-main > strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .9rem;
  letter-spacing: .02em;
}
.voucher-status {
  width: fit-content;
  font-size: .7rem;
  font-weight: 900;
}
.voucher-status.is-active {
  color: var(--primary-strong);
}
.voucher-status.is-redeemed {
  color: var(--muted);
}
.voucher-list-value {
  justify-items: end;
  white-space: nowrap;
}
.voucher-list-value small {
  color: var(--muted);
  font-size: .68rem;
}
.voucher-list-value strong {
  font-size: .95rem;
}
.voucher-list-arrow {
  color: var(--muted);
  font-size: 1.35rem;
}
.voucher-detail-page,
.voucher-preview-page {
  padding-bottom: 24px;
}
.voucher-identity-card,
.voucher-facts {
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.voucher-identity-card {
  margin-top: 12px;
  padding: 18px;
  display: grid;
  gap: 18px;
}
.voucher-code-block {
  display: grid;
  gap: 6px;
}
.voucher-code-block span,
.voucher-code-block small,
.voucher-qr-block small {
  color: var(--muted);
  font-size: .73rem;
}
.voucher-code-block strong {
  font-size: clamp(1.25rem,6vw,1.7rem);
  letter-spacing: .055em;
  overflow-wrap: normal;
}
.voucher-qr-block {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 15px;
  align-items: center;
}
.voucher-qr-block > div:last-child {
  display: grid;
  gap: 5px;
  line-height: 1.4;
}
.voucher-local-note {
  margin: 0;
  padding: 12px;
  border-radius: 13px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.45;
}
.voucher-app-link {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: .67rem;
}
.voucher-facts {
  margin-top: 12px;
  padding: 4px 18px;
}
.voucher-facts > div {
  min-height: 58px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.voucher-facts > div:last-child {
  border-bottom: 0;
}
.voucher-facts span {
  color: var(--muted);
  font-size: .76rem;
}
.voucher-facts .voucher-balance strong {
  color: var(--primary-strong);
  font-size: 1.25rem;
}
.voucher-detail-actions {
  margin-top: 14px;
  display: grid;
  gap: 9px;
}
.voucher-detail-actions .button-primary {
  min-height: 58px;
}
.voucher-detail-actions .button-secondary {
  width: 100%;
}
.voucher-sheet {
  width: min(100%,620px);
  margin: 10px auto 0;
  padding: clamp(24px,7vw,48px);
  border: 1px solid #cad3d0;
  border-radius: 10px;
  background: #fff;
  color: #17211e;
  box-shadow: 0 12px 34px rgba(19,50,44,.1);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px 20px;
}
.voucher-sheet header {
  grid-column: 1/-1;
  display: grid;
  gap: 3px;
}
.voucher-sheet header > span {
  margin-bottom: 8px;
  color: var(--primary-strong);
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.voucher-sheet header > strong {
  font-size: 1.35rem;
}
.voucher-sheet header small {
  color: #596560;
}
.voucher-sheet-value,
.voucher-sheet-status,
.voucher-sheet-code {
  display: grid;
  align-content: start;
  gap: 6px;
}
.voucher-sheet-value span,
.voucher-sheet-status > span,
.voucher-sheet-code span {
  color: #596560;
  font-size: .72rem;
  font-weight: 800;
}
.voucher-sheet-value strong {
  font-size: clamp(2.2rem,10vw,4rem);
  letter-spacing: -.05em;
}
.voucher-sheet-status {
  grid-column: 1/-1;
  padding: 9px 11px;
  border-radius: 7px;
  background: #f1f5f3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.voucher-sheet-code strong {
  font-size: clamp(1.05rem,5vw,1.45rem);
  letter-spacing: .055em;
  overflow-wrap: normal;
}
.voucher-sheet-code {
  align-self: end;
}
.voucher-sheet-qr {
  grid-column: 2;
  grid-row: auto;
  display: grid;
  justify-items: center;
  gap: 7px;
}
.voucher-sheet-qr small {
  color: #596560;
  font-size: .62rem;
}
.voucher-sheet footer {
  grid-column: 1/-1;
  padding-top: 18px;
  border-top: 1px solid #dce2e0;
  color: #596560;
  font-size: .78rem;
  line-height: 1.45;
}
.voucher-print-button {
  width: min(100%,620px);
  margin: 14px auto 0;
}
@media(max-width:460px) {
  .voucher-list-item {
    grid-template-columns: 38px minmax(0,1fr) auto 8px;
    gap: 9px;
    padding: 12px 10px;
  }
  .voucher-list-symbol {
    width: 38px;
    height: 38px;
  }
  .voucher-list-main > strong {
    font-size: .78rem;
  }
  .voucher-list-value strong {
    font-size: .86rem;
  }
  .voucher-qr-block {
    grid-template-columns: 112px 1fr;
    gap: 12px;
  }
  .voucher-sheet {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .voucher-sheet-qr {
    grid-column: auto;
    grid-row: auto;
    justify-items: start;
  }
}
@media print {
  @page { margin: 14mm; }
  body * { visibility: hidden !important; }
  .voucher-sheet,
  .voucher-sheet * { visibility: visible !important; }
  .voucher-sheet {
    position: absolute;
    inset: 0 auto auto 0;
    width: 180mm;
    min-height: 100mm;
    margin: 0;
    padding: 16mm;
    border: 1px solid #777;
    box-shadow: none;
    break-inside: avoid;
  }
  body.receipt-preview-mode .receipt-paper,
  body.receipt-preview-mode .receipt-paper * { visibility: visible !important; }
  body.receipt-preview-mode .receipt-paper {
    position: absolute;
    inset: 0 auto auto 0;
    width: 72mm;
    margin: 0;
    padding: 6mm;
    border: 1px solid #777;
    box-shadow: none;
    break-inside: avoid;
  }
}

/* UX-020b – prototypischer Gutscheinverkauf */
.voucher-sale-page,
.voucher-sale-success-page {
  padding-bottom: 28px;
}
.voucher-sale-form {
  display: grid;
  gap: 12px;
}
.voucher-sale-section,
.voucher-sale-summary,
.voucher-sale-result {
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 4px 14px rgba(19,50,44,.04);
}
.voucher-sale-section h2,
.voucher-sale-summary h2 {
  margin: 0 0 13px;
  font-size: .94rem;
}
.voucher-amount-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 9px;
}
.voucher-amount-choice {
  min-height: 58px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-weight: 900;
}
.voucher-amount-choice.is-selected,
.voucher-payment-choice.is-selected {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-strong);
  box-shadow: 0 0 0 2px rgba(13,107,91,.08);
}
.voucher-amount-choice:disabled,
.voucher-payment-choice:disabled {
  opacity: .62;
}
.voucher-custom-amount {
  margin-top: 14px;
  display: grid;
  gap: 7px;
}
.voucher-custom-amount > span {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 800;
}
.voucher-custom-amount .money-input {
  min-height: 54px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: #fff;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  overflow: hidden;
}
.voucher-custom-amount input {
  min-width: 0;
  width: 100%;
  padding: 13px 4px 13px 14px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 1.1rem;
  font-weight: 900;
}
.voucher-custom-amount .money-input strong {
  padding: 0 15px;
  color: var(--muted);
}
.voucher-custom-amount small {
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.4;
}
.voucher-payment-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 9px;
}
.voucher-payment-choice {
  min-height: 68px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: #fff;
  color: var(--text);
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 8px;
  text-align: left;
  font: inherit;
}
.voucher-payment-choice > span {
  color: var(--primary);
  font-size: 1.15rem;
  text-align: right;
}
.voucher-sale-summary {
  display: grid;
  gap: 0;
}
.voucher-sale-summary > div {
  min-height: 44px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}
.voucher-sale-summary > div span {
  color: var(--muted);
  font-size: .77rem;
}
.voucher-sale-summary > div strong {
  text-align: right;
}
.voucher-sale-summary p {
  margin: 13px 0 0;
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.45;
}
.voucher-sale-error {
  padding: 13px 15px;
  border: 1px solid #f2c6c1;
  border-radius: 15px;
  background: #fff0ee;
  color: #8d2820;
  font-size: .8rem;
  font-weight: 800;
  line-height: 1.45;
}
.voucher-sale-submit {
  margin-top: 2px;
}
.voucher-sale-submit:disabled {
  background: #aebbb7;
  box-shadow: none;
}
.voucher-sale-completed-link {
  width: 100%;
}
.voucher-sale-success-hero {
  padding: 8px 0 18px;
  text-align: center;
}
.voucher-sale-success-hero .success-mark {
  width: 72px;
  height: 72px;
  margin-bottom: 15px;
  font-size: 2.1rem;
}
.voucher-sale-success-hero h1 {
  font-size: clamp(2rem,9vw,3rem);
}
.voucher-sale-success-hero > p:last-child {
  margin: 10px auto 0;
  max-width: 520px;
  color: var(--muted);
  line-height: 1.45;
}
.voucher-sale-result {
  margin-top: 4px;
  display: grid;
  gap: 18px;
}
.voucher-sale-result-value {
  display: grid;
  gap: 4px;
}
.voucher-sale-result-value span,
.voucher-sale-result-meta span {
  color: var(--muted);
  font-size: .73rem;
}
.voucher-sale-result-value strong {
  color: var(--primary-strong);
  font-size: clamp(2rem,10vw,3.2rem);
  letter-spacing: -.045em;
}
.voucher-sale-result-meta {
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.voucher-sale-success-actions {
  margin-top: 14px;
  display: grid;
  gap: 9px;
}
.voucher-sale-success-actions .button-secondary,
.voucher-sale-success-actions .button-ghost {
  width: 100%;
}
@media(max-width:350px) {
  .voucher-sale-section,
  .voucher-sale-summary,
  .voucher-sale-result {
    padding: 14px;
  }
  .voucher-amount-grid {
    grid-template-columns: 1fr;
  }
  .voucher-payment-choice {
    grid-template-columns: 28px 1fr;
  }
}

/* BACKUP-001 – verschlüsselte Gesamtsicherung und atomare Wiederherstellung */
.backup-page { max-width: 720px; }
.backup-intro,
.backup-card {
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 21px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.backup-intro {
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.backup-intro > span {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--primary-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  font-weight: 950;
}
.backup-intro p,
.backup-card-copy,
.backup-safety-card p,
.backup-destructive-warning p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.5;
}
.backup-card {
  margin: 0 0 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}
.backup-card > .settings-card-title,
.backup-card > .backup-card-copy,
.backup-card > .backup-passphrase-warning,
.backup-card > .button,
.backup-card > .backup-selected-file,
.backup-card > .backup-inline-form,
.backup-card > .backup-file-picker,
.backup-card > .backup-preview,
.backup-card > .backup-safety-card,
.backup-card > .backup-restore-confirm {
  grid-column: 1 / -1;
}
.backup-card .setting-field > small {
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.4;
}
.backup-passphrase-warning,
.backup-destructive-warning {
  padding: 13px 14px;
  border-radius: 15px;
  background: #fff5df;
  color: #6e4c05;
}
.backup-passphrase-warning p,
.backup-destructive-warning p { color: #735c2a; }
.backup-passphrase-warning {
  border: 1px solid #c7d8d0;
  background: #f3f7f5;
  color: var(--text);
}
.backup-passphrase-warning p { color: var(--muted); }
.backup-card > .button,
.backup-inline-form > .button,
.backup-restore-confirm > .button { width: 100%; }
.backup-file-picker {
  min-width: 0;
  min-height: 128px;
  padding: 18px;
  border: 2px dashed #a6c8bb;
  border-radius: 17px;
  background: var(--primary-soft);
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 5px;
  text-align: center;
  cursor: pointer;
}
.backup-file-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.backup-file-picker > span { color: var(--primary); font-size: 1.55rem; font-weight: 950; }
.backup-file-picker small { color: var(--muted); font-size: .7rem; }
.backup-selected-file,
.backup-preview-head {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 15px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.backup-selected-file > span,
.backup-preview-head > span {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e5f4eb;
  color: #17633f;
  display: grid;
  place-items: center;
  font-weight: 950;
}
.backup-selected-file > div,
.backup-preview-head > div { min-width: 0; display: grid; gap: 3px; }
.backup-selected-file strong,
.backup-preview-head strong,
.backup-selected-file small,
.backup-preview-head small { overflow-wrap: anywhere; }
.backup-selected-file small,
.backup-preview-head small { color: var(--muted); font-size: .68rem; }
.backup-selected-file button {
  min-height: 42px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--primary);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}
.backup-inline-form,
.backup-restore-confirm { display: grid; gap: 11px; }
.backup-preview { min-width: 0; display: grid; gap: 11px; }
.backup-preview-head { grid-template-columns: 36px minmax(0, 1fr); background: #f1f8f4; }
.backup-preview dl {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 15px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.backup-preview dl > div {
  min-width: 0;
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  display: grid;
  gap: 3px;
}
.backup-preview dl > div:nth-child(odd) { border-right: 1px solid var(--border); }
.backup-preview dl > div:nth-last-child(-n + 2) { border-bottom: 0; }
.backup-preview dt { color: var(--muted); font-size: .66rem; }
.backup-preview dd { min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: .78rem; font-weight: 850; }
.backup-company-identity { display: grid; gap: 2px; }
.backup-company-identity small { color: var(--muted); font-size: .68rem; font-weight: 750; }
.backup-safety-card {
  padding: 14px;
  border: 1px solid #bad5c9;
  border-radius: 16px;
  background: #f3f9f6;
  display: grid;
  gap: 12px;
}
.backup-restore-confirm > label {
  min-height: 56px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.4;
}
.backup-restore-confirm input { width: 21px; height: 21px; accent-color: var(--danger); }
.backup-restore-confirm .button-danger { min-height: 58px; }
@media(max-width:520px) {
  .backup-card { grid-template-columns: 1fr; padding: 15px; }
  .backup-card > * { grid-column: 1 !important; }
}
@media(max-width:350px) {
  .backup-intro { grid-template-columns: 38px minmax(0, 1fr); padding: 14px; }
  .backup-intro > span { width: 38px; height: 38px; }
  .backup-selected-file { grid-template-columns: 32px minmax(0, 1fr); }
  .backup-selected-file > button { grid-column: 2; justify-self: start; padding: 0; }
  .backup-preview dl { grid-template-columns: 1fr; }
  .backup-preview dl > div,
  .backup-preview dl > div:nth-child(odd),
  .backup-preview dl > div:nth-last-child(-n + 2) { border-right: 0; border-bottom: 1px solid var(--border); }
  .backup-preview dl > div:last-child { border-bottom: 0; }
}

/* UX-024 · Branding- und Katalog-Feinschliff */
.company-logo-default-note {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.5;
}
.business-branding-card {
  grid-column: 1 / -1;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--surface-soft);
  display: grid;
  gap: 13px;
}
.business-branding-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.business-branding-title h3,
.business-branding-title p {
  margin: 0;
}
.business-branding-title h3 {
  font-size: .86rem;
}
.business-branding-title p {
  margin-top: 3px;
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.4;
}
.business-branding-title > span,
.branding-preview-label {
  flex: 0 0 auto;
  color: var(--primary-strong);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.business-logo-options {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.business-logo-options legend {
  width: 100%;
  margin-bottom: 7px;
  color: var(--text);
  font-size: .72rem;
  font-weight: 850;
}
.business-logo-options label {
  min-width: 0;
  min-height: 64px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}
.business-logo-options label:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.business-logo-options input {
  margin-top: 2px;
}
.business-logo-options label span {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.business-logo-options strong {
  overflow-wrap: anywhere;
  font-size: .7rem;
  line-height: 1.35;
}
.business-logo-options small,
.business-logo-simulation small {
  color: var(--muted);
  font-size: .62rem;
  line-height: 1.35;
}
.business-logo-simulation {
  min-width: 0;
  display: flex;
  gap: 10px;
  align-items: center;
}
.business-logo-simulation[hidden] {
  display: none;
}
.business-logo-simulation .button {
  min-width: 0;
  min-height: 46px;
}
.branding-live-preview {
  min-width: 0;
  padding: 14px;
  border: 1px solid #cbd3d0;
  border-radius: 7px;
  background: #fff;
  color: #1c2623;
  box-shadow: 0 9px 24px rgba(19,50,44,.08);
  display: grid;
  gap: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.branding-preview-head {
  min-width: 0;
  padding-bottom: 11px;
  border-bottom: 1px dashed #9da9a5;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
.branding-preview-head > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.branding-preview-head strong,
.branding-preview-head small,
.branding-preview-head em {
  overflow-wrap: anywhere;
}
.branding-preview-head > div > strong {
  font-size: .78rem;
}
.branding-preview-head small {
  color: #66726e;
  font-size: .62rem;
  line-height: 1.35;
}
.branding-live-preview footer {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 10px;
  align-items: baseline;
}
.branding-live-preview footer span {
  color: #66726e;
  font-size: .6rem;
}
.branding-live-preview footer strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: .68rem;
  text-align: right;
}
.document-brand-logo {
  width: 62px;
  min-height: 54px;
  margin: 0 auto 5px;
  padding: 7px 5px;
  border: 1px solid currentColor;
  border-radius: 8px;
  color: #34413d;
  display: inline-grid;
  place-content: center;
  gap: 1px;
  text-align: center;
  font-family: ui-sans-serif, system-ui, sans-serif;
}
.document-brand-logo.is-compact {
  width: 50px;
  min-height: 44px;
  margin: 0;
  padding: 5px 4px;
}
.document-brand-logo strong {
  font-size: .78rem !important;
  line-height: 1;
}
.document-brand-logo small {
  color: inherit !important;
  font-size: .48rem !important;
  line-height: 1.1;
}
.document-visible-name {
  display: block;
  color: #1c2623;
  overflow-wrap: anywhere;
  font-size: .78rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1.35;
}
.company-identity-name,
.company-identity-owner { overflow-wrap: anywhere; }
.company-identity-owner { display: block; }
.receipt-paper header > .document-visible-name,
.voucher-sheet header > .document-visible-name,
.setup-test-receipt > .document-visible-name {
  text-align: center;
}
.setup-test-receipt > .document-brand-logo {
  margin-inline: auto;
}
.setup-template-guidance {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #efd49b;
  border-radius: 13px;
  background: #fff8e7;
  color: #745000;
  font-size: .7rem;
  font-weight: 750;
  line-height: 1.5;
}
@media(max-width:520px) {
  .business-logo-options {
    grid-template-columns: 1fr;
  }
  .business-logo-options label {
    min-height: 56px;
  }
}
@media(max-width:390px) {
  .business-branding-card,
  .branding-live-preview {
    padding: 12px;
  }
  .business-branding-title,
  .business-logo-simulation {
    align-items: stretch;
    flex-direction: column;
  }
  .business-logo-simulation .button {
    width: 100%;
  }
}
@media(max-width:350px) {
  .branding-preview-head {
    grid-template-columns: 1fr;
  }
  .branding-preview-head .document-brand-logo {
    margin-inline: auto;
  }
  .branding-preview-head > div {
    text-align: center;
  }
}

/* UX-023 – zentrale Katalogverwaltung und Vorlagenprüfung */
.checkout-open-payment,
.receipt-open-payment-action,
.open-payments-help {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.checkout-open-payment {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
}
.checkout-open-payment > div:first-child,
.receipt-open-payment-action > div,
.open-payments-help > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.checkout-open-payment small,
.checkout-open-payment p,
.receipt-open-payment-action p,
.open-payments-help p {
  margin: 0;
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.45;
}
.checkout-open-payment > .button { min-height: 44px; }
.checkout-open-confirm {
  grid-column: 1 / -1;
  padding: 12px;
  border-radius: 14px;
  background: #fff8e7;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.checkout-open-confirm p { grid-column: 1 / -1; color: #745000; font-weight: 800; }
.open-payments-help {
  margin: 12px 16px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.open-payment-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid #efd49b;
  border-radius: 18px;
  background: #fffdf7;
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.open-payment-card-main {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  font: inherit;
}
.open-payment-card-main > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.open-payment-card-main small,
.open-payment-card-main em,
.open-payment-card-main span span {
  color: var(--muted);
  overflow-wrap: anywhere;
  font-size: .67rem;
  font-style: normal;
  line-height: 1.35;
}
.open-payment-card-main em { color: var(--primary-strong); font-weight: 850; }
.open-payment-card > .button { min-height: 42px; padding: 8px 11px; white-space: nowrap; }
.receipt-open-payment-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border-color: #efd49b;
  background: #fff8e7;
}
.receipt-open-payment-action > .button { min-height: 44px; }
.payment-capture-sheet { display: grid; gap: 12px; }
.payment-capture-sheet > p { margin: 0; display: grid; gap: 3px; }
.payment-capture-sheet > p span,
.payment-capture-sheet > small { color: var(--muted); font-size: .7rem; line-height: 1.45; }
.payment-capture-sheet > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.payment-capture-sheet > div button {
  min-width: 0;
  min-height: 54px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  text-align: left;
  font: inherit;
}
.payment-capture-sheet > div button span { color: var(--primary-strong); font-weight: 900; text-align: center; }
.product-review-flag {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 5px;
  padding: 4px 7px;
  border-radius: 999px;
  background: #fff3d6;
  color: #805600;
  font-size: .62rem;
  font-weight: 900;
}
.catalog-area-picker {
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.catalog-readiness {
  margin-bottom: 12px;
  padding: 13px 14px;
  border: 1px solid #b9d9ca;
  border-radius: 16px;
  background: #eef8f3;
  color: var(--primary-strong);
  display: grid;
  gap: 3px;
}
.catalog-readiness.needs-review {
  border-color: #efd49b;
  background: #fff8e7;
  color: #745000;
}
.catalog-readiness.is-empty {
  border-color: var(--border);
  background: var(--surface-soft);
  color: var(--muted);
}
.catalog-readiness strong { font-size: .82rem; }
.catalog-readiness span { font-size: .7rem; line-height: 1.4; }
.catalog-manager-tabs {
  margin-bottom: 14px;
  padding: 4px;
  border-radius: 15px;
  background: #e9efed;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}
.catalog-manager-tabs button {
  min-width: 0;
  min-height: 43px;
  padding: 8px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .72rem;
  font-weight: 900;
}
.catalog-manager-tabs button.is-active {
  background: var(--surface);
  color: var(--primary-strong);
  box-shadow: var(--shadow-sm);
}
.catalog-manager-toolbar {
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-end;
}
.catalog-manager-toolbar h2,
.catalog-manager-toolbar p { margin: 0; }
.catalog-manager-toolbar h2 { font-size: 1rem; }
.catalog-manager-toolbar p {
  margin-top: 3px;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.4;
}
.catalog-create-actions {
  width: min(100%, 260px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.catalog-create-actions .button,
.catalog-manager-toolbar > .button {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  white-space: nowrap;
}
.catalog-manager-filters {
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.catalog-manager-filters .search-field { grid-column: 1 / -1; }
.catalog-manager-filters > label:not(.search-field) {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.catalog-manager-filters > label > span {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 850;
}
.catalog-manager-filters select {
  width: 100%;
  min-width: 0;
  min-height: 45px;
  padding: 9px 34px 9px 11px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .78rem;
}
.catalog-admin-list {
  display: grid;
  gap: 9px;
}
.catalog-admin-row {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}
.catalog-admin-row.needs-review {
  border-color: #efd49b;
  background: #fffdf7;
}
.catalog-admin-main {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.catalog-admin-main strong { overflow-wrap: anywhere; font-size: .86rem; }
.catalog-admin-main span {
  color: var(--muted);
  overflow-wrap: anywhere;
  font-size: .68rem;
  line-height: 1.4;
}
.catalog-admin-main em {
  color: #805600;
  font-size: .66rem;
  font-style: normal;
  font-weight: 850;
}
.catalog-row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.catalog-row-actions > button,
.catalog-row-actions > span button {
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  color: var(--primary-strong);
  font: inherit;
  font-size: .68rem;
  font-weight: 900;
}
.catalog-row-actions > span { display: flex; gap: 4px; }
.catalog-row-actions > span button {
  width: 38px;
  padding-inline: 0;
}
.catalog-row-actions button:disabled { opacity: .35; }
.catalog-item-form > .full,
#catalogCategoryForm > .full { grid-column: 1 / -1; }
.catalog-check-list {
  display: grid;
  gap: 8px;
}
.catalog-check-list label {
  min-width: 0;
  min-height: 50px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  font-size: .75rem;
  font-weight: 800;
  line-height: 1.35;
}
.catalog-check-list label.is-review,
.catalog-check-list label.zero-price-confirm:not([hidden]) {
  border-color: #efd49b;
  background: #fff8e7;
  color: #745000;
}
.catalog-check-list input {
  width: 21px;
  height: 21px;
  accent-color: var(--primary);
}
.catalog-editor-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.business-area-catalog-status {
  grid-column: 1 / -1;
  padding: 11px 12px;
  border: 1px solid #b9d9ca;
  border-radius: 14px;
  background: #eef8f3;
  color: var(--primary-strong);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  align-items: center;
}
.business-area-catalog-status.needs-review {
  border-color: #efd49b;
  background: #fff8e7;
  color: #745000;
}
.business-area-catalog-status strong,
.business-area-catalog-status small { min-width: 0; }
.business-area-catalog-status strong { font-size: .74rem; }
.business-area-catalog-status small {
  grid-column: 1;
  font-size: .66rem;
  line-height: 1.4;
}
.business-area-catalog-status button {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-height: 40px;
  padding: 7px 10px;
  border: 1px solid currentColor;
  border-radius: 11px;
  background: var(--surface);
  color: inherit;
  font: inherit;
  font-size: .68rem;
  font-weight: 900;
}
.template-data-preview {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface-soft);
  display: grid;
  gap: 9px;
}
.template-data-preview section,
.template-data-preview p { margin: 0; }
.template-data-preview section { display: grid; gap: 3px; }
.template-data-preview strong { font-size: .72rem; }
.template-data-preview p,
.template-data-preview small {
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.45;
}
.template-import-success { display: grid; gap: 9px; }
.template-import-success p { margin: 0 0 3px; line-height: 1.5; }
.template-import-success .button { width: 100%; }
.setup-test-warning {
  padding: 8px;
  border-radius: 10px;
  background: #fff8e7;
  color: #745000;
  font-size: .67rem;
  font-weight: 750;
}
@media(max-width:560px) {
  .catalog-manager-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .catalog-create-actions { justify-content: stretch; }
  .catalog-create-actions .button { flex: 1 1 0; }
  .catalog-admin-row { grid-template-columns: 1fr; }
  .catalog-row-actions { justify-content: flex-start; }
  .open-payment-card,
  .receipt-open-payment-action { grid-template-columns: 1fr; }
  .open-payment-card > .button,
  .receipt-open-payment-action > .button { width: 100%; }
}
@media(max-width:390px) {
  .checkout-open-payment { grid-template-columns: 1fr; }
  .checkout-open-payment > .button { width: 100%; }
  .checkout-open-confirm { grid-template-columns: 1fr; }
  .checkout-open-confirm p { grid-column: auto; }
  .open-payment-card-main { grid-template-columns: 1fr; }
  .payment-capture-sheet > div { grid-template-columns: 1fr; }
  .catalog-manager-filters { grid-template-columns: 1fr; }
  .catalog-manager-filters .search-field { grid-column: auto; }
  .catalog-editor-actions { grid-template-columns: 1fr; }
  .business-area-catalog-status { grid-template-columns: 1fr; }
  .business-area-catalog-status small,
  .business-area-catalog-status button { grid-column: 1; grid-row: auto; }
  .business-area-catalog-status button { width: 100%; }
}
@media(max-width:350px) {
  .catalog-create-actions { display: grid; grid-template-columns: 1fr; }
  .catalog-row-actions > button { flex: 1 1 auto; }
  .catalog-admin-row,
  .catalog-area-picker { padding: 11px; }
}

/* UX-022d – vollständiger Einstellungsbereich und wiederverwendbare Hilfe */
.settings-card-title {
  grid-column: 1 / -1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.settings-card-title h2 {
  margin: 0;
  font-size: .96rem;
  line-height: 1.3;
}
.context-help {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--primary);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 900;
  cursor: pointer;
}
.context-help:active { background: var(--primary-soft); }
.settings-entry-tools {
  display: grid;
  justify-items: end;
  gap: 4px;
}
.settings-entry-tools .context-help {
  width: 38px;
  height: 38px;
  background: var(--surface);
}
.settings-question {
  display: block;
  margin-bottom: 2px;
  line-height: 1.35;
}
.settings-standalone-title {
  margin-bottom: 9px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
.settings-logo-copy { min-width: 0; }
.logo-simulation-button {
  width: 100%;
  min-height: 44px;
  margin-top: 11px;
}
.logo-recommendations {
  grid-column: 1 / -1;
  padding-top: 13px;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: 5px 12px;
  font-size: .73rem;
  line-height: 1.45;
}
.logo-recommendations span,
.logo-recommendations small { color: var(--muted); }
.logo-recommendations small { grid-column: 1 / -1; margin-top: 3px; }
.bottom-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  padding: 18px 12px 0;
  background: rgba(12, 24, 21, .46);
  display: grid;
  align-items: end;
}
.bottom-sheet-backdrop[hidden] { display: none; }
.bottom-sheet {
  width: min(100%, 620px);
  max-height: min(82vh, 720px);
  margin: 0 auto;
  padding: 8px 16px calc(18px + var(--safe-bottom));
  border-radius: 24px 24px 0 0;
  background: var(--surface);
  box-shadow: 0 -18px 50px rgba(19, 50, 44, .22);
  overflow-y: auto;
}
.bottom-sheet-handle {
  width: 42px;
  height: 5px;
  margin: 0 auto 8px;
  border-radius: 99px;
  background: #ccd5d1;
}
.bottom-sheet-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 10px;
  align-items: center;
}
.bottom-sheet-head h2 {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 1.1rem;
  line-height: 1.25;
}
.bottom-sheet-close {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--text);
  font: inherit;
  font-size: 1.55rem;
  cursor: pointer;
}
.bottom-sheet-content { margin-top: 12px; }
.context-help-copy { display: grid; gap: 9px; }
.context-help-copy p {
  margin: 0;
  padding: 11px 12px;
  border-radius: 13px;
  background: var(--surface-soft);
  line-height: 1.45;
}
.template-choice-list { display: grid; gap: 8px; }
.template-choice-list button {
  width: 100%;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  display: grid;
  gap: 3px;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.template-choice-list button:first-child {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.template-choice-list small { color: var(--muted); }
.template-confirmation { display: grid; gap: 10px; }
.template-confirmation > p { margin: 0 0 3px; line-height: 1.5; }
.template-confirmation .button { width: 100%; }
.template-preview-simulation {
  padding: 13px;
  border: 1px dashed var(--primary);
  border-radius: 15px;
  background: var(--primary-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.template-preview-simulation strong,
.template-preview-simulation small { flex-basis: 100%; }
.template-preview-simulation span {
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--surface);
  font-size: .72rem;
  font-weight: 800;
}
.template-preview-simulation small { color: var(--muted); line-height: 1.4; }
.setup-summary em {
  width: max-content;
  max-width: 100%;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: .67rem;
  font-style: normal;
  font-weight: 900;
}
.setup-summary .is-complete em { background: #e7f5ed; color: #14643e; }
.setup-summary .is-incomplete em { background: #fff3d9; color: #855b00; }
.setup-finished > small { color: var(--muted); line-height: 1.4; }
.help-learning-list {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
}
.help-learning-list article {
  min-height: 70px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
}
.help-learning-list article:last-child { border-bottom: 0; }
.help-learning-list article > span {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--primary-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
  font-weight: 900;
}
.help-learning-list article > div { min-width: 0; display: grid; gap: 3px; }
.help-learning-list small { color: var(--muted); line-height: 1.35; }
.help-learning-list em {
  color: var(--muted);
  font-size: .65rem;
  font-style: normal;
  font-weight: 850;
}
@media(max-width:390px) {
  .bottom-sheet { padding-inline: 14px; }
  .logo-recommendations { grid-template-columns: 1fr; }
  .logo-recommendations small { grid-column: auto; }
}
@media(max-width:350px) {
  .settings-entry-tools .context-help { width: 34px; height: 34px; }
  .settings-pending-badge { display: none; }
  .help-learning-list article { grid-template-columns: 38px minmax(0, 1fr); padding-inline: 11px; }
  .help-learning-list article > span { width: 38px; height: 38px; }
  .help-learning-list em { grid-column: 2; }
}

.app-version {
  margin-top: 18px;
  padding: 18px 4px 4px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
}
.app-version strong { color: var(--text); font-size: .78rem; letter-spacing: .08em; }
.app-version span { font-size: .72rem; font-weight: 800; }
.app-version small { font-size: .65rem; overflow-wrap: anywhere; }

/* UX-022c: geführte Ersteinrichtung */
.setup-start-hint {
  margin-bottom: 12px;
  padding: 15px;
  border: 1px solid #b9d9ca;
  border-radius: 18px;
  background: #eef8f3;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
.setup-start-hint .button { width: 100%; }
.setup-start-hint .button-primary { grid-column: 1 / -1; }
.setup-start-hint .button-ghost { grid-column: 1 / -1; min-height: 40px; }
.setup-start-hint p { margin: 3px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.4; }
.setup-start-icon,
.setup-welcome-symbol {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 900;
}
.setup-restart { width: 100%; margin-bottom: 14px; }
.setup-page { width: min(100%, 680px); margin-inline: auto; }
.setup-head { display: grid; gap: 10px; margin-bottom: 18px; }
.setup-head > div:first-child { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.setup-head .eyebrow { margin: 0; }
.setup-head > div:first-child span { color: var(--muted); font-size: .78rem; font-weight: 800; }
.setup-head h1 { margin: 2px 0 0; font-size: clamp(1.65rem, 8vw, 2.25rem); line-height: 1.05; }
.setup-progress { height: 8px; border-radius: 99px; overflow: hidden; background: #e2e8e5; }
.setup-progress span { display: block; height: 100%; border-radius: inherit; background: var(--primary); transition: width .2s ease; }
.setup-form { gap: 14px; }
.setup-welcome,
.setup-info-card,
.setup-finished {
  padding: 24px 18px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 12px;
}
.setup-welcome h2,
.setup-info-card h2,
.setup-finished h2 { margin: 0; line-height: 1.2; }
.setup-welcome p,
.setup-info-card p,
.setup-finished p { margin: 0; color: var(--muted); line-height: 1.5; }
.setup-welcome ul { width: 100%; margin: 4px 0 0; padding-left: 22px; text-align: left; display: grid; gap: 7px; }
.setup-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 2px; }
.setup-actions .button { width: 100%; }
.setup-actions .button:only-of-type { grid-column: 1 / -1; }
.setup-cancel { grid-column: 1 / -1; min-height: 40px; border: 0; background: transparent; color: var(--muted); text-decoration: underline; font: inherit; font-weight: 750; cursor: pointer; }
.setup-tax-rate { display: grid; gap: 9px; }
.setup-tax-rate > span { font-weight: 900; }
.setup-choice-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.setup-choice-row label { min-height: 52px; padding: 10px; border: 1px solid var(--border); border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 7px; font-weight: 850; }
.setup-choice-row label:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.setup-choice-row input { width: 20px; height: 20px; accent-color: var(--primary); }
.setup-page .settings-option-list label > span { display: grid; gap: 3px; }
.setup-page .settings-option-list small { color: var(--muted); font-size: .7rem; line-height: 1.35; }
.setup-summary { display: grid; gap: 10px; }
.setup-summary article { padding: 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.setup-summary article > div { min-width: 0; display: grid; gap: 3px; }
.setup-summary span,
.setup-summary small { color: var(--muted); font-size: .74rem; }
.setup-summary strong { overflow-wrap: anywhere; }
.setup-summary button { min-height: 40px; padding: 6px 8px; border: 0; background: transparent; color: var(--primary); font: inherit; font-size: .8rem; font-weight: 900; text-decoration: underline; cursor: pointer; }
.setup-info-symbol { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-size: 1.4rem; font-weight: 950; }
.setup-info-card .button,
.setup-finished .button { width: 100%; }
.setup-test-receipt { width: min(100%, 380px); margin-inline: auto; padding: 22px 17px; border: 2px dashed #8e9994; border-radius: 8px; background: #fff; color: #1d211f; display: grid; gap: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; }
.setup-test-receipt h3,
.setup-test-receipt p { margin: 0; }
.setup-test-receipt h3 { display: grid; gap: 2px; }
.setup-test-receipt h3 .company-identity-owner { font-size: .72rem; font-weight: 600; }
.setup-test-label { padding: 7px; background: #1d211f; color: #fff; text-align: center; letter-spacing: .06em; }
.setup-test-line { padding-top: 9px; border-top: 1px dashed #777; display: flex; justify-content: space-between; gap: 10px; }
.setup-test-line.total { font-size: 1rem; }
@media(max-width:350px) {
  .setup-actions { grid-template-columns: 1fr; }
  .setup-actions .button,
  .setup-cancel { grid-column: 1; }
  .setup-summary article { padding: 11px; gap: 6px; }
  .setup-page .payment-setting-row { grid-template-columns: 34px minmax(0, 1fr) auto; padding-inline: 10px; }
  .setup-page .payment-setting-icon { width: 34px; height: 34px; }
}

/* UX-022b – Steuern, Zahlungsarten und Geschäftsbereiche */
.settings-save-notice.is-error {
  background: #fff1f0;
  color: var(--danger);
}
.settings-single-column {
  grid-template-columns: 1fr;
}
.settings-option-list {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 8px;
}
.settings-option-list legend {
  margin-bottom: 10px;
  padding: 0;
  font-weight: 900;
}
.settings-option-list label {
  min-height: 54px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  display: grid;
  grid-template-columns: 22px minmax(0,1fr);
  gap: 10px;
  align-items: center;
}
.settings-option-list label:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.settings-option-list input,
.tax-rate-row input,
.payment-setting-toggle input,
.business-area-controls input {
  width: 21px;
  height: 21px;
  accent-color: var(--primary);
}
.settings-neutral-note {
  margin: 0;
  color: var(--muted);
  font-size: .73rem;
  line-height: 1.45;
}
.tax-rate-list {
  display: grid;
  gap: 8px;
}
.tax-rate-row {
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}
.tax-rate-row label {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  font-weight: 800;
}
.receipt-number-preview {
  padding: 14px;
  border-radius: 15px;
  background: var(--primary-soft);
  display: grid;
  gap: 4px;
}
.receipt-number-preview.full {
  grid-column: 1/-1;
}
.receipt-number-preview span,
.receipt-number-preview small {
  color: var(--muted);
  font-size: .69rem;
}
.receipt-number-preview strong {
  color: var(--primary-strong);
  font-size: 1.15rem;
  letter-spacing: .02em;
}
.settings-fixed-values {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
}
.settings-fixed-values > div {
  min-height: 60px;
  padding: 12px 14px;
  display: grid;
  gap: 3px;
}
.settings-fixed-values > div + div {
  border-left: 1px solid var(--border);
}
.settings-fixed-values span {
  color: var(--muted);
  font-size: .7rem;
}
.settings-tse-note,
.business-model-note {
  padding: 13px 14px;
  border-radius: 15px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.45;
}
.payment-settings-list,
.business-area-list {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.payment-setting-row {
  min-height: 76px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto auto;
  gap: 10px;
  align-items: center;
}
.payment-setting-row:last-child,
.business-area-row:last-child {
  border-bottom: 0;
}
.payment-setting-row.is-later {
  background: var(--surface-soft);
}
.payment-setting-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  display: grid;
  place-items: center;
  font-weight: 950;
}
.payment-setting-name {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.payment-setting-name small {
  color: var(--muted);
  font-size: .66rem;
  line-height: 1.3;
}
.payment-setting-toggle {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .7rem;
  font-weight: 850;
}
.payment-order-actions {
  display: grid;
  grid-template-columns: repeat(2,40px);
  gap: 5px;
}
.payment-order-actions button {
  width: 40px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
  color: var(--primary-strong);
  font-size: 1rem;
  font-weight: 900;
}
.payment-order-actions button:disabled {
  opacity: .3;
}
.business-model-note {
  margin-bottom: 12px;
  display: grid;
  gap: 3px;
}
.business-model-note strong {
  color: var(--text);
}
.business-area-row {
  padding: 14px;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 12px;
  align-items: end;
}
.business-area-controls {
  display: grid;
  gap: 7px;
}
.business-area-controls label {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  font-weight: 850;
}
.business-area-add {
  width: 100%;
}
.receipt-paper footer small {
  display: block;
  margin-top: 7px;
  line-height: 1.4;
}
@media(max-width:520px) {
  .payment-setting-row {
    grid-template-columns: 40px minmax(0,1fr) auto;
  }
  .payment-setting-icon {
    width: 40px;
    height: 40px;
  }
  .payment-order-actions {
    grid-column: 2/-1;
    justify-content: end;
  }
}
@media(max-width:380px) {
  .payment-setting-row {
    grid-template-columns: 38px minmax(0,1fr);
  }
  .payment-setting-toggle {
    grid-column: 2;
  }
  .payment-order-actions {
    grid-column: 2;
    justify-content: start;
  }
  .business-area-row {
    grid-template-columns: 1fr;
  }
  .business-area-controls {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .settings-fixed-values {
    grid-template-columns: 1fr;
  }
  .settings-fixed-values > div + div {
    border-top: 1px solid var(--border);
    border-left: 0;
  }
}

/* UX-020c – konsolidierte Gutscheindetails und Historie */
.voucher-status.is-cancelled {
  color: var(--danger);
}
.voucher-list-value.is-unavailable strong,
.voucher-balance.is-unavailable strong {
  color: var(--muted);
}
.voucher-parties,
.voucher-history {
  margin-top: 12px;
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.voucher-section-title {
  margin-bottom: 13px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.voucher-section-title h2 {
  margin: 0;
  font-size: .96rem;
}
.voucher-section-title > span {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
}
.voucher-party-card,
.voucher-location-same {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  display: grid;
  gap: 3px;
}
.voucher-party-card > span,
.voucher-location-same > span {
  margin-bottom: 3px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.voucher-party-card small,
.voucher-location-same small {
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.4;
}
.voucher-party-card.is-redemption-location,
.voucher-location-same {
  margin-top: 9px;
  background: var(--surface-soft);
}
.voucher-history-list {
  display: grid;
}
.voucher-history-item {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0,1fr);
  gap: 10px;
  padding-bottom: 17px;
}
.voucher-history-item:last-child {
  padding-bottom: 0;
}
.voucher-history-item::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 12px;
  bottom: 0;
  width: 2px;
  background: var(--border);
}
.voucher-history-item:last-child::before {
  display: none;
}
.voucher-history-marker {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  border: 3px solid var(--surface);
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}
.voucher-history-full_redemption .voucher-history-marker,
.voucher-history-cancelled .voucher-history-marker {
  background: var(--muted);
  box-shadow: 0 0 0 1px var(--muted);
}
.voucher-history-main {
  min-width: 0;
  display: grid;
  gap: 10px;
}
.voucher-history-main > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.voucher-history-main time {
  color: var(--muted);
  font-size: .67rem;
  white-space: nowrap;
}
.voucher-history-main dl {
  margin: 0;
  padding: 10px 12px;
  border-radius: 13px;
  background: var(--surface-soft);
  display: grid;
  gap: 7px;
}
.voucher-history-main dl > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}
.voucher-history-main dt,
.voucher-history-main dd {
  margin: 0;
  font-size: .72rem;
}
.voucher-history-main dt {
  color: var(--muted);
}
.voucher-history-main dd {
  text-align: right;
  font-weight: 850;
}
.voucher-history-empty {
  margin: 0;
  color: var(--muted);
  font-size: .8rem;
}
.voucher-sheet-label {
  margin-top: 2px;
  font-size: .66rem !important;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.voucher-sheet-location {
  grid-column: 1/-1;
  padding: 12px 14px;
  border: 1px solid #dce2e0;
  border-radius: 8px;
  display: grid;
  gap: 3px;
}
.voucher-sheet-location > span {
  color: #596560;
  font-size: .67rem;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.voucher-sheet-location small {
  color: #596560;
  font-size: .7rem;
}
@media(max-width:380px) {
  .voucher-parties,
  .voucher-history {
    padding: 14px;
  }
  .voucher-history-main > div:first-child {
    display: grid;
    gap: 2px;
  }
  .voucher-history-main time {
    white-space: normal;
  }
}

/* UX-020d – kanonischer Verkauf, Kundenzuordnung und mobile Filter */
.voucher-filters {
  margin: 12px 0 10px;
  padding: 4px;
  border-radius: 16px;
  background: var(--surface-soft);
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 4px;
}
.voucher-filter {
  min-height: 46px;
  padding: 8px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .78rem;
  font-weight: 850;
}
.voucher-filter.is-active {
  background: var(--surface);
  color: var(--primary-strong);
  box-shadow: 0 2px 8px rgba(19,50,44,.1);
}
.voucher-search-note {
  margin: -3px 3px 10px;
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.4;
}
.voucher-sale-section h2 span {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 750;
}
.voucher-customer-choice {
  width: 100%;
  min-height: 58px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-soft);
  color: var(--text);
  display: grid;
  grid-template-columns: 30px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  text-align: left;
}
.voucher-customer-choice > span:nth-child(2),
.voucher-sale-customer > div:first-child {
  display: grid;
  gap: 2px;
}
.voucher-customer-choice small,
.voucher-sale-customer small,
.voucher-display-name small {
  color: var(--muted);
  font-size: .72rem;
}
.voucher-sale-customer {
  padding: 13px 14px;
  border: 1px solid var(--primary);
  border-radius: 16px;
  background: var(--primary-soft);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.voucher-sale-customer > div:last-child {
  display: grid;
  justify-items: end;
  gap: 5px;
}
.voucher-display-name {
  display: grid;
  gap: 7px;
}
.voucher-display-name > span {
  color: var(--muted);
  font-size: .74rem;
  font-weight: 800;
}
.voucher-display-name input {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.customer-toolbar.is-picker-only {
  grid-template-columns: 1fr;
}
.voucher-sheet-recipient {
  grid-column: 1/-1;
  padding: 14px;
  border-radius: 8px;
  background: #f1f5f3;
  display: grid;
  gap: 4px;
}
.voucher-sheet-recipient span {
  color: #596560;
  font-size: .67rem;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.voucher-sheet-recipient strong {
  font-size: 1.05rem;
}
@media(min-width:380px) {
  .voucher-filters {
    grid-template-columns: repeat(4,minmax(0,1fr));
  }
}
@media(max-width:360px) {
  .voucher-sale-customer {
    align-items: start;
    display: grid;
  }
  .voucher-sale-customer > div:last-child {
    grid-auto-flow: column;
    justify-content: start;
  }
}

/* UX-021 – Gutschein im normalen Beleg einlösen */
.voucher-status.is-partial {
  color: var(--primary-strong);
}
.checkout-voucher-section .section-title-row {
  align-items: baseline;
  gap: 12px;
}
.checkout-voucher-section .section-title-row > span {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
  text-align: right;
}
.checkout-voucher-code-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 9px;
  align-items: end;
}
.checkout-voucher-code-row label {
  min-width: 0;
  display: grid;
  gap: 6px;
}
.checkout-voucher-code-row label > span,
.checkout-remainder-payment > span {
  color: var(--muted);
  font-size: .7rem;
  font-weight: 850;
}
.checkout-voucher-code-row input {
  width: 100%;
  min-height: 52px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 800;
  letter-spacing: .02em;
}
.checkout-voucher-entry-actions {
  margin-top: 9px;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 9px;
}
.checkout-voucher-entry-actions .button {
  min-width: 0;
  padding-inline: 11px;
  flex-wrap: wrap;
  text-align: center;
}
.checkout-voucher-entry-actions small {
  color: var(--muted);
  font-size: .62rem;
}
.checkout-voucher-error {
  margin: 11px 0 0;
  padding: 11px 13px;
  border-radius: 13px;
  background: #fff1f0;
  color: var(--danger);
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.4;
}
.checkout-voucher-picker {
  margin-top: 11px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-soft);
  display: grid;
  gap: 8px;
}
.checkout-voucher-picker > p {
  margin: 1px 3px 3px;
  color: var(--muted);
  font-size: .69rem;
}
.checkout-voucher-picker > button {
  width: 100%;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  color: var(--text);
  display: flex;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
}
.checkout-voucher-picker > button > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.checkout-voucher-picker > button > span:last-child {
  justify-items: end;
}
.checkout-voucher-picker small {
  color: var(--muted);
  font-size: .68rem;
}
.checkout-voucher-selected {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--primary);
  border-radius: 17px;
  background: var(--primary-soft);
  display: grid;
  gap: 13px;
}
.checkout-voucher-selected-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.checkout-voucher-selected-head > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.checkout-voucher-selected-head small,
.checkout-voucher-selected dt {
  color: var(--muted);
  font-size: .68rem;
}
.checkout-voucher-selected dl,
.checkout-voucher-selected dd {
  margin: 0;
}
.checkout-voucher-selected dl {
  display: grid;
  gap: 7px;
}
.checkout-voucher-selected dl > div,
.checkout-voucher-calculation > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.checkout-voucher-selected dd {
  max-width: 60%;
  text-align: right;
  font-size: .75rem;
  font-weight: 850;
}
.checkout-voucher-calculation {
  padding-top: 12px;
  border-top: 1px solid rgba(13,107,91,.2);
  display: grid;
  gap: 8px;
  font-size: .8rem;
}
.checkout-voucher-calculation strong {
  text-align: right;
}
.checkout-voucher-remainder {
  margin-top: 2px;
  padding-top: 9px;
  border-top: 1px dashed rgba(13,107,91,.3);
  font-size: .92rem;
}
.checkout-remainder-payment {
  display: grid;
  gap: 8px;
}
.checkout-remainder-payment > div {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
}
.checkout-remainder-payment button {
  min-height: 50px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.checkout-remainder-payment button.is-selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(13,107,91,.08);
}
.receipt-paper-voucher-payment {
  padding: 10px 0;
  border-bottom: 1px dashed #9da9a5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.receipt-paper-voucher-payment > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.receipt-paper-voucher-payment small {
  color: #66726e;
  font-size: .68rem;
}
.receipt-paper-voucher-payment strong {
  font-size: .76rem;
}
@media(max-width:480px) {
  .payment-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}
@media(max-width:360px) {
  .checkout-voucher-code-row,
  .checkout-voucher-entry-actions {
    grid-template-columns: 1fr;
  }
  .checkout-voucher-code-row .button {
    width: 100%;
  }
  .checkout-voucher-section .section-title-row {
    align-items: start;
  }
}

/* UX-020d-1 – verknüpfter Verkaufsbeleg */
.receipt-card-kind {
  width: fit-content;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: .64rem;
  font-weight: 900;
}
.voucher-receipt-link {
  display: grid;
  gap: 10px;
}
.voucher-receipt-link p {
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.45;
}
.voucher-receipt-link .button {
  width: 100%;
}
.voucher-history-receipt-link {
  width: fit-content;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--primary);
  border-radius: 12px;
  background: var(--surface);
  color: var(--primary-strong);
  font: inherit;
  font-size: .72rem;
  font-weight: 900;
}

/* UX-020d-2 – gemeinsame Kassenzettelansicht */
.receipt-paper-kind,
.receipt-paper-voucher-link {
  padding: 10px 0;
  border-bottom: 1px dashed #9da9a5;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: baseline;
}
.receipt-paper-kind span,
.receipt-paper-voucher-link span {
  color: #66726e;
  font-size: .68rem;
}
.receipt-paper-kind strong,
.receipt-paper-voucher-link strong {
  text-align: right;
  font-size: .76rem;
}
.receipt-paper.is-voucher-sale .receipt-paper-total {
  margin-top: 10px;
}
@media(max-width:360px) {
  .receipt-paper {
    padding: 18px;
  }
  .receipt-paper-meta,
  .receipt-paper-kind,
  .receipt-paper-voucher-link,
  .receipt-paper-row {
    gap: 8px;
  }
}

/* UX-022a – Einstellungen, Unternehmensdaten und Leistungsort */
.settings-overview,
.settings-form-page {
  max-width: 760px;
  margin: 0 auto;
}
.settings-head {
  margin-bottom: 16px;
}
.settings-head > p:last-child {
  margin: 9px 0 0;
  color: var(--muted);
  line-height: 1.45;
}
.settings-list {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.settings-entry {
  width: 100%;
  min-height: 68px;
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  text-align: left;
}
.settings-entry:last-child {
  border-bottom: 0;
}
button.settings-entry:active {
  background: var(--primary-soft);
}
.settings-entry-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  display: grid;
  place-items: center;
  font-weight: 950;
}
.settings-entry > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.settings-entry small {
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.3;
}
.settings-entry-arrow {
  color: var(--primary);
  font-size: 1.35rem;
}
.settings-entry.is-pending {
  background: var(--surface-soft);
}
.settings-entry.is-pending .settings-entry-icon {
  background: #e8eeec;
  color: var(--muted);
}
.settings-pending-badge {
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: .64rem;
  font-weight: 850;
  white-space: nowrap;
}
.settings-form {
  display: grid;
  gap: 12px;
}
.settings-form [hidden] {
  display: none !important;
}
.settings-form-card {
  margin: 0;
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 21px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 13px;
}
.settings-form-card > h2,
.settings-form-card > legend {
  grid-column: 1/-1;
  margin: 0 0 2px;
  font-size: .96rem;
  font-weight: 900;
}
.settings-form-card > legend {
  padding: 0;
}
.setting-field {
  min-width: 0;
  display: grid;
  gap: 6px;
}
.setting-field.full {
  grid-column: 1/-1;
}
.setting-field > span {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
}
.setting-field > span small {
  font-size: .66rem;
  font-weight: 750;
}
.setting-field input,
.setting-field textarea {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.setting-field textarea {
  resize: vertical;
  line-height: 1.4;
}
.setting-field input:focus,
.setting-field textarea:focus {
  border-color: var(--primary);
  outline: 3px solid rgba(13,107,91,.09);
}
.settings-logo-card {
  grid-template-columns: 64px minmax(0,1fr);
  align-items: center;
}
.settings-logo-placeholder {
  width: 64px;
  height: 64px;
  border: 1px dashed var(--primary);
  border-radius: 17px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  display: grid;
  place-items: center;
  font-size: .72rem;
  font-weight: 900;
}
.settings-logo-card h2,
.settings-logo-card p {
  margin: 0;
}
.settings-logo-card p {
  margin-top: 5px;
  color: var(--muted);
  font-size: .74rem;
  line-height: 1.4;
}
.settings-save-notice,
.settings-company-location-note {
  margin-bottom: 12px;
  padding: 13px 14px;
  border-radius: 15px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.45;
}
.settings-company-location-note {
  margin: 0;
}
.settings-location-choice {
  grid-column: 1/-1;
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 9px;
}
.settings-location-choice legend {
  margin-bottom: 11px;
  font-weight: 900;
  line-height: 1.35;
}
.settings-location-choice label {
  min-height: 70px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 15px;
  display: grid;
  grid-template-columns: 24px minmax(0,1fr);
  gap: 10px;
  align-items: center;
}
.settings-location-choice input {
  width: 22px;
  height: 22px;
  accent-color: var(--primary);
}
.settings-location-choice label:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.settings-location-choice label > span {
  display: grid;
  gap: 3px;
}
.settings-location-choice small {
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.35;
}
.settings-save {
  margin-top: 2px;
}
@media(max-width:480px) {
  .settings-form-card {
    grid-template-columns: 1fr;
  }
  .setting-field.full,
  .settings-form-card > h2,
  .settings-form-card > legend {
    grid-column: auto;
  }
  .settings-logo-card {
    grid-template-columns: 58px minmax(0,1fr);
  }
  .settings-logo-placeholder {
    width: 58px;
    height: 58px;
  }
}
@media(max-width:350px) {
  .settings-entry {
    padding-inline: 11px;
    grid-template-columns: 38px minmax(0,1fr) auto;
    gap: 9px;
  }
  .settings-entry-icon {
    width: 38px;
    height: 38px;
  }
  .settings-pending-badge {
    padding-inline: 6px;
  }
}

/* UX-022e – mehrere Leistungsorte und Geschäftsbereichszuordnung */
.company-location-toggle,
.service-location-active-toggle {
  min-width: 0;
  min-height: 66px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface-soft);
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
.settings-form-card > .company-location-toggle {
  grid-column: 1 / -1;
}
.company-location-toggle input,
.service-location-active-toggle input,
.service-location-area-options input {
  width: 22px;
  height: 22px;
  accent-color: var(--primary);
}
.company-location-toggle > span,
.service-location-active-toggle > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.company-location-toggle small,
.service-location-active-toggle small {
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.35;
}
.service-location-explanation,
.company-location-state {
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.service-location-explanation > p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.5;
}
.company-location-state {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  font-size: .78rem;
  line-height: 1.4;
}
.company-location-state.is-active {
  border-color: #b9d9ca;
  background: #eef8f3;
  color: var(--primary-strong);
}
.company-location-state.is-inactive {
  background: var(--surface-soft);
  color: var(--muted);
}
.company-location-state button,
.service-location-card-head button {
  min-height: 42px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--primary-strong);
  font: inherit;
  font-size: .72rem;
  font-weight: 900;
}
.service-location-list,
.setup-location-overview {
  display: grid;
  gap: 10px;
}
.service-location-card,
.setup-location-overview article {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.service-location-card.is-inactive {
  background: var(--surface-soft);
}
.service-location-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.service-location-card-head > div,
.setup-location-overview article {
  display: grid;
  gap: 3px;
}
.service-location-card-head span,
.setup-location-overview span {
  color: var(--primary-strong);
  font-size: .66rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.service-location-card.is-inactive .service-location-card-head span {
  color: var(--muted);
}
.service-location-card h2 {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 1rem;
  line-height: 1.3;
}
.service-location-card > p {
  margin: 11px 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.45;
}
.service-location-area-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.service-location-area-tags span {
  max-width: 100%;
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  overflow-wrap: anywhere;
  font-size: .7rem;
  font-weight: 850;
}
.service-location-area-tags em {
  color: var(--danger);
  font-size: .72rem;
  font-style: normal;
  font-weight: 800;
}
.service-location-add {
  width: 100%;
  margin-top: 12px;
}
.settings-location-choice label.is-disabled {
  opacity: .56;
  background: var(--surface-soft);
}
.service-location-area-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.service-location-area-options label {
  min-width: 0;
  min-height: 52px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 13px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  font-size: .76rem;
  font-weight: 850;
}
.service-location-area-options label:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.business-area-location-field {
  grid-column: 1 / -1;
}
.setting-field select {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 11px 38px 11px 13px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background-color: var(--surface);
  color: var(--text);
  font: inherit;
}
.setting-field select:focus {
  border-color: var(--primary);
  outline: 3px solid rgba(13,107,91,.09);
}
.business-area-location-field > small,
.setup-location-overview small {
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.4;
}
.setup-location-overview article span {
  margin-top: 4px;
}
@media(max-width:390px) {
  .service-location-area-options {
    grid-template-columns: 1fr;
  }
  .company-location-state,
  .service-location-card-head {
    grid-template-columns: 1fr;
  }
  .company-location-state button,
  .service-location-card-head button {
    width: 100%;
  }
}
@media(max-width:350px) {
  .service-location-explanation,
  .company-location-state,
  .service-location-card,
  .setup-location-overview article {
    padding: 12px;
  }
  .company-location-toggle,
  .service-location-active-toggle {
    padding-inline: 10px;
  }
}

/* PERSIST-001a – lokale Einstellungspersistenz */
.persistence-loading {
  min-height: min(58vh, 420px);
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: left;
}
.persistence-loading-spinner {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border: 3px solid var(--primary-soft);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: persistence-spin .7s linear infinite;
}
.persistence-loading strong { display: block; }
.persistence-loading p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: .82rem;
}
@keyframes persistence-spin { to { transform: rotate(360deg); } }

.development-tools {
  margin-top: 18px;
  border: 1px dashed #d8aaa5;
  border-radius: 18px;
  background: #fffdfd;
  overflow: hidden;
}
.development-tools > summary {
  min-height: 52px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  color: var(--danger);
  font-size: .82rem;
  font-weight: 900;
  cursor: pointer;
}
.development-tools > summary::marker { color: var(--danger); }
.development-tools[open] { padding-bottom: 14px; }
.development-tools-warning {
  margin: 0 14px 4px;
  padding: 12px;
  border-radius: 14px;
  background: #fff1ef;
  display: grid;
  gap: 3px;
}
.development-tools-warning strong { font-size: .78rem; }
.development-tools-warning span {
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.4;
}
.development-reset-group {
  margin: 10px 14px 0;
  border: 1px solid #ead1ce;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.development-reset-group > summary {
  min-height: 46px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  color: var(--danger);
  font-size: .76rem;
  font-weight: 850;
  cursor: pointer;
}
.development-reset-group[open] { padding-bottom: 12px; }
.development-reset-group .settings-reset-card { margin-inline: 12px; }

.settings-reset-card {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid #f0c4c0;
  border-radius: 18px;
  background: #fffafa;
  display: grid;
  gap: 8px;
}
.settings-reset-card h2,
.settings-reset-card p { margin: 0; }
.settings-reset-card h2 { font-size: .95rem; }
.settings-reset-card p {
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.45;
}
.settings-reset-card small {
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.4;
}
.settings-reset-card .button {
  width: 100%;
  margin-top: 4px;
}

@media (max-width: 520px) {
  .catalog-manager-toolbar { align-items: stretch; flex-direction: column; }
  .catalog-create-actions { width: 100%; grid-template-columns: 1fr; }
}
.button:disabled,
button:disabled {
  cursor: wait;
  opacity: .62;
}

@media (prefers-reduced-motion:reduce) {
  .persistence-loading-spinner { animation: none; }
}

/* EXPORT-001 – lokale Exportprojektion und mobile Dateiausgabe */
.export-page { min-width: 0; }
.export-privacy {
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--primary-soft);
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.export-privacy > span {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--surface);
  color: var(--primary);
  display: grid;
  place-items: center;
  font-weight: 950;
}
.export-privacy strong,
.export-privacy p { margin: 0; }
.export-privacy p {
  margin-top: 4px;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.5;
}
.export-form {
  margin: 0 0 12px;
  display: grid;
  gap: 14px;
}
.export-choice-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.export-choice-group legend {
  width: 100%;
  margin-bottom: 8px;
  color: var(--text);
  font-size: .78rem;
  font-weight: 850;
}
.export-choice {
  min-width: 0;
  min-height: 88px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  cursor: pointer;
}
.export-choice:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 1px var(--primary);
}
.export-choice input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--primary);
}
.export-choice span,
.export-customer-option span,
.export-file > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.export-choice strong,
.export-customer-option strong,
.export-file strong { overflow-wrap: anywhere; }
.export-choice small,
.export-customer-option small,
.export-file small {
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.4;
}
.export-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.export-customer-option {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #f8faf9;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  cursor: pointer;
}
.export-customer-option input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--primary);
}
.export-format-note {
  padding: 12px 13px;
  border-radius: 15px;
  background: #f3f7f5;
}
.export-format-note strong,
.export-format-note p { margin: 0; }
.export-format-note p {
  margin-top: 3px;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.45;
}
.export-form > .button { width: 100%; }
.export-result {
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid #bcd7ca;
  border-radius: 20px;
  background: #f3faf6;
  box-shadow: var(--shadow-sm);
}
.export-result-head {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.export-result-head > span {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 950;
}
.export-result h2,
.export-result p { margin: 0; }
.export-result h2 { font-size: .95rem; }
.export-result-head p {
  margin-top: 3px;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.45;
}
.export-result-head small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.4;
}
.export-result-actions {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.export-result-action {
  min-width: 0;
  min-height: 92px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  text-align: left;
  cursor: pointer;
}
.export-result-action.is-primary {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}
.export-result-action > span:first-child {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--primary-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
  font-weight: 950;
}
.export-result-action.is-primary > span:first-child { background: rgba(255,255,255,.18); color: #fff; }
.export-result-action > span:last-child { min-width: 0; display: grid; gap: 3px; }
.export-result-action strong { overflow-wrap: anywhere; font-size: .76rem; line-height: 1.25; }
.export-result-action small { color: var(--muted); font-size: .66rem; line-height: 1.35; }
.export-result-action.is-primary small { color: rgba(255,255,255,.82); }
.export-result-action[aria-expanded="true"]:not(.is-primary) { border-color: var(--primary); background: var(--primary-soft); }
.export-result-panel {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #cbded5;
}
.export-result-panel h3,
.export-result-panel p { margin: 0; }
.export-result-panel h3 { font-size: .82rem; }
.export-result-panel > div:first-child > p { margin-top: 3px; color: var(--muted); font-size: .69rem; line-height: 1.4; }
.export-file-list {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
}
.export-file {
  width: 100%;
  min-width: 0;
  min-height: 60px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  text-align: left;
  cursor: pointer;
}
.export-file:last-child { border-bottom: 0; }
.export-file:active { background: var(--primary-soft); }
.export-file > span:first-child {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--primary-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
  font-weight: 950;
}
.export-file em {
  color: var(--primary);
  font-size: .7rem;
  font-style: normal;
  font-weight: 850;
}
.export-download-note {
  margin-top: 10px !important;
  color: var(--muted);
  font-size: .69rem;
  line-height: 1.45;
}
.export-preview-list {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
}
.export-file-preview { border-bottom: 1px solid var(--border); }
.export-file-preview:last-child { border-bottom: 0; }
.export-file-preview summary {
  min-width: 0;
  min-height: 58px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  cursor: pointer;
  list-style: none;
}
.export-file-preview summary::-webkit-details-marker { display: none; }
.export-file-preview summary > span:first-child {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
  font-weight: 950;
}
.export-file-preview summary > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.export-file-preview summary strong { overflow-wrap: anywhere; font-size: .74rem; }
.export-file-preview summary small { color: var(--muted); font-size: .66rem; }
.export-file-preview summary em { color: var(--primary); font-size: .68rem; font-style: normal; font-weight: 850; }
.export-file-preview[open] summary { background: var(--primary-soft); }
.export-file-preview pre {
  max-width: 100%;
  max-height: 280px;
  margin: 0;
  padding: 12px;
  border-top: 1px solid var(--border);
  overflow: auto;
  background: #17201d;
  color: #eef7f2;
  font: 500 .66rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space: pre;
}
.export-send-placeholder {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}
.export-send-placeholder > span {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: var(--primary-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
  font-size: 1.35rem;
}
.export-send-placeholder p { margin: 0; color: var(--muted); line-height: 1.5; }
.export-send-placeholder .button { width: 100%; margin-top: 4px; }

@media (max-width: 520px) {
  .export-choice-group,
  .export-filter-grid,
  .export-result-actions { grid-template-columns: 1fr; }
  .export-choice { min-height: 0; }
  .export-result-action { min-height: 72px; }
}

@media (max-width: 350px) {
  .export-file { grid-template-columns: 34px minmax(0, 1fr); }
  .export-file em { grid-column: 2; }
}

/* QR-001 – zentrale Laufzeitdarstellung für Belege und Gutscheine */
.frecka-qr {
  min-width: 0;
  padding: 0;
  border: 0;
  background: #fff;
  color: #111;
  display: grid;
  justify-items: center;
  gap: 8px;
  cursor: pointer;
}
.frecka-qr-svg {
  width: 100%;
  height: auto;
  display: block;
  background: #fff;
}
.frecka-qr > span {
  color: #1c2623;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.2;
}
.frecka-qr-error {
  min-width: 0;
  padding: 12px;
  border: 1px solid #f2c6c1;
  border-radius: 12px;
  background: #fff0ee;
  color: #8d2820;
  font: 800 .72rem/1.4 Inter,ui-sans-serif,system-ui,sans-serif;
}
.receipt-paper-qr {
  width: 100%;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed #9da9a5;
  display: grid;
  justify-items: center;
}
.frecka-qr-receipt { width: 100%; }
.frecka-qr-voucher { width: 132px; }
.frecka-qr-voucher-sheet { width: 176px; }
.voucher-sheet-qr .frecka-qr-voucher-sheet { align-self: start; }

body.qr-fullscreen-open { overflow: hidden; }
.qr-fullscreen {
  position: fixed;
  z-index: 1000;
  inset: 0;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  background: #fff;
  color: #111;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  gap: 8px;
}
html:fullscreen .qr-fullscreen {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
}
.qr-fullscreen-code {
  width: min(94vw, calc(100dvh - 92px));
  max-width: 760px;
  display: grid;
  place-items: center;
}
.qr-fullscreen-code .frecka-qr-svg { width: 100%; }
.qr-fullscreen-close {
  min-width: 112px;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid #dbe4e1;
  border-radius: 999px;
  background: #f5f7f6;
  color: #17322c;
  font-weight: 900;
}
.qr-fullscreen-error {
  max-width: 340px;
  margin: 0;
  color: #8d2820;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
}
.qr-not-found-page {
  min-height: calc(100dvh - 48px);
  max-width: 520px;
  margin: 0 auto;
  justify-content: center;
  text-align: center;
}
.qr-not-found-symbol {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 18px;
  background: #fff0ee;
  color: #8d2820;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  font-weight: 950;
}
.qr-not-found-page h1 { font-size: clamp(1.9rem, 8vw, 2.7rem); }
.qr-not-found-page > p:not(.eyebrow) {
  margin: 12px 0 22px;
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width: 460px) {
  .frecka-qr-voucher { width: 112px; }
  .frecka-qr-voucher-sheet { width: min(68vw, 220px); }
}

@media (max-width: 420px) {
  .nav-item {
    padding-inline: 2px;
    font-size: .6rem;
  }
  .nav-item > span:last-child {
    max-width: 100%;
    overflow-wrap: anywhere;
    line-height: 1.05;
    text-align: center;
  }
}

.nav-label-short { display: none; }

/* COMM-001 / QR-002 – zentrale Dokumentausgabe, Teilen und Public Viewer */
.document-output-actions {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 9px;
}
.document-output-actions .button {
  min-width: 0;
  min-height: 52px;
  padding-inline: 10px;
  gap: 7px;
}
.document-output-actions .button > span { font-size: 1rem; }
.receipt-primary-actions > .document-output-actions { grid-column: 1/-1; }
.document-output-group {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-soft);
  display: grid;
  gap: 10px;
}
.document-output-group h2 { margin: 0; font-size: .86rem; }
.public-qr-slot {
  min-width: 112px;
  min-height: 112px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-soft);
  color: var(--muted);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
}
.public-qr-slot .persistence-loading-spinner { width: 26px; height: 26px; }
.document-preparing,
.public-viewer-loading {
  min-height: min(68dvh,560px);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  color: var(--muted);
  text-align: center;
}
.export-share-form { display: grid; gap: 14px; }
.export-share-form > p,
.export-share-privacy { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.export-share-form fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.export-share-form legend { margin-bottom: 8px; font-size: .78rem; font-weight: 900; }
.export-share-file {
  min-width: 0;
  min-height: 54px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  display: grid;
  grid-template-columns: 24px minmax(0,1fr);
  gap: 9px;
  align-items: center;
}
.export-share-file input { width: 20px; height: 20px; accent-color: var(--primary); }
.export-share-file span { min-width: 0; display: grid; gap: 2px; }
.export-share-file strong { overflow-wrap: anywhere; font-size: .76rem; }
.export-share-file small { color: var(--muted); font-size: .68rem; }
.export-share-notice {
  padding: 11px 12px;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: .75rem;
  font-weight: 800;
}
.export-share-notice.is-error { background: #fff0ee; color: #8d2820; }
.export-share-fallback { display: grid; justify-items: center; gap: 10px; text-align: center; }
.export-share-fallback > span { width: 54px; height: 54px; border-radius: 18px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-size: 1.35rem; }
.export-share-fallback p { margin: 0; color: var(--muted); line-height: 1.5; }
.export-share-fallback .button { width: 100%; }

body.public-document-mode {
  min-width: 0;
  overflow-x: clip;
  background: #eef2f0;
}
.public-document-mode .public-document-shell { width: 100%; min-height: 100dvh; }
.public-document-mode .main-content { width: 100%; max-width: none; padding: max(18px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
.public-viewer-page { width: min(100%,680px); margin: 0 auto; display: grid; gap: 16px; }
.public-viewer-head { text-align: center; }
.public-viewer-head h1 { margin: 4px 0; font-size: clamp(1.55rem,7vw,2.35rem); }
.public-viewer-head > p:last-child { margin: 0; color: var(--muted); }
.public-viewer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.public-viewer-notice { padding: 12px 14px; border-radius: 14px; background: var(--primary-soft); color: var(--primary-strong); font-weight: 800; text-align: center; }
.public-viewer-notice.is-error { background: #fff0ee; color: #8d2820; }
.public-viewer-privacy { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.5; text-align: center; }
.public-viewer-error { width: min(100%,520px); min-height: 72dvh; margin: 0 auto; display: grid; place-items: center; align-content: center; gap: 12px; text-align: center; }
.public-viewer-error > span { width: 58px; height: 58px; border-radius: 18px; background: #fff0ee; color: #8d2820; display: grid; place-items: center; font-size: 1.4rem; font-weight: 950; }
.public-viewer-error h1,
.public-viewer-error p { margin: 0; }
.public-viewer-error p { color: var(--muted); line-height: 1.5; }

@media (max-width: 520px) {
  .document-output-actions { grid-template-columns: 1fr; }
  .public-viewer-page .receipt-paper { padding: 18px 15px; }
}

@media (max-width: 350px) {
  .public-document-mode .main-content { padding-inline: 8px; }
  .public-viewer-actions { grid-template-columns: 1fr; }
  .public-viewer-page .voucher-sheet { padding: 20px 14px; }
}

@media (max-width: 350px) {
  .nav-item { font-size: .56rem; }
  .nav-label-full { display: none; }
  .nav-label-short { display: inline; }
  .settings-form-page .flow-title { font-size: 1.75rem; }
}

@media print {
  .frecka-qr { cursor: default; }
  .receipt-paper-qr { break-inside: avoid; }
}