@font-face{font-family:'League Spartan';src:url('fonts/LeagueSpartan.ttf') format('truetype');font-style:normal;font-weight:100 900;font-display:swap}
*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#edf0eb;color:#18251e}button,input,select{font:inherit}button{cursor:pointer;padding:10px 14px;border:1px solid #cbd6ca;border-radius:8px;background:white}button.primary{background:#b5e3bd;border-color:#91c89a;font-weight:bold}button:disabled{opacity:.5;cursor:wait}input,select{padding:9px;border:1px solid #cbd6ca;border-radius:7px;max-width:100%;min-width:0}label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:bold}h1{font-size:23px}h2{font-size:17px}small,.hint{color:#69796d}.app{max-width:1440px;margin:auto;padding:20px}.toolbar,.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.toolbar{justify-content:space-between}.panel{background:white;padding:18px;border:1px solid #dce4dc;border-radius:14px;margin:12px 0}.columns{display:grid;grid-template-columns:minmax(380px,1fr) minmax(330px,480px);gap:18px}.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.item-editor{padding:12px;border:1px solid #e2e8e2;border-radius:9px;margin:8px 0}.item-editor .fields{grid-template-columns:repeat(3,minmax(0,1fr))}.item-editor details{margin-top:12px;border-top:1px solid #e2e8e2;padding-top:10px}.item-editor summary{cursor:pointer;font-weight:bold;margin-bottom:12px}.item-editor details .fields{grid-template-columns:repeat(2,minmax(0,1fr))}.preview{width:100%;max-width:410px;margin:auto;aspect-ratio:9/16;overflow:hidden;box-shadow:0 8px 35px #14261a2b}.screen{background:var(--bg);color:var(--ink);width:100%;height:100%;padding:6% 7%;display:flex;flex-direction:column;overflow:hidden}.screen header{border-bottom:2px solid var(--accent);padding-bottom:3%;display:flex;align-items:center;justify-content:center;min-height:16%}.logo{max-width:84%;max-height:100%;object-fit:contain}.pages{flex:1;position:relative;min-height:0}.menu-page{display:none;height:100%;overflow:hidden;padding-top:5%}.menu-page.active{display:block}.menu-item{margin-bottom:4%}.product-line{display:flex;justify-content:space-between;gap:10px;align-items:baseline}.name{font-family:var(--item-nf,var(--nf));font-size:var(--item-ns,var(--ns));color:var(--item-nc,var(--nc));font-weight:700}.price{font-family:var(--item-pf,var(--pf));font-size:var(--item-ps,var(--ps));color:var(--item-pc,var(--pc));white-space:nowrap;font-weight:bold}.tag{display:inline-block;width:max-content;max-width:100%;font-family:var(--item-bf,var(--bf));font-size:var(--item-bs,var(--bs));color:var(--item-bc,var(--bc));background:var(--item-bb,var(--bb));padding:4px 6px;vertical-align:middle;border-radius:4px;white-space:nowrap}.tag-gradientBg{background:linear-gradient(90deg,var(--item-g1,var(--g1)),var(--item-g2,var(--g2)));color:#fff}.tag-gradientText,.tag-steel{background:transparent;padding:0 1px;border-radius:0;-webkit-background-clip:text;background-clip:text;color:transparent}.tag-gradientText{background-image:linear-gradient(90deg,var(--item-g1,var(--g1)),var(--item-g2,var(--g2)))}.tag-steel{background-image:linear-gradient(165deg,#4d5964 0%,#b8c2c9 25%,#f7fafc 43%,#77858e 65%,#d8e0e4 83%,#4d5964 100%)}.category-heading{font-family:var(--cf);font-size:var(--cs);color:var(--cc);font-weight:700;text-transform:uppercase;letter-spacing:.12em;margin:5% 0 3%;border-bottom:1px solid var(--accent);padding-bottom:2%}.screen footer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);align-items:center;gap:8px;border-top:1px solid var(--accent);padding-top:4%;font-size:clamp(7px,1vw,12px);letter-spacing:1px;min-height:8%}.footer-grid span{min-width:0;overflow-wrap:anywhere}.footer-grid span:nth-child(2){text-align:center}.footer-grid span:nth-child(3){text-align:right}.dots{display:flex;gap:5px}.dots i{width:6px;height:6px;background:#a8b6a8;border-radius:50%}.dots i.on{background:#203e29}.category-editor{display:flex;gap:8px;margin:8px 0}.category-editor input{flex:1}.import-label{cursor:pointer;border:1px solid #cbd6ca;padding:10px 14px;border-radius:8px;background:#fff}@media(max-width:900px){.columns{grid-template-columns:1fr}.item-editor .fields{grid-template-columns:repeat(2,minmax(0,1fr))}}body.display{background:#000;overflow:hidden}.display .preview{height:100dvh;max-width:none;width:56.25dvh;aspect-ratio:9/16;box-shadow:none}.display .screen{padding:6%}.display .name{font-size:calc(var(--item-ns,var(--ns))*1.75)}.display .price{font-size:calc(var(--item-ps,var(--ps))*1.75)}.display .tag{font-size:calc(var(--item-bs,var(--bs))*1.75)}.display .category-heading{font-size:calc(var(--cs)*1.75)}.display .logo{max-height:13dvh}@media(orientation:portrait){.display .preview{width:100vw;height:100dvh}}

/* 2.2: Elementgroessen direkt aus menuHtml; keine vererbten Overrides. */
.tag{width:auto;max-width:none;display:inline-block;white-space:nowrap;vertical-align:baseline;margin-left:5px;line-height:1.15;font-weight:800;padding:3px 6px;border-radius:4px}
.tag-gradientText,.tag-steel{padding:0;margin-left:5px;border-radius:0;background-color:transparent!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:transparent!important}
.tag-gradientBg{background-size:100% 100%;background-repeat:no-repeat}

/* On signage, scale element inline pixel sizes using zoom on the screen instead of invalid calc multiplication. */

/* Visual Editor 3 */
.visual-studio{display:grid;grid-template-columns:minmax(180px,250px) minmax(300px,1fr) minmax(220px,300px);gap:14px;align-items:start}.visual-studio .panel{margin:0;min-width:0}.visual-side,.visual-properties{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto}.visual-side button{display:block;width:100%;text-align:left;margin:5px 0}.visual-cat{border-top:1px solid #dce4dc;margin:10px 0;padding-top:8px}.visual-cat>button:first-child{font-weight:bold;color:#238b69}.visual-side .visual-item{padding-left:18px;border:0;background:#f2f7f2}.visual-side .visual-item.chosen{outline:2px solid #4cae8b}.visual-center{background:#e8ece7}.visual-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.visual-center .preview{max-width:450px}.visual-properties label{margin:10px 0}.visual-properties input,.visual-properties select{width:100%}.visual-center .name,.visual-center .price,.visual-center .tag,.visual-center .category-heading,.visual-center footer,.visual-center header{cursor:pointer}.visual-center .name:hover,.visual-center .price:hover,.visual-center .tag:hover,.visual-center .category-heading:hover,.visual-center footer:hover{outline:2px dashed #4ba987;outline-offset:2px}.legacy-columns[hidden]{display:none!important}@media(max-width:1050px){.visual-studio{grid-template-columns:minmax(170px,220px) 1fr}.visual-properties{grid-column:1/-1;position:static;max-height:none}}@media(max-width:650px){.visual-studio{grid-template-columns:1fr}.visual-side,.visual-properties{position:static;max-height:none}}

/* 3.1: reliable inline font sizing and gradient badges */
.screen .tag-gradientText,.screen .tag-steel{display:inline-block;width:fit-content;max-width:none;background-repeat:no-repeat;background-size:100% 100%;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:transparent!important;}
.screen .tag-gradientBg{display:inline-block;width:fit-content;background-repeat:no-repeat;background-size:100% 100%;}

/* 3.2: color palette and reliable element sizing in editor and signage */
.visual-color-field{margin:12px 0}.visual-color-field>label{margin:0 0 6px}.visual-color-row{display:flex;align-items:center;gap:8px}.visual-properties .visual-color-row input[type=color]{width:48px;min-width:48px;height:39px;padding:2px;cursor:pointer}.visual-color-row input[type=text]{flex:1;min-width:0}.visual-swatches{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.visual-side .visual-swatch,.visual-properties .visual-swatch{display:block;width:25px;height:25px;min-width:25px;padding:0;border-radius:50%;border:1px solid #a8b2aa;box-shadow:0 0 0 1px #ffffff inset;cursor:pointer;margin:0}
/* Font sizes are supplied inline by menuHtml; do not override them here. */
.screen .tag-gradientText,.screen .tag-steel{background-color:transparent!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:transparent!important;}
/* Remove invalid old signage calc() rules: direct element font sizes are authoritative. */