:root{--scheme:light;--page:#f5f7fa;--surface:#fff;--text:#172335;--muted:#526071;--faint:#738098;--subtle:#8793a4;--line:#dfe4eb;--panel-line:#e0e5ec;--input-line:#d6dde6;--input-bg:#fff;--chip:#f0f3f8;--chip-soft:#f4f6f9;--upload-bg:#f7f9fc;--upload-line:#9aa8bb;--btn-bg:#fff;--btn-line:#cfd7e2;--btn-text:#243349;--link:#243349;--h1-accent:#687b9b;--focus:#506cf0;--range:#172335;--tab-on-bg:#172335;--tab-on-text:#fff;--stage-bg:#e8edf3;--stage-dot:#c8d1df;--shadow:#14274416;--error:#b02f38;--drop-line:#26866b;--drop-bg:#ecf8f2;--exports-bg:#172335;--exports-text:#fff;--dialog-bg:#172335;--dialog-line:transparent;--swatch-line:#0002;--mark-line:transparent;--canvas-line:transparent;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;color:var(--text);background:var(--page);color-scheme:var(--scheme);font-size:16px;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer;border:0;font-weight:650}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--focus);outline-offset:3px}header{height:88px;padding:0 5%;display:flex;align-items:center;gap:26px;border-bottom:1px solid var(--line);background:var(--surface)}.brand{font-size:29px;font-weight:850;letter-spacing:-1.5px;color:inherit;text-decoration:none;display:flex;align-items:center;gap:10px}.brand-mark{width:37px;height:37px;flex:none}.privacy{font-size:14px;margin-left:auto;color:var(--muted)}#coffee{color:var(--text);font-size:14px}main{max-width:1600px;margin:auto;padding:42px 5% 60px}.intro{display:flex;align-items:center;justify-content:space-between;margin-bottom:34px}.eyebrow{font-size:12px;letter-spacing:1.8px;font-weight:750;margin:0 0 10px;color:var(--muted)}h1{font-size:clamp(36px,4.4vw,66px);line-height:1.04;letter-spacing:-2.7px;margin:0}h1 span{color:var(--h1-accent)}.intro>p{color:var(--muted);line-height:1.7;margin-right:7%}.workspace{display:grid;grid-template-columns:320px minmax(0,1fr);gap:26px;align-items:start}.panel,.result{background:var(--surface);border:1px solid var(--panel-line);border-radius:18px}.panel{padding:22px;margin-bottom:16px}h2{font-size:19px;letter-spacing:-.4px;margin:0 0 20px}h2 b{color:var(--faint);font-size:13px;margin-right:12px}label{display:block;font-size:14px;font-weight:550}input[type=number],input[type=text],select{width:100%;border:1px solid var(--input-line);border-radius:8px;padding:10px;background:var(--input-bg);color:var(--text);margin-top:7px;min-width:0}input[type=color]{width:40px;height:36px;padding:2px;border:1px solid var(--input-line);border-radius:8px;background:var(--input-bg);cursor:pointer}.upload{padding:24px 10px;text-align:center;border:1.5px dashed var(--upload-line);border-radius:10px;background:var(--upload-bg);cursor:pointer;font-size:16px}.upload span{display:block;font-size:12px;font-weight:400;margin-top:8px;color:var(--muted)}.upload input{width:100%;font-size:12px;margin-top:14px}.muted{font-size:13px;line-height:1.6;color:var(--muted)}.fields{display:grid;grid-template-columns:1fr 1fr;gap:15px}.background{display:flex;justify-content:space-between;align-items:center;margin-top:20px}.palette-row{display:flex;align-items:center;gap:9px;margin-bottom:9px}.palette-row input[type=text]{margin:0;flex:1;width:50px}.palette-row .number{width:20px;font-size:14px;font-weight:700}.remove{background:none;font-size:22px;color:var(--faint);padding:4px}.secondary,.primary{border-radius:9px;padding:12px 15px;font-size:14px}.secondary{background:var(--btn-bg);border:1px solid var(--btn-line);color:var(--btn-text)}.primary{background:#eaff55;color:#172335}.full{width:100%;margin-top:8px}.result{overflow:hidden}.preview-head{display:flex;align-items:center;justify-content:space-between;padding:25px 26px 20px;gap:12px}.preview-head h2{font-size:25px;margin:0}.badge{font-size:13px;background:var(--chip);border-radius:20px;padding:8px 13px;white-space:nowrap}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 25px 20px;flex-wrap:wrap}.tabs{display:flex;background:var(--chip);padding:4px;border-radius:10px;gap:2px}.tabs button{font-size:14px;padding:9px 12px;background:transparent;color:var(--muted);border-radius:7px}.tabs button[aria-pressed=true]{background:var(--tab-on-bg);color:var(--tab-on-text)}.zoom{display:flex;align-items:center;gap:9px}.zoom input[type=range]{width:clamp(120px,13vw,180px);margin:0;accent-color:var(--range);cursor:pointer}.zoom output{width:88px;flex:none;text-align:right;font-size:13px;color:var(--muted);white-space:nowrap}.zoom button{width:106px;flex:none;padding:7px 10px;font-size:13px;white-space:nowrap}#zoomFit:disabled{visibility:hidden}.stage{height:530px;overflow:auto;background-color:var(--stage-bg);background-image:radial-gradient(var(--stage-dot) .7px,transparent .7px);background-size:14px 14px;display:flex;padding:28px;align-items:flex-start}.stage.can-pan canvas{cursor:grab}.stage.is-panning,.stage.is-panning canvas{cursor:grabbing;user-select:none}canvas{background:white;display:block;box-shadow:0 8px 30px var(--shadow);outline:1px solid var(--canvas-line);margin:auto;flex-shrink:0}#status{padding:0 26px;font-size:14px;color:var(--muted);min-height:20px}#status.error{color:var(--error)}.stats{display:grid;grid-template-columns:repeat(3,1fr);padding:18px 26px 24px;border-bottom:1px solid var(--line);gap:15px}.stats strong{display:block;font-size:28px;letter-spacing:-1px}.stats span{font-size:13px;color:var(--muted)}.material{padding:25px 26px}.material h2{margin-bottom:14px}#materials{display:flex;flex-wrap:wrap;gap:9px}.material-chip{padding:10px 12px;background:var(--chip-soft);border-radius:8px;font-size:14px;display:flex;gap:8px;align-items:center}.swatch{width:17px;height:17px;border-radius:50%;border:1px solid var(--swatch-line);display:inline-block}.exports{background:var(--exports-bg);color:var(--exports-text);padding:26px}.exports .eyebrow{color:#a6b5c9}.exports h2{font-size:25px}.export-buttons{display:flex;flex-wrap:wrap;gap:9px}.exports>p{font-size:13px;line-height:1.6;color:#bdc8d8;margin-bottom:0}footer{padding:24px 5%;border-top:1px solid var(--line);display:flex;gap:25px;font-size:14px;color:var(--muted)}footer strong{color:var(--text)}footer a{color:var(--link);text-underline-offset:3px}footer span:last-child{margin-left:auto}#crop input{width:100%}[hidden]{display:none!important}@media(max-width:1000px){.workspace{grid-template-columns:290px minmax(0,1fr)}main{padding:30px 3%}.intro>p{margin-right:0}.stage{height:440px}.privacy{display:none}.toolbar{padding-left:15px;padding-right:15px}.tabs button{padding:8px}.stats strong{font-size:23px}}@media(max-width:730px){header{height:72px;padding:0 5%}.intro{align-items:flex-start}.intro>p{display:none}main{padding:30px 5%}.workspace{display:flex;flex-direction:column}.workspace aside,.result{width:100%}.panel{padding:20px}.stage{height:400px;padding:18px}.preview-head{padding:22px 18px}.preview-head h2{font-size:21px}.badge{font-size:12px}.stats{padding:16px}.stats strong{font-size:23px}footer{flex-wrap:wrap;gap:12px}footer span:last-child{margin-left:0;width:100%}.brand{font-size:26px}.zoom{width:100%}.zoom input[type=range]{flex:1;min-width:0}.export-buttons button{flex:1 1 45%}}

footer .footer-meta{display:flex;align-items:center;gap:10px;margin-left:auto}footer .footer-meta>span{margin-left:0;width:auto}#visitorCount{font-size:12px;color:var(--subtle);font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:730px){footer .footer-meta{margin-left:auto;width:auto}}

footer{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center}footer .footer-links{display:flex;align-items:center;gap:25px}footer .footer-links>span{margin-left:0;width:auto}.site-version{margin:0;text-align:center;font-size:12px;line-height:1.6;color:var(--subtle);font-variant-numeric:tabular-nums}
@media(max-width:1250px){footer .footer-links>span{display:none}}
@media(max-width:730px){footer{display:flex;align-items:center;justify-content:center}footer .footer-links{gap:12px}footer .footer-meta{margin-left:0}.site-version{flex:1 1 auto}}

body.has-file-drag .upload,body.has-file-drag .stage{outline:3px dashed var(--drop-line);outline-offset:-5px;background-color:var(--drop-bg)}

.privacy-settings{padding:0;background:none;color:var(--link);text-decoration:underline;text-underline-offset:3px;font-size:14px;font-weight:400;white-space:nowrap}
.privacy-notice{position:fixed;z-index:20;left:50%;bottom:20px;transform:translateX(-50%);width:min(680px,calc(100% - 32px));background:var(--dialog-bg);color:#fff;border:1px solid var(--dialog-line);border-radius:14px;box-shadow:0 14px 44px #17233555;padding:22px 24px;font-size:14px;line-height:1.55}
.privacy-notice strong{font-size:18px}.privacy-notice p{color:#d9e3ed;margin:9px 0 18px}.privacy-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
@media(max-width:550px){.privacy-actions button{flex:1 1 100%}.privacy-notice{bottom:8px;padding:18px}}

/* Dunkle Darstellung: folgt dem Gerät, solange keine eigene Wahl gespeichert ist */
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--scheme:dark;--page:#0b1424;--surface:#131f35;--text:#eef3fa;--muted:#a9b7ca;--faint:#8b9bb1;--subtle:#8190a6;--line:#25364f;--panel-line:#25364f;--input-line:#34496a;--input-bg:#0d1829;--chip:#1b2b45;--chip-soft:#1b2b45;--upload-bg:#0f1b30;--upload-line:#4a6286;--btn-bg:#1b2b45;--btn-line:#3a5075;--btn-text:#eef3fa;--link:#d5e0f0;--h1-accent:#8fa8d0;--focus:#a9b8ff;--range:#eaff55;--tab-on-bg:#eaff55;--tab-on-text:#172335;--stage-bg:#0e1a2e;--stage-dot:#1f3050;--shadow:#00000066;--error:#ff8f98;--drop-line:#5fd3b0;--drop-bg:#10302e;--exports-bg:#0e1a2e;--dialog-bg:#1a2942;--dialog-line:#34496a;--mark-line:#3a5075;--swatch-line:#ffffff66;--canvas-line:#3a5075}}
:root[data-theme=dark]{--scheme:dark;--page:#0b1424;--surface:#131f35;--text:#eef3fa;--muted:#a9b7ca;--faint:#8b9bb1;--subtle:#8190a6;--line:#25364f;--panel-line:#25364f;--input-line:#34496a;--input-bg:#0d1829;--chip:#1b2b45;--chip-soft:#1b2b45;--upload-bg:#0f1b30;--upload-line:#4a6286;--btn-bg:#1b2b45;--btn-line:#3a5075;--btn-text:#eef3fa;--link:#d5e0f0;--h1-accent:#8fa8d0;--focus:#a9b8ff;--range:#eaff55;--tab-on-bg:#eaff55;--tab-on-text:#172335;--stage-bg:#0e1a2e;--stage-dot:#1f3050;--shadow:#00000066;--error:#ff8f98;--drop-line:#5fd3b0;--drop-bg:#10302e;--exports-bg:#0e1a2e;--dialog-bg:#1a2942;--dialog-line:#34496a;--mark-line:#3a5075;--swatch-line:#ffffff66;--canvas-line:#3a5075}
.brand-mark rect{stroke:var(--mark-line);stroke-width:1.5}
.theme-toggle{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:22px;background:var(--btn-bg);border:1px solid var(--btn-line);color:var(--btn-text);font-size:14px;white-space:nowrap}.theme-toggle svg{width:18px;height:18px;flex:none}
@media(max-width:1000px){.theme-toggle{margin-left:auto}}
@media(max-width:730px){.theme-toggle{padding:0;width:44px;justify-content:center}.theme-toggle span{display:none}header{gap:14px}}