/* English design system. Legacy renderer styling stays in photopwa.css. */
:root{color-scheme:light;--bg:#f5f4ef;--surface:#fff;--surface2:#eaece5;--ink:#202820;--muted:#596354;--line:#cdd3c8;--accent:#275d3b;--on-accent:#fff;--warm:#ede2d2;--focus:#0875cf;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px}
:root[data-theme=dark]{color-scheme:dark;--bg:#171d19;--surface:#202922;--surface2:#2b352c;--ink:#f0f2e9;--muted:#b4bfaf;--line:#455143;--accent:#b7df9e;--on-accent:#1b3221;--warm:#332e25;--focus:#80bfff}
*{box-sizing:border-box}body{margin:0!important;background:var(--bg)!important;color:var(--ink)!important;font:inherit;line-height:1.6}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:4px}button,input,select,textarea{font:inherit}button,a.button{cursor:pointer}button,select,input:not([type=radio]):not([type=checkbox]),textarea{min-height:44px}button{border:1px solid var(--line);border-radius:9px;padding:9px 14px;background:var(--surface);color:var(--ink);box-shadow:none;touch-action:manipulation}button:hover{background:var(--surface2);box-shadow:none}button:disabled{opacity:.45;cursor:default;background:var(--surface2)!important;color:var(--ink)!important;box-shadow:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--focus)!important;outline-offset:3px}input,select,textarea{max-width:100%;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);padding:8px}input[type=checkbox],input[type=radio]{accent-color:var(--accent)}[hidden]{display:none!important}img{max-width:100%;height:auto}h1,h2,h3,p,figure{margin:0}h1,h2,h3{line-height:1.12;letter-spacing:-.045em;font-weight:600}h2{font-size:clamp(30px,4vw,48px)}h3{font-size:23px}p{color:var(--muted)}.wrap{max-width:1248px;margin-inline:auto;padding-inline:40px}.button{display:inline-flex;align-items:center;justify-content:center;gap:40px;min-height:52px;border-radius:9px;padding:14px 24px;font-weight:650;font-size:16px;border:1px solid var(--line);text-decoration:none!important}.button.primary,button.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.button.primary:hover{filter:brightness(1.13)}.button.small{min-height:44px;padding:8px 18px;gap:20px}.start-button{min-width:170px}.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-size:11px;font-weight:700;margin-bottom:22px}.lead{font-size:18px;line-height:1.65}.micro{font-size:12px;line-height:1.7}.text-link{display:inline-block;min-height:44px;padding-block:10px;font-weight:600;text-decoration:underline;text-underline-offset:5px}.skip-link{position:fixed;left:12px;top:-100px;z-index:10000;background:var(--surface);padding:10px}.skip-link:focus{top:8px}.site-header,body.content-page>header{height:88px;max-width:1440px;margin:auto;padding:20px 40px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);background:var(--bg);position:relative;z-index:10}.brand{font-size:26px;font-weight:750;letter-spacing:-1.2px;display:inline-flex;align-items:center;color:var(--ink);white-space:nowrap}.brand-icon{width:35px;height:35px;background:var(--accent);color:var(--on-accent);font-size:29px;border-radius:8px;line-height:32px;text-align:center;margin-right:9px}.brand>span:not(.brand-icon):not(.brand-dot){font-weight:400}.brand-dot{color:var(--accent)}#menuleft{display:flex;align-items:center;gap:25px;font-size:13px;float:none}#menuleft a{background:none;box-shadow:none;border:none;margin:0;padding:10px 0;color:var(--ink);min-height:44px}#menuleft a.primary{padding:9px 18px;background:var(--accent);color:var(--on-accent)}#lightdark{background:var(--surface);color:var(--ink);filter:none!important;width:44px;height:44px;font-size:24px;padding:0;margin:0}.hero{padding-top:70px;padding-bottom:65px;display:grid;grid-template-columns:1.05fr 1fr;gap:70px;align-items:center}.hero h1{font-size:clamp(48px,5.5vw,78px);line-height:1.04;letter-spacing:-.065em}.hero h1>span{font-family:Georgia,serif;font-style:italic;font-weight:400;color:var(--accent)}.hero .lead{max-width:435px;margin:25px 0}.hero .micro{margin-top:13px}.status-dot{display:inline-block;width:7px;height:7px;background:var(--accent);border-radius:50%;margin-right:9px}.hero-facts{display:flex;gap:25px;margin-top:38px}.hero-facts span{display:flex;flex-direction:column;font-size:11px;color:var(--muted)}.hero-facts b{font-size:19px;font-weight:600;color:var(--ink);letter-spacing:-.03em}.hero-art{padding:14px;background:var(--surface);border:1px solid var(--line);border-radius:16px;position:relative;transform:rotate(2deg);box-shadow:0 18px 45px #162b1310}.hero-art img{width:100%;display:block;border-radius:7px}.hero-art figcaption{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;padding:16px 1px 4px;color:var(--muted)}.pill{border:1px solid var(--line);border-radius:30px;padding:4px 9px;white-space:nowrap}.art-stamp{position:absolute;left:-24px;bottom:22px;background:var(--accent);color:var(--on-accent);font-size:54px;width:68px;height:68px;border-radius:50%;text-align:center;line-height:65px}.benefits{display:grid;grid-template-columns:repeat(3,1fr);padding-block:35px 70px;gap:50px}.benefits article{border-top:1px solid var(--line);padding-top:22px}.feature-index{color:var(--muted);font-size:11px}.benefits h2{font-size:23px;margin:17px 0 12px}.benefits p{font-size:14px}.section-band{background:var(--surface2);padding:80px 0}.showcase-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:110px;align-items:center}.showcase h2{max-width:320px}.showcase .lead{margin:24px 0}.showcase .micro{margin-top:24px;max-width:330px}.comparison{position:relative;aspect-ratio:1.2;overflow:hidden;border-radius:12px;background:var(--surface)}.comparison>img,.comparison-after img{display:block;width:100%;height:100%;object-fit:cover}.comparison-after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--compare,50%))}.comparison-after img{filter:sepia(1)}.comparison-label{position:absolute;top:14px;background:#fffef0;color:#202820;font-size:11px;padding:4px 12px;border-radius:30px}.before-label{left:14px}.after-label{right:14px}.comparison-line{position:absolute;top:0;bottom:0;left:var(--compare,50%);width:2px;background:#fff}.comparison-line span{position:absolute;top:50%;left:-20px;width:42px;height:42px;border-radius:50%;background:#fff;color:#202820;text-align:center;font-size:23px;line-height:42px}.comparison-control{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:15px;font-size:12px;text-align:left;line-height:1.5}.comparison-control input{flex:1;min-width:100px}.steps{padding-block:85px}.steps ol{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:60px}.steps li>span{display:block;color:var(--accent);font-family:Georgia,serif;font-size:43px;margin-bottom:17px}.steps h3{margin-bottom:14px}.steps p{font-size:14px}.privacy-print{display:grid;grid-template-columns:1fr 1fr;gap:24px}.privacy-print article{padding:40px;border:1px solid var(--line);border-radius:14px}.privacy-block{background:var(--accent);color:var(--on-accent)}.privacy-block p{color:inherit;opacity:.9}.large-symbol{font-size:65px;line-height:1;display:block;margin-bottom:35px}.privacy-print h2{font-size:38px;max-width:350px;margin-bottom:22px}.privacy-print .eyebrow{margin-bottom:18px}.privacy-print p:not(.eyebrow){font-size:14px}.privacy-print a{margin-top:23px}.print-block{background:var(--warm)}.print-art{height:170px;margin:-8px 0 30px;display:flex;justify-content:center;align-items:center;background:linear-gradient(110deg,#ffffff15,#ffffff50)}.print-art img{height:145px;width:145px;object-fit:cover;border:8px solid #ece4ce;box-shadow:8px 10px 15px #0003;transform:rotate(-5deg)}.print-block .micro{margin-top:15px;font-size:12px!important}.home-faq{padding-block:80px;max-width:850px}.home-faq h2{margin-bottom:28px}.home-faq details{border-bottom:1px solid var(--line);padding:17px 0}.home-faq summary{cursor:pointer;padding:4px 0;font-size:16px;font-weight:600;min-height:44px}.home-faq details p{font-size:14px;margin:10px 0}.home-faq>a{margin-top:20px}.final-cta{text-align:center;padding-block:60px 90px;border-top:1px solid var(--line)}.final-cta p:not(.eyebrow){margin:20px 0 25px}.site-footer,body.content-page>footer{border-top:1px solid var(--line);padding-top:30px;padding-bottom:35px;display:flex;align-items:center;gap:30px;flex-wrap:wrap;background:var(--bg);color:var(--ink)}.site-footer p{font-size:12px}.site-footer nav{display:flex;gap:18px;flex-wrap:wrap;margin-left:auto;font-size:12px}.site-footer nav a{padding-block:12px}.load-status{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:12000;background:var(--surface);color:var(--ink);padding:18px 24px;border:1px solid var(--line);border-radius:12px;box-shadow:0 5px 20px #0002;max-width:90vw}
/* Accessible sliders, also used by the legacy rendering controls. */
input[type=range]{appearance:none;-webkit-appearance:none;width:100%;max-width:none;min-height:44px;height:44px;padding:0;margin:0;background:transparent;box-shadow:none;border:0;overflow:visible;touch-action:pan-y}input[type=range]::-webkit-slider-runnable-track{height:5px;background:var(--line);border-radius:5px}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:22px;height:22px;background:var(--accent);border:3px solid var(--surface);border-radius:50%;margin-top:-8px;box-shadow:0 0 0 1px var(--accent)}input[type=range]::-moz-range-track{height:5px;background:var(--line);border-radius:5px}input[type=range]::-moz-range-thumb{width:18px;height:18px;background:var(--accent);border:3px solid var(--surface);box-shadow:0 0 0 1px var(--accent);border-radius:50%}
/* Editor: renderer IDs are preserved; layout is owned here. */
.editor-mode .site-header{height:66px;padding-block:10px}.editor-mode .desktop-link,.editor-mode #CreateKalei,.editor-mode #textinhalt,.editor-mode .site-footer{display:none!important}#photoeditdiv{max-width:1800px;margin:auto;padding:16px 24px 30px}#canvasFrame{display:block;min-height:0;background:transparent;max-width:none;margin:0;position:relative;padding:0}#canvasFrame:before,#photoedit:before{display:none!important}.editor-topbar{display:flex;gap:8px;align-items:center;margin-bottom:16px;flex-wrap:wrap}.editor-topbar .editor-open{margin-left:auto}.editor-topbar button{font-size:13px}.editor-topbar .compare-button[aria-pressed=true]{background:var(--accent);color:var(--on-accent)}.editor-layout{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:22px;align-items:start}.canvas-stage{position:sticky;top:12px;min-width:0;border:1px solid var(--line);border-radius:12px;background:var(--surface2);padding:22px;min-height:480px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}.canvas-status{font-size:11px;margin-top:18px;text-align:center;min-height:18px}.canvas-stage #allcanvas{display:block;max-width:100%!important;width:min(100%,var(--canvas-display,700px))!important;margin:auto;flex:none;position:relative;box-shadow:0 4px 30px #0001}.canvas-stage .divcanvass{width:100%!important;max-width:100%!important;height:auto!important}.canvas-stage #divCanvas{display:block}.canvas-stage #allcanvas.comparing canvas:not(#compare-canvas){visibility:hidden}.canvas-stage #compare-canvas{position:absolute;inset:0;pointer-events:none}.canvas-stage #allcanvas:not(.comparing) #compare-canvas{display:none}.editor-tools{min-width:0}.tool-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:5px;background:var(--surface2);border-radius:10px;margin-bottom:12px}.tool-tabs button{font-size:11px;background:transparent;line-height:1.3;padding:8px 3px;min-height:48px;border-radius:7px}
.tool-tabs button:hover{background:#202922;}
.tool-tabs button[aria-selected=true]{background:var(--surface);box-shadow:0 1px 4px #0001;font-weight:700;color:var(--accent)}#photoedit{position:static!important;max-width:none!important;width:100%!important;padding:0!important;border:0;border-radius:0;background:none!important;color:var(--ink)!important;text-align:left;z-index:auto}.tool-panel{padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:12px;min-width:0}.tool-panel>h2{font-size:22px;margin-bottom:18px}.tool-panel p{font-size:12px}.tool-panel form{margin:0}.tool-panel fieldset{margin:0 0 22px!important;padding:0!important;border:0!important;background:none!important;box-shadow:none;max-height:none!important;position:static!important;overflow:visible!important;transition:none;min-width:0}.tool-panel legend{font-size:13px;font-weight:700;padding:0 0 14px;border:0;background:none!important;box-shadow:none;color:var(--ink);width:100%}.tool-panel legend k,.tool-panel label k{display:none}.tool-panel label{font:inherit;line-height:1.5;text-align:left;margin:4px 0;color:var(--ink);max-width:100%}.tool-panel label em{position:static!important;display:block;font-size:12px;color:var(--ink);margin:0!important;width:auto!important;text-align:left;white-space:normal;font-style:normal}.tool-panel .slider-label{display:grid!important;grid-template-columns:1fr auto;gap:0 8px;width:100%!important;max-width:none!important;margin:8px 0!important;padding:8px 0!important;border-bottom:1px solid var(--line)}.tool-panel .slider-label>em{grid-column:1}.tool-panel .slider-label>input[type=range]{grid-column:1;grid-row:2;min-width:0}.tool-panel .slider-label>output{font-size:11px;text-align:right;grid-column:2;grid-row:1;font-variant-numeric:tabular-nums}.tool-panel .slider-label>button.slider-reset{grid-column:2;grid-row:2;font-size:11px;padding:5px 8px;min-width:44px}.tool-panel .inlineblock,.tool-panel .max120px{max-width:100%;width:auto;float:none}.tool-panel .max120px{display:block;width:100%}.tool-panel .inlineblock:has(>.slider-label){display:block;width:100%}.tool-panel select{width:100%;min-height:44px;font-size:13px}.tool-panel input[type=color]{width:60px;min-width:44px;padding:3px}.tool-panel textarea{width:100%;min-height:100px}.tool-panel #resetAllFilter,.tool-panel #resetbigcol{float:none;background:var(--surface2);color:var(--ink);font-size:12px;margin:0 0 10px}.tool-panel .tooltip>div:not(#otherscolor){display:none!important}.tool-panel .tooltip{font-size:12px}.tool-panel .pc-tab{max-width:100%}.tool-panel .pc-tab nav ul{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;padding:0;gap:3px}.tool-panel .pc-tab nav li{float:none;width:auto!important;margin:0!important;padding:0!important;display:block!important}.tool-panel .pc-tab nav label{min-height:44px;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--surface2);color:var(--ink);border-radius:7px;padding:7px 3px;font-size:11px;margin:0!important}.tool-panel .pc-tab nav label em{display:none!important}.tool-panel .pc-tab section>div{background:none!important;padding:6px 0!important;border:0;max-width:100%}.tool-panel .pc-tab section{padding:0;border:0}.tool-panel .switch-field{display:flex;flex-wrap:wrap;gap:3px;max-width:100%}.tool-panel .switch-field label{font-size:11px;min-height:44px;display:inline-flex;align-items:center;padding:8px;background:var(--surface2);color:var(--ink);border:1px solid var(--line);box-shadow:none;flex:1;margin:0}.tool-panel .switch-field input:checked+label{background:var(--accent);color:var(--on-accent)}#buttons,#buttons2,#buttons3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;width:100%;max-width:none}#buttons button,#buttons2 button,#buttons3 button{width:100%;height:auto;min-height:84px;padding:5px!important;border-radius:8px;border:1px solid var(--line);background-color:var(--surface2);box-shadow:none;margin:0;color:var(--ink);font-size:10px;line-height:1.25;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;white-space:normal;overflow:hidden}#buttons button canvas,#buttons2 button canvas{width:100%;height:54px;object-fit:cover;border-radius:4px}#buttons button em,#buttons2 button em,#buttons3 button em{display:none}#buttons button.btnselected,#buttons2 button.btnselected{outline:2px solid var(--accent)!important;outline-offset:0;background:var(--surface2)}#buttons3 button{padding-top:51px!important;background-position:50% 0;min-height:92px}#buttons3 button br{display:none}#buttons3 button .preset-caption{background:var(--surface);width:100%}.tool-panel #easysiz label{max-width:100%}.tool-panel #imagesizeinfo{display:block;font-size:12px}.tool-panel #wcansize,.tool-panel #hcansize{width:calc(50% - 20px)}.tool-panel #wcansitze,.tool-panel #hcansitze{width:100%;font-size:15px}.tool-panel #easytxt{display:grid;grid-template-columns:1fr 1fr;gap:10px}.tool-panel #easytxt>legend{grid-column:1/-1}.tool-panel #easytxt>.inlineblock{background:none!important;padding:0;margin:0;text-align:left}.tool-panel #easytxt button{display:block;width:100%;font-size:12px;background:var(--surface2);height:auto;min-height:48px}.tool-panel #easytxt button b,.tool-panel #easytxt button svg{display:none}.tool-panel #shareAsPng{color:var(--ink);float:none;width:100%;height:auto;padding:12px;margin:8px 0}.tool-panel #copypaste{display:flex;gap:5px;flex-wrap:wrap;margin:0 0 14px}.tool-panel #copypaste svg{width:18px;height:18px}.tool-panel #copypaste button{font-size:12px}.tool-panel #imagesUldiv{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px}.tool-panel #imagesUldiv .inlineblock{display:contents}.tool-panel #imagesUldiv button{font-size:12px;margin:0}.tool-panel #imagesUldiv #fotoInBtn{display:none}.tool-panel #imagesUldiv svg{width:18px;height:18px}#startupHelp{display:none!important}#filform{position:static;display:none}#allImages{position:fixed;inset:15vh 5vw auto!important;width:90vw!important;max-width:800px;max-height:75vh;overflow:auto;margin:auto;padding:20px;background:var(--surface)!important;color:var(--ink);z-index:10001;border:1px solid var(--line);box-shadow:0 0 0 100vmax #0007;border-radius:12px}#allImages p{background:none;color:var(--ink);padding:10px 0;font-size:14px}#allImages input{width:min(300px,100%)}#allImages #closeimg{float:right}#cropdivinfo{position:relative!important;width:100%!important;max-width:none!important;inset:auto!important;min-height:0!important;background:var(--surface)!important;color:var(--ink);border:1px solid var(--line);padding:15px!important;margin-bottom:15px;z-index:20;backdrop-filter:none}#cropdivinfo h3,#cropdivinfo h4{font-size:15px;margin:14px 0 9px}#cropdivinfo h4{display:block}#cropdivinfo button{min-width:44px!important;min-height:44px!important;height:auto!important;margin:3px;font-size:12px;box-shadow:none}#cropdivinfo .selection-info{font-size:12px}#cropdivinfo label{display:block;text-align:left;line-height:1.4;font-size:12px}#cropdivinfo input{width:100%}#progress-bar{display:none!important}.editor-progress{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:12px 18px;position:fixed;bottom:18px;left:24px;z-index:12000;font-size:13px;box-shadow:0 5px 25px #0002}.editor-progress progress{width:90px;height:8px;accent-color:var(--accent)}.editor-message{padding:12px 15px;background:var(--warm);border:1px solid var(--line);border-radius:9px;margin-bottom:12px;font-size:13px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.editor-message p{flex:1;min-width:180px;color:var(--ink)}.editor-message button{font-size:12px}.print-guide{border-top:1px solid var(--line);margin-top:22px;padding-top:18px}.print-guide h3{font-size:16px;margin-bottom:12px}.print-guide label{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:12px;width:100%}.print-guide input{width:95px}.print-guide p{margin-top:12px}.history-note,.offline-status{font-size:11px;margin-top:10px}#infokaleid{display:none!important}.classfilter{position:absolute;width:0;height:0;pointer-events:none}.labelclass:has(#chCssHelptoool){display:none!important}.editor-mode .skip-link{display:none}.croppr-handle{min-width:20px;min-height:20px}.pc-tab>input:focus-visible~nav{outline:2px solid var(--focus)}
.tool-panel .switch-field label:hover,#buttons button:hover,#buttons2 button:hover, #buttons3 button:hover {background: var(--surface);  }
/* English information pages. */
body.content-page>header img{width:180px;height:auto}body.content-page #textinhalt{max-width:900px;margin:50px auto;padding:0 30px;background:none!important;font-size:16px;text-align:left}body.content-page h1{font-size:clamp(35px,5vw,60px);margin:20px 0 30px}body.content-page h2{font-size:28px;margin:40px 0 15px}body.content-page h3{font-size:22px;margin:25px 0 12px}body.content-page p{margin:14px 0;line-height:1.8}body.content-page #textinhalt a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}body.content-page #textinhalt img{float:none;display:block;margin:25px auto;max-width:100%;height:auto;border-radius:9px}body.content-page figure{margin:30px 0}body.content-page figcaption{font-size:12px;color:var(--muted)}body.content-page .content-button{display:inline-block;padding:12px 24px;border-radius:8px;background:var(--accent);color:var(--on-accent)!important;text-decoration:none!important}body.content-page>footer{padding-inline:max(25px,calc((100% - 1100px)/2));display:block;font-size:13px}body.content-page #menufoter,body.content-page #menulang{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}body.content-page #menufoter a,body.content-page #menulang a{background:none;color:var(--ink);padding:10px;box-shadow:none;border:0;min-height:44px}body.content-page #menulang p{width:100%;margin:0}body.content-page .content-links{padding-left:20px}body.content-page .content-links a{display:inline-block;padding-block:8px}body.content-page input,body.content-page textarea{max-width:100%}body.content-page #lightdarkdv{display:block}body.content-page .tooltip>div{display:none}body.content-page .infoblocks{display:block;width:auto;height:auto;background:none;color:var(--ink);padding:10px;border:1px solid var(--line);margin:20px 0}body.content-page #txinfoblock{display:block}body.content-page #textinfos{max-width:100%}
@media(min-width:1500px){.canvas-stage{min-height:650px}.editor-layout{grid-template-columns:minmax(0,1fr) 400px}}
@media(max-width:1000px){.wrap{padding-inline:28px}.hero{gap:40px;padding-top:50px}.hero h1{font-size:56px}.hero .lead{font-size:16px}.hero-facts{gap:15px}.showcase-grid{gap:50px}.editor-layout{grid-template-columns:minmax(0,1fr) 340px}.canvas-stage{padding:15px;min-height:360px}#photoeditdiv{padding:15px}.privacy-print article{padding:28px}}
@media(max-width:760px){.wrap{padding-inline:22px}.site-header,body.content-page>header{height:70px;padding:12px 20px}.brand{font-size:23px}.brand-icon{width:30px;height:30px;font-size:25px;line-height:28px}#menuleft{gap:10px}#menuleft .desktop-link{display:none}.hero{grid-template-columns:1fr;gap:38px;padding-top:38px;padding-bottom:38px}.hero h1{font-size:58px}.hero-copy{max-width:520px}.hero .lead{max-width:440px;margin-block:20px}.hero .eyebrow{font-size:10px;margin-bottom:18px}.hero-facts{margin-top:25px;gap:28px}.hero-art{margin:8px 12px 0;max-width:500px;transform:rotate(1deg)}.hero-art figcaption{font-size:9px}.art-stamp{left:-19px;width:52px;height:52px;line-height:50px;font-size:40px}.benefits{grid-template-columns:1fr;gap:25px;padding-bottom:45px}.benefits article{display:grid;grid-template-columns:36px 1fr;gap:8px 15px}.benefits .feature-index{grid-row:1/3}.benefits h2{margin:0;font-size:22px}.benefits p{grid-column:2}.section-band{padding:48px 0}.showcase-grid{grid-template-columns:1fr;gap:30px}.showcase h2{max-width:100%}.showcase .lead{font-size:16px;margin:18px 0}.showcase .micro{margin-top:10px;max-width:none}.steps{padding-block:50px}.steps ol{grid-template-columns:1fr;gap:30px;margin-top:30px}.steps li{display:grid;grid-template-columns:45px 1fr;gap:8px 15px}.steps li>span{grid-row:1/3;font-size:32px;margin:0}.steps h3{margin:0}.steps p{grid-column:2}.privacy-print{grid-template-columns:1fr}.privacy-print article{padding:28px}.privacy-print h2{font-size:34px}.home-faq{padding-block:50px}.final-cta{padding-block:45px 60px}.site-footer{gap:15px}.site-footer nav{margin-left:0;gap:16px}.site-footer p{width:100%}.editor-layout{display:flex;flex-direction:column;gap:14px}.canvas-stage{position:relative;top:auto;width:100%;padding:12px;min-height:0;max-height:none}.canvas-stage #allcanvas{width:min(100%,var(--canvas-mobile,350px))!important}.canvas-status{margin-top:10px;font-size:10px}.editor-tools{width:100%;padding-bottom:65px}.tool-tabs{position:fixed;bottom:0;left:0;right:0;border-radius:0;padding:6px 12px calc(6px + env(safe-area-inset-bottom));margin:0;z-index:1000;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -2px 18px #0001}.tool-tabs button{font-size:12px}.tool-tabs button[aria-selected=true]{background:var(--surface2);box-shadow:none}.tool-panel{padding:18px}.editor-topbar{gap:6px;margin-bottom:12px}.editor-topbar button{padding:8px 10px;font-size:11px}.editor-topbar .editor-home{display:none}.editor-topbar .editor-open{margin-left:0}.editor-mode .site-header{height:60px}.editor-mode #photoeditdiv{padding:12px}.editor-progress{bottom:85px;left:12px;right:12px}.tool-panel .pc-tab nav label{font-size:12px}#allImages{inset:8vh 3vw auto!important;width:94vw!important;max-height:80vh;padding:15px}body.content-page>header{flex-wrap:wrap;height:auto}body.content-page #menuleft{flex-wrap:wrap;font-size:12px}body.content-page>header img{width:150px}body.content-page #textinhalt{margin:30px auto;padding:0 22px}.tool-panel #buttons,.tool-panel #buttons2{grid-template-columns:repeat(3,minmax(0,1fr))}.tool-panel #buttons button canvas,.tool-panel #buttons2 button canvas{height:70px}}
@media(max-width:360px){.wrap{padding-inline:18px}.site-header{padding-inline:15px}.brand{font-size:21px}.brand-icon{display:none}.hero h1{font-size:50px}.hero-facts{gap:16px}.hero .micro{font-size:11px}.hero-facts b{font-size:17px}.hero-art figcaption{flex-wrap:wrap}.eyebrow{font-size:10px}.editor-topbar button{padding-inline:8px;font-size:10px}.tool-panel{padding:14px}.tool-tabs{padding-inline:5px}.tool-tabs button{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Keep the image and the selected controls in the same viewport. */
.home-page section div{letter-spacing:normal;line-height:inherit;color:inherit}
#photoeditdiv{height:calc(100vh - 66px);height:calc(100dvh - 66px);padding:12px 18px 14px}
#canvasFrame{height:100%;display:flex;flex-direction:column;min-height:0}
.editor-topbar{flex:0 0 auto;margin-bottom:10px}
.editor-layout{flex:1;min-height:0;grid-template-columns:minmax(0,1fr) 360px;gap:14px}
.canvas-stage{position:relative;top:auto;height:100%;min-height:0!important;padding:12px;overflow:hidden}
.canvas-stage #allcanvas{margin:auto;max-height:calc(100% - 30px)}
.canvas-status{flex:0 0 auto;margin-top:8px;font-size:11px;line-height:1.4}
.editor-tools{height:100%;min-height:0;display:flex;flex-direction:column;padding:0}
.tool-tabs{flex:0 0 auto;margin-bottom:8px}
#photoedit{flex:1;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;min-height:0;padding:0 3px 0 0!important}
#photoedit [hidden],#canvasFrame [hidden]{display:none!important}
#photoedit .slider-label[style*="display: none"],#photoedit .slider-label[style*="display:none"]{display:none!important}
.tool-panel{padding:14px;min-height:100%;border-radius:10px}
.tool-panel>h2{font-size:18px;margin:0 0 12px;letter-spacing:-.025em}
.tool-panel fieldset{margin-bottom:10px!important}
.tool-panel .slider-label{grid-template-columns:minmax(0,1fr) auto;gap:0 8px;padding:4px 0!important;margin:4px 0!important;line-height:1.4;min-width:0}
.tool-panel .slider-label>em{font-size:13px;align-self:center}
.tool-panel .slider-label>output{font-size:13px;min-width:40px;align-self:center}
.tool-panel .slider-label input[type=range]{max-width:none!important;width:100%!important;margin:0!important;grid-column:1}
.tool-panel .slider-label button{margin:0;font-size:11px}
.tool-panel .max120px,.tool-panel #overcolor1,.tool-panel #overcolor2{background:none;padding:0}
.tool-panel label[id$=colorbg],.tool-panel label[id$=colorwg],.tool-panel #shhuecolor{background:none!important}
.tool-panel input[type=color]{background:var(--surface);box-shadow:none}
.tool-panel input[type=range]#colortemps{background:none}
.tool-panel textarea{font-size:14px;text-align:left;line-height:1.5;box-shadow:none}
.tool-panel .text-tools{border-top:1px solid var(--line);margin-top:16px;padding-top:8px}
.tool-panel .text-tools>summary{min-height:44px;cursor:pointer;font-size:14px;font-weight:600;padding:10px 0;border-radius: 7px;border: 1px solid var(--line);background: var(--surface2);margin-bottom: 3px;}
.tool-panel .text-tools>summary:hover{background: var(--surface);}
.tool-panel .text-tools legend{display:none}
.tool-panel .text-tools .inlineblock{display:flex;flex-wrap:wrap;gap:8px;width:100%;margin-top:8px}
.tool-panel .text-tools .inlineblock>label{display:flex;align-items:center;gap:6px}
.tool-panel .text-tools .inlineblock>br{display:none}
.tool-panel .text-tools select{width:calc(50% - 4px)!important;min-width:0}
.tool-panel #imageTxiEye,.tool-panel #imageTxaEye,.tool-panel #imageTrEye1,.tool-panel #imageTrEye2,.tool-panel #lineColEye,.tool-panel #selBigColorEye{width:auto;height:44px;padding:5px 4px;font-size:11px;min-width:44px}
.adjust-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-bottom:13px}
.adjust-picker button{font-size:12px;line-height:1.2;padding:8px;min-height:44px;text-align:left}
.adjust-picker button[aria-pressed=true],.effect-picker button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.tool-panel #filtercss>fieldset{padding:4px 0!important;margin:0!important}
.tool-panel #resetAllFilter.reset-adjustments{font-size:11px;min-height:44px;margin:8px 0 0;padding:8px 12px}
.effect-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-bottom:12px}
.effect-picker button{font-size:11px;line-height:1.2;padding:8px 3px}
.tool-panel .effect-parameters{background:none;color:var(--ink);padding:0;letter-spacing:normal}
.active-effect-name{font-size:14px;letter-spacing:normal;margin:8px 0}
.blend-tools{font-size:12px;margin:7px 0}.blend-tools summary{min-height:44px;padding:10px 0;cursor:pointer}
.croppr-handle{width:44px;height:44px;min-width:44px;min-height:44px;border:0;background:radial-gradient(circle,#fff 0 6px,#202820 6px 8px,transparent 8px)}
.proportions{display:flex!important;align-items:center;gap:10px;min-height:44px;font-size:12px!important}
.croppr-container{aspect-ratio:auto;height:100%}
body.content-page .site-header .brand{font-size:24px}
body.content-page #menuleft .desktop-link{padding-inline:7px}
.tool-panel .pc-tab section div{background:none!important;color:var(--ink);letter-spacing:normal;line-height:1.5;padding:0;width:auto}
.tool-panel #buttons,.tool-panel #buttons2,.tool-panel #buttons3{width:100%;gap:6px;margin-top:10px}
.tool-panel #buttons button,.tool-panel #buttons2 button,.tool-panel #buttons3 button{font-size:11px;min-height:75px}
.tool-panel #buttons button canvas,.tool-panel #buttons2 button canvas{height:46px}
.tool-panel #easytxt>.inlineblock{border:0;box-shadow:none;font-size:0}
.tool-panel #easytxt>.inlineblock>br{display:none}
.tool-panel #easytxt>.inlineblock button{font-size:13px}
.tool-panel #easysiz{width:100%}
.tool-panel #copypaste b{font-size:12px}
.offline-status{margin-top:5px;font-size:10px;line-height:1.4}
.editor-message{flex:0 0 auto;max-height:130px;overflow:auto;margin-bottom:8px;padding:8px 12px;font-size:12px}
.editor-message p{font-size:12px}
@media(max-width:900px){
 .editor-layout{grid-template-columns:minmax(0,1fr) 320px}
}
@media(max-width:760px){
 .editor-mode .site-header{height:50px;padding:3px 12px;flex:0 0 auto}
 .editor-mode .site-header .brand{font-size:20px}
 .editor-mode .site-header .brand-icon{width:26px;height:26px;line-height:24px;font-size:22px}
 .editor-mode #lightdark{font-size:21px;width:44px;height:44px}
 .editor-mode #photoeditdiv{height:calc(100vh - 50px);height:calc(100dvh - 50px);padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
 .editor-topbar{gap:5px;flex-wrap:nowrap;margin:0 0 6px}
 .editor-topbar button{min-height:44px;padding:6px 8px;font-size:11px;white-space:nowrap}
 .editor-topbar .editor-open{margin-left:auto}
 .editor-layout{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(100px,40%) minmax(0,1fr);gap:7px}
 .canvas-stage{width:100%;padding:7px;min-height:0;max-height:none}
 .canvas-stage #allcanvas{max-width:100%!important;max-height:calc(100% - 24px);width:min(100%,var(--canvas-mobile,240px))!important}
 .canvas-status{font-size:10px;margin-top:5px;line-height:1.25}
 .editor-tools{padding:0;min-height:0;width:100%;gap:0}
 .tool-tabs{position:static;order:2;flex:0 0 auto;padding:4px 0 0;margin:0;border:0;box-shadow:none;background:var(--bg);border-radius:0;gap:4px}
 .tool-tabs button{font-size:11px;min-height:44px;padding:6px 3px;border:1px solid var(--line);background:var(--surface);border-radius:7px}
 .tool-tabs button[aria-selected=true]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
 #photoedit{padding-right:0!important;scrollbar-gutter:auto}
 .tool-panel{padding:11px 12px;min-height:100%}
 .tool-panel>h2{font-size:16px;margin-bottom:9px}
 .adjust-picker{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-bottom:9px}
 .adjust-picker button{font-size:10px;min-height:44px;text-align:center;padding:5px 2px;overflow-wrap:anywhere}
 .tool-panel .slider-label{padding-block:3px!important;margin:0!important}
 .tool-panel .slider-label>em,.tool-panel .slider-label>output{font-size:12px}
 .tool-panel .text-tools{margin-top:9px;padding-top:4px}
 .effect-picker{margin-bottom:7px}
 .tool-panel #buttons,.tool-panel #buttons2{grid-template-columns:repeat(4,minmax(0,1fr))}
 .tool-panel #buttons button,.tool-panel #buttons2 button{font-size:10px}
 .tool-panel #buttons button canvas,.tool-panel #buttons2 button canvas{height:42px}
 .tool-panel .slider-label button.slider-reset{min-height:44px;font-size:10px;padding-inline:7px}
 .offline-status{display:none}
 .editor-message{max-height:95px;padding:6px 9px;gap:6px}
 .editor-message p{min-width:140px;font-size:11px}
 .editor-message button{font-size:11px;min-height:44px}
 .editor-progress{bottom:70px;left:8px;right:8px;padding:10px;font-size:12px}
}
@media(max-width:760px) and (max-height:540px) and (orientation:landscape){
 .home-page .hero{padding-top:20px}
 .home-page .hero h1{font-size:42px}
 .home-page .hero .eyebrow{margin-bottom:10px}
 .home-page .hero .lead{font-size:14px;margin-block:12px;max-width:450px}
 .home-page .hero .start-button{min-height:44px;padding-block:9px}
 .editor-mode .site-header{display:none}
 .editor-mode #photoeditdiv{height:100vh;height:100dvh}
 .editor-layout{grid-template-columns:minmax(0,1fr) minmax(270px,44%);grid-template-rows:minmax(0,1fr)}
 .canvas-stage{height:100%}
 .tool-panel{padding:9px}
 .adjust-picker{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* Editor refinements: open desktop adjustments, compact mobile selectors,
   original shape sprites, native-size zoom and image-only printing. */
.history-actions{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto}
.tool-panel #filtercss{display:block;width:100%}
.history-icon{display:none}
.editor-topbar #btnzoomcan{min-height:44px;background-image:none!important}
.editor-topbar #btnzoomcan[aria-pressed=true]{background:var(--accent);color:var(--on-accent)}
.editor-open-more{width:44px;min-width:44px;min-height:44px;padding:0!important;font-size:25px!important;line-height:1}
.canvas-viewport{flex:1 1 0;width:100%;min-width:0;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.canvas-stage .canvas-viewport #allcanvas{max-height:none;flex:0 0 auto}
.canvas-viewport.is-zoomed{display:block;overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y}
.canvas-stage .canvas-viewport.is-zoomed #allcanvas{width:var(--canvas-natural-width)!important;height:var(--canvas-natural-height)!important;max-width:none!important;max-height:none!important;margin:0!important;aspect-ratio:auto!important;overflow:visible!important}
.canvas-stage .canvas-viewport.is-zoomed .divcanvass{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important}
.canvas-stage .canvas-viewport.is-zoomed #divCanvas{position:relative}
.blend-tools{display:block;margin:8px 0 3px}
.tool-panel .blend-tools .blend-row{display:grid!important;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:9px;width:100%;margin:4px 0!important}
.tool-panel .blend-tools .blend-row[style*="display: none"]{display:none!important}
.tool-panel .blend-tools .blend-row em{font-size:12px;white-space:nowrap}
.tool-panel .blend-tools select{width:100%!important;font-size:12px}
.tool-panel #buttons3{display:grid;grid-template-columns:repeat(auto-fill,50px);justify-content:start;gap:8px;width:100%}
.tool-panel #buttons3 button.fotoformbto{display:block;width:50px!important;height:50px!important;min-width:50px;min-height:50px!important;max-width:50px;max-height:50px;padding:0!important;margin:0!important;border-radius:5px;position:relative;background-image:url(partikel.png);background-repeat:no-repeat;background-size:600px 50px,100% 100%;background-position:var(--shape-x,0) 5px,0 0!important;overflow:hidden}
.tool-panel #buttons3 button.fotoformbto:nth-of-type(n+13){background-image:linear-gradient(var(--surface2),var(--surface2));background-size:100% 100%}
.tool-panel #buttons3 button.fotoformbto canvas{position:absolute;inset:0;display:block;width:50px!important;height:50px!important;max-width:none;max-height:none;margin:0}
.tool-panel #buttons3 .preset-caption,.tool-panel #buttons3 br{display:none!important}
.tool-panel #buttons3 button.btnselected{outline:3px solid var(--accent)!important;outline-offset:2px}
.tool-panel #imagesUldiv{display:block;margin-bottom:12px}
.tool-panel #imagesUldiv .geometry-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;width:100%}
.tool-panel #imagesUldiv .geometry-actions button{font-size:11px;line-height:1.3;padding:7px 4px;min-height:44px;margin:0;white-space:normal}
.tool-panel #imagesizeinfo{display:grid;grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr) 14px auto;align-items:center;gap:4px;width:100%;font-size:12px}
.tool-panel #imagesizeinfo #wcansize,.tool-panel #imagesizeinfo #hcansize{display:block;width:100%;min-width:0;margin:0}
.tool-panel #imagesizeinfo input{width:100%;min-width:0;font-size:13px;padding:7px 4px}
.tool-panel #imagesizeinfo button{font-size:11px;padding:7px 8px;white-space:nowrap}
.tool-panel #wcansize:before,.tool-panel #hcansize:before{display:none}
.dimension-separator,.dimension-unit{text-align:center;font-size:12px}
.tool-panel #copypaste button{background:var(--surface2)!important;background-image:none!important;color:var(--ink);box-shadow:none}
.tool-panel #copypaste button:hover,.tool-panel #easytxt>.inlineblock button:hover{background:var(--surface)!important;}
.tool-panel #copypaste button svg{filter:none;fill:currentColor}
.print-button{width:100%;margin-top:12px}
#print-surface{display:none}
@media(max-width:760px){
 .editor-mode #menuleft{gap:4px}
 .history-actions{gap:4px}
 .history-actions button{width:44px;min-width:44px;min-height:44px;padding:0}
 .history-actions .history-label{display:none}
 .history-actions .history-icon{display:block;font-size:25px;line-height:1}
 .editor-topbar #btnzoomcan{padding:6px 9px;font-size:11px}
 .adjust-picker{flex:0 0 auto;margin:0 0 6px;grid-template-columns:repeat(4,minmax(0,1fr))}
 #panel-adjust>h2{display:none}
 .tool-panel .blend-tools .blend-row{gap:8px}
}
@media print{
 @page{margin:10mm}
 html,body{height:auto!important;min-height:0!important;overflow:visible!important;background:#fff!important;margin:0!important;padding:0!important}
 body>*:not(#print-surface){display:none!important}
 body>#print-surface{display:block!important;position:static!important;margin:0!important;padding:0!important;background:#fff!important;border:0!important;break-inside:avoid}
 #print-surface img{display:block!important;position:static!important;width:auto!important;height:auto!important;max-width:100%!important;max-height:calc(100vh - 20mm)!important;object-fit:contain;margin:0 auto!important;box-shadow:none!important;border:0!important;break-inside:avoid;print-color-adjust:exact;-webkit-print-color-adjust:exact}
}
@media(max-width:760px) and (max-height:540px) and (orientation:landscape){
 .editor-layout{grid-template-columns:1fr;grid-template-rows:minmax(85px,35%) minmax(0,1fr)}
}
/* Compact slider captions and text controls. */
.tool-panel .slider-label{position:relative;grid-template-columns:minmax(0,1fr) 56px;grid-template-rows:44px;gap:0 8px;padding:14px 0 3px!important;min-height:61px}
.tool-panel .slider-label>em{font-size:12px;align-self:center;position:absolute!important;top:0;left:0;line-height:1.2}
.tool-panel .slider-label>input[type=range]{grid-column:1;grid-row:1;align-self:end}
.tool-panel .slider-label>button.slider-reset{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:56px;min-height:44px;padding:3px 4px;line-height:1.2}
.slider-reset output{display:block;font-size:12px;line-height:1.2;font-variant-numeric:tabular-nums;pointer-events:none}
.slider-reset .reset-caption{display:block;font-size:9px;line-height:1.2;pointer-events:none}
.tool-panel .blend-tools .blend-row{display:flex!important;flex-wrap:nowrap;align-items:center;gap:9px}
.tool-panel .blend-tools .blend-row em{position:static!important;flex:0 0 auto;width:auto!important;white-space:nowrap}
.tool-panel .blend-tools .blend-row select{flex:1 1 0;min-width:0;width:auto!important;max-width:none;margin:0}
.tool-panel .text-tools .text-content-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;width:100%;align-items:start}
.tool-panel .text-tools .text-content-row>label{display:block;width:100%;min-width:0;margin:0}
.tool-panel .text-tools #textGif{display:block;width:100%;min-width:0;min-height:100px;height:100px;max-width:100%;resize:vertical;text-align:left;line-height:1.5}
.tool-panel .text-tools .text-color-controls{display:flex;flex-direction:column;gap:6px;width:max-content}
.tool-panel .text-tools .text-color-controls>label{display:flex;align-items:center;gap:4px;width:auto;margin:0}
.tool-panel .text-tools .text-color-controls input[type=color]{width:44px;height:44px;min-height:44px;padding:3px}
.tool-panel .text-tools .text-font-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(44px,.8fr) minmax(0,1.05fr) minmax(0,1.1fr);gap:4px;width:100%;margin:8px 0}
.tool-panel .text-tools .text-font-row select{width:100%!important;min-width:0;max-width:100%;margin:0;padding:6px 4px;font-size:11px;min-height:44px;background: var(--surface2);}
.tool-panel .text-tools .text-font-row select:hover{background: var(--surface);}
.font-load-status{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.print-pdf-note{font-size:12px!important;line-height:1.5;margin-top:8px}
.tool-panel.adjust-slider-dock{flex:0 0 auto;min-height:0;padding:5px 12px 0;margin-bottom:5px;overflow:hidden}
.adjust-slider-dock #filtercss fieldset{margin:0!important}
@media(max-width:760px){
 .canvas-status{font-size:10px;margin-top:0;line-height:1.2;min-height:auto}
 .canvas-stage{padding:7px;padding-bottom:0;width:100%;min-height:0;max-height:none}
 .tool-panel .slider-label{padding:14px 0 3px!important;margin:0!important}
 .tool-panel .slider-label>em{font-size:12px}
 .tool-panel.adjust-slider-dock{padding:4px 12px 0}
}
@media(max-width:760px) and (max-height:540px) and (orientation:landscape){
 .adjust-picker{grid-template-columns:repeat(8,minmax(0,1fr))}
}
/* Shared navigation and the original PhotoPWA icon. */
.site-header .brand-icon{display:inline-flex;width:36px;height:36px;flex:0 0 36px;margin-right:8px;background:none;border-radius:0;line-height:1}
.site-header .brand-icon img{display:block;width:100%;height:100%;object-fit:contain}
body.content-page #textinhalt{overflow-wrap:anywhere}
body.content-page pre{white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%}
.content-breadcrumb{font-size:13px;margin-bottom:22px}
.content-lead{font-size:18px;max-width:70ch}
.content-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;align-items:center}
.content-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-block:24px}
.content-card,.content-note{padding:20px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.content-card h2,.content-card h3{margin-top:0!important}
.content-note{margin-block:24px}
.content-table-scroll{max-width:100%;overflow-x:auto;margin-block:22px}
.content-table-scroll table{width:100%;border-collapse:collapse;font-size:14px}
.content-table-scroll th,.content-table-scroll td{padding:12px;border:1px solid var(--line);text-align:left;vertical-align:top}
.content-table-scroll th{background:var(--surface2)}
.content-small{font-size:13px}
.site-footer #menulang{display:flex;flex-wrap:wrap;gap:4px 20px;flex-basis:100%;padding-top:18px;border-top:1px solid var(--line);font-size:12px}
.site-footer #menulang a{display:inline-flex;align-items:center;min-height:44px;padding-block:8px}
.site-footer .copyright{flex-basis:100%}
#contactForm{display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%;max-width:560px;margin:28px 0;padding:24px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:16px}
#contactForm label{display:block;font-weight:600;font-size:14px;margin:0 0 6px}
#contactForm input[type=text],#contactForm input[type=email],#contactForm textarea{width:100%;margin:0 0 20px;padding:11px 12px;background:var(--surface);color:var(--ink);line-height:1.5}
#contactForm textarea{min-height:160px;resize:vertical}
#contactForm #subname{display:none}
#contactForm #submitbtn{align-self:flex-start;min-width:100px;padding:10px 22px;background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);cursor:pointer}
#contactForm #submitbtn:disabled{opacity:.55;cursor:wait}
#messageok{display:block;font-size:14px;margin-top:12px;min-height:0}
#messageok:empty{display:none}
#messageok[data-state=error]{color:var(--ink);font-weight:600}
@media(max-width:760px){
 .content-hero,.content-grid{grid-template-columns:1fr}
 #contactForm{padding:16px}
}
.site-menu{position:relative;flex:0 0 auto}
.site-header:has(.site-menu[open]){z-index:11000}
.site-menu>summary{display:flex;align-items:center;justify-content:center;list-style:none;cursor:pointer;width:44px;height:44px;min-height:44px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);font-size:23px}
.site-menu>summary::-webkit-details-marker{display:none}
.site-menu-panel{position:absolute;right:0;top:calc(100% + 8px);width:min(320px,calc(100vw - 24px));max-height:calc(100dvh - 90px);overflow:auto;overscroll-behavior:contain;padding:12px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 30px #0003;z-index:1500}
.site-menu-panel nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}
#menuleft .site-menu-panel a{display:flex;align-items:center;min-height:44px;padding:8px 10px;margin:0;font-size:13px;border-radius:6px;white-space:normal}
#menuleft .site-menu-panel a:hover,#menuleft .site-menu-panel a[aria-current]{background:var(--surface2)}
.site-menu-panel .language-links{border-top:1px solid var(--line);margin-top:10px;padding-top:10px}
.site-menu-panel .language-links p{grid-column:1/-1;font-size:12px;font-weight:600;margin:0 10px 5px}
@media(max-width:760px){
 .site-header .brand-icon,.editor-mode .site-header .brand-icon{display:inline-flex;width:32px;height:32px;flex-basis:32px}
 .site-menu{position:static}
 .site-menu-panel,.editor-mode .site-menu-panel{right:12px;top:calc(100% + 8px)}
 .editor-mode .site-header .brand{width:44px;min-width:44px;height:44px;font-size:0;letter-spacing:0;justify-content:center}
 .editor-mode .site-header .brand>span{display:none}
 .editor-mode .site-header .brand-icon{margin:0}
 .editor-mode #menuleft{margin-left:auto}
}
@media(max-width:430px){
 .home-page .site-header{padding-inline:12px;gap:6px}
 .home-page .site-header #CreateKalei{display:none}
 .site-header #menuleft{gap:6px}
}
@media(max-width:760px) and (max-height:540px) and (orientation:landscape){
 .editor-mode .site-header{display:flex;height:44px;padding-block:0}
 .editor-mode #photoeditdiv{height:calc(100vh - 44px);height:calc(100dvh - 44px)}
 .editor-layout{grid-template-rows:minmax(70px,30%) minmax(0,1fr)}
 .site-menu-panel{max-height:calc(100dvh - 52px)}
}
@media print{
 :root,:root[data-theme=dark],html,body{color-scheme:light!important;background:#fff!important;color:#000!important}
 @page{background:#fff;color-scheme:light}
 #print-surface{color-scheme:light!important;background:#fff!important}
}

/* Adjust / Text selection; retain the existing tool and text styles. */
.adjust-mode-picker{grid-template-columns:repeat(2,minmax(0,1fr));flex:0 0 auto;margin-bottom:6px}
.tool-panel .text-mode-panel{border-top:0;margin-top:0;padding-top:0}
@media(max-width:760px){.adjust-mode-picker{margin-bottom:0}}
.editor-topbar .adjust-mode-picker{min-width:130px;margin:0}

/* Reserve the native titlebar only while Window Controls Overlay is visible. */
@media screen{
 html[data-window-controls-overlay] body{padding-top:var(--pwa-titlebar-space,0px)!important}
 html[data-window-controls-overlay] .site-header{min-height:46px}
 html[data-window-controls-overlay] .window-titlebar{position:fixed;top:0;left:var(--pwa-titlebar-left,0px);width:var(--pwa-titlebar-width,0px);height:var(--pwa-titlebar-space,0px);background:var(--bg);z-index:13000;-webkit-app-region:drag;app-region:drag}
 html[data-window-controls-overlay] body.editor-mode #photoeditdiv{height:calc(100vh - var(--pwa-titlebar-space,0px) - var(--pwa-header-height,66px));height:calc(100dvh - var(--pwa-titlebar-space,0px) - var(--pwa-header-height,66px))}
 html[data-window-controls-overlay] .site-menu-panel{max-height:calc(100dvh - var(--pwa-titlebar-space,0px) - var(--pwa-header-height,66px) - 20px)}
}

@media screen and (max-width:760px){
 html[data-window-controls-overlay] .editor-layout{grid-template-rows:minmax(50px,2fr) minmax(min-content,3fr)}
 html[data-window-controls-overlay] #photoedit{contain:size}
}

/* Compact editor layout. Main tools, modes and adjustment names have
   separate visual levels; image presets retain their original thumbnail sizes. */
@media screen{
 .editor-mode #photoeditdiv{padding:5px}
 .editor-mode .canvas-stage{padding:5px}
}
@media screen and (max-width:760px){
 .editor-mode .site-header,
 html[data-window-controls-overlay] .editor-mode .site-header{height:25px;min-height:25px;padding:0 3px;gap:4px;border-bottom:0}
 .editor-mode .site-header .brand{width:25px;min-width:25px;height:25px}
 .editor-mode .site-header .brand-icon{width:23px;height:23px;flex-basis:23px}
 .editor-mode #menuleft{gap:4px;height:25px}
 .editor-mode .site-menu>summary,
 .editor-mode #lightdark,
 .editor-mode .history-actions button{width:25px;height:25px;min-width:25px;min-height:25px;padding:0;border-radius:4px;font-size:18px;line-height:1}
 .editor-mode .history-actions{gap:3px}
 .editor-mode .history-actions button span:first-child{font-size:19px}
 .editor-mode #menuleft>button,
 .editor-mode #menuleft>a{height:25px;min-height:25px;padding:0 4px;font-size:10px;line-height:23px}
 .editor-mode #photoeditdiv{height:calc(100vh - 25px);height:calc(100dvh - 25px);padding:0 3px max(3px,env(safe-area-inset-bottom))}
 .editor-mode .editor-topbar{height:25px;min-height:25px;gap:4px;margin:0 0 2px;flex-wrap:nowrap}
 .editor-mode .editor-topbar button{height:25px;min-height:25px;padding:0 7px;border-radius:4px;font-size:10px;line-height:23px}
 .editor-mode .editor-layout,
 html[data-window-controls-overlay] .editor-mode .editor-layout{grid-template-rows:minmax(0,7fr) minmax(0,3fr);gap:3px}
 .editor-mode .canvas-stage{padding:3px;border-radius:5px}
 .editor-mode .canvas-status{font-size:10px;margin-top:0;line-height:1.2;min-height:auto}
 .editor-mode .editor-tools{gap:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
 .editor-mode .tool-panel>h2,.editor-mode .active-effect-name{display:none}
 /* Primary navigation: one continuous bar, with a solid active tool. */
 .editor-mode .tool-tabs{position:sticky;top:0;z-index:2;order:0;gap:0;padding:0;margin:0;min-height:22px;background:var(--surface2);border:1px solid var(--line);border-radius:4px;overflow:hidden}
 .editor-mode .tool-tabs button{height:20px;min-height:20px;padding:0 2px;border:0;border-radius:0;background:transparent;font-size:10px;font-weight:650;line-height:20px;white-space:nowrap}
 .editor-mode .tool-tabs button+button{border-left:1px solid var(--line)}
 .editor-mode .tool-tabs button[aria-selected=true]{background:var(--accent);color:var(--on-accent)}
 /* Secondary selection: text tabs with an underline rather than filled tiles. */
 .editor-mode .adjust-mode-picker,
 .editor-mode .effect-picker{gap:0;margin:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}
 .editor-mode .effect-picker button{height:24px;min-height:24px;padding:0 3px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--muted);font-size:10px;line-height:18px}
 .editor-mode .effect-picker button[aria-pressed=true]{background:transparent;border-color:var(--accent);color:var(--ink);font-weight:700}
 /* Adjustment names: compact, neutral choices attached to the active slider. */
 .editor-mode .adjust-picker{gap:2px;margin:0;padding:0 3px 2px;border-bottom:1px solid var(--line)}
 .editor-mode .adjust-picker button{height:20px;min-height:20px;padding:0 2px;border:1px solid transparent;border-radius:3px;background:transparent;color:var(--muted);font-size:10px;line-height:18px;white-space:nowrap}
 .editor-mode .adjust-picker button[aria-pressed=true]{border-color:var(--line);background:var(--surface2);color:var(--ink);font-weight:650}
 .editor-mode .tool-panel{padding:3px;min-height:0;border-radius:4px}
 .editor-mode .tool-panel.adjust-slider-dock{margin:0;padding:0 3px;border:0;background:transparent}
 .editor-mode .tool-panel .slider-label{grid-template-columns:minmax(0,1fr) 76px;grid-template-rows:20px;min-height:34px;padding:13px 0 5px!important;gap:0 6px}
 .editor-mode .tool-panel .slider-label>em{font-size:11px;line-height:12px}
 .editor-mode .tool-panel .slider-label input[type=range]{height:20px;min-height:20px;padding:0;margin:0;align-self:center}
 .editor-mode .tool-panel .slider-label button.slider-reset{height:20px;min-height:20px;width:76px;padding:0 3px;flex-direction:row;justify-content:center;gap:5px;line-height:18px;border-radius:3px}
 .editor-mode .slider-reset output{font-size:11px}
 .editor-mode .slider-reset .reset-caption{font-size:9px}
 .editor-mode .tool-panel button:not(:has(canvas)):not(.shape-preset):not([style*="background-image"]){min-height:20px;padding-block:0;font-size:10px;line-height:18px;border-radius:3px}
 .editor-mode .tool-panel .slider-label button.slider-reset{height:20px;min-height:20px}
 .editor-mode #photoedit{padding-right:0!important;scrollbar-gutter:auto}
 .editor-mode .editor-progress{bottom:5px;left:3px;right:3px}
 .editor-mode .tool-panel #resetAllFilter.reset-adjustments{height:20px;min-height:20px;margin:0;padding:0 6px;line-height:18px}
 .editor-mode #panel-adjust{padding-block:0;border:0;background:transparent}
 .editor-mode #panel-adjust .text-mode-panel{padding-top:0}
 .editor-mode .tool-panel :is(#imagesizeinfo,#imagesUldiv,#copypaste,#easytxt) button,
 .editor-mode .tool-panel #shareAsPng{height:20px;min-height:20px;padding:0 4px;line-height:18px}
 .editor-mode .tool-panel #imagesizeinfo input{height:20px;min-height:20px;padding:0 4px;font-size:11px;line-height:18px}
 .editor-mode #cropdivinfo button{height:20px!important;min-height:20px!important;padding:0 4px;line-height:18px}
 .editor-mode .adjust-slider-dock #filtercss>fieldset{padding:0!important}
 .editor-mode .editor-tools:has(#adjust-slider-dock:not([hidden])) #photoedit{flex:0 0 auto;min-height:20px;overflow:visible}
}

/* Compact mobile crop fields and a clear crop confirmation. */
@media screen and (max-width:760px){
 .editor-mode select{height:22px!important;min-height:22px!important;max-height:22px!important;padding-block:0!important;font-size:11px;line-height:20px}
 .editor-mode #cropdivinfo{padding:6px!important;margin-bottom:6px}
 .editor-mode #cropdivinfo h3,.editor-mode #cropdivinfo h4{font-size:12px;line-height:1.2;margin:7px 0 3px;letter-spacing:normal}
 .editor-mode #cropdivinfo>br{display:none}
 .editor-mode #cropdivinfo .selection-info{font-size:11px;line-height:1.4}
 .editor-mode #cropdivinfo .selection-info:has(>#wcansizecr){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:4px;align-items:center;padding:4px;border:1px solid var(--line);border-radius:4px}
 .editor-mode #cropdivinfo :is(#wcansizecr,#hcansizecr){display:flex;align-items:center;gap:3px;min-width:0;margin:0;font-size:10px;white-space:nowrap}
 .editor-mode #cropdivinfo :is(#wcansizevl,#hcansizevl){width:0;flex:1;min-width:0;height:22px;min-height:22px;padding:0 3px;font-size:11px;line-height:20px}
 .editor-mode #cropdivinfo .selection-info:has(>#wcansizecr)>button{margin:0;font-size:10px}
 .editor-mode #cropdivinfo .crop-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 8px;margin-block:7px}
 .editor-mode #cropdivinfo .crop-fields p{grid-column:1/-1;margin:0;font-size:10px;line-height:1.3}
 .editor-mode #cropdivinfo .crop-fields label{display:grid;gap:1px;min-width:0;margin:0;font-size:10px;line-height:1.3}
 .editor-mode #cropdivinfo .crop-fields input{height:22px;min-height:22px;min-width:0;padding:0 5px;font-size:12px;line-height:20px}
 .editor-mode #cropdivinfo :is(#aspectRatiobt button,#aspectRatioRes){display:inline-flex;align-items:center;justify-content:center;gap:3px;margin:2px;padding-inline:4px;font-size:10px}
 .editor-mode #cropdivinfo :is(#aspectRatiobt button,#aspectRatioRes)>br{display:none}
 .editor-mode #cropdivinfo #aspectRatioS{display:block;width:100%;height:32px!important;min-height:32px!important;margin:6px 0 3px;padding:0 10px;background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);font-size:13px;font-weight:700;line-height:30px;border-radius:5px}
 .editor-mode #cropdivinfo #aspectRatioS:hover{filter:brightness(1.08)}
}

/* Range labels are block grids; legacy line breaks add unwanted empty rows. */
@media screen{
 .editor-mode .tool-panel .pc-tab .tab1 .slider-label+br{display:none}
}
@media screen and (max-width:760px){
 .editor-mode .tool-panel #duocoloropt .switch-field label{height:22px;min-height:22px;padding:0 5px;line-height:20px;justify-content:center}
}