/* Website Studio: editing and preview have their own stable workspaces. */
:root,[data-theme="light"]{--bg:#f7f5ef;--surface:#fffef9;--surface-2:#ecefe5;--fg:#26372b;--fg-muted:#5b655c;--fg-faint:#70796e;--primary:#d94b28;--border:rgba(38,55,43,.13);--border-strong:rgba(38,55,43,.24);--grad-warm:linear-gradient(#d94b28,#d94b28);--font-head:'Satoshi',sans-serif;--font-body:'General Sans',sans-serif;--sidebar:400px}
[data-theme="dark"]{--bg:#17251d;--surface:#203226;--surface-2:#2a4030;--fg:#f4f1e7;--fg-muted:#c0cbb9;--fg-faint:#acbaa4;--primary:#ff916f;--border:#e3edd421;--border-strong:#e3edd441;--grad-warm:linear-gradient(#ff916f,#ff916f)}
body.builder-body{height:100dvh;overflow:hidden;background:var(--bg);color:var(--fg)}.grain,body::after{display:none!important}.bhead{height:74px;padding:0 25px;background:var(--bg);backdrop-filter:none;box-shadow:none}.bhead::after{display:none}.bhead-brand{font-size:23px;letter-spacing:-.8px}.bhead-tag{border:none;color:var(--fg-muted);font-size:10px;font-weight:500;letter-spacing:0;text-transform:none;padding-left:16px;border-left:1px solid var(--border-strong);border-radius:0}.bhead-actions{gap:10px}.bhead-icon{width:35px;height:35px;border-radius:50%}.bhead-exit{font-size:11px;padding:8px 12px}.bsave{font-size:10px;background:transparent;border:0;opacity:1;transform:none}.bsave[data-state="idle"]{color:var(--fg-muted)}.bsave svg{display:none}.btn{border-radius:6px;box-shadow:none!important;letter-spacing:0}.btn-primary{background:var(--primary);border-color:var(--primary);color:white}.btn-primary::before,.btn-primary::after{display:none}[data-theme="dark"] .btn-primary{color:#17251d}.btn:focus-visible,button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.dock{position:fixed;inset:74px auto 0 0;width:var(--sidebar);height:auto;transform:none;animation:none;transition:none;border:0;border-right:1px solid var(--border-strong);border-radius:0;background:var(--surface);box-shadow:none;backdrop-filter:none;display:flex;flex-direction:column;z-index:120}.studio-panel-title{padding:25px 27px 18px;border-bottom:1px solid var(--border)}.studio-panel-title>span{font-size:9px;letter-spacing:1.5px;color:var(--fg-muted)}.studio-panel-title>strong{display:block;font-size:26px;letter-spacing:-1px;margin-top:5px;color:var(--fg)}.studio-panel-title p{font-size:11px;line-height:1.7;color:var(--fg-muted);max-width:280px;margin-top:7px}.studio-download{font:inherit;font-size:10px;color:var(--fg-muted);background:none;border:0;border-bottom:1px solid var(--border-strong);padding:5px 0;cursor:pointer;margin-top:9px}.studio-download:hover{color:var(--primary)}.dock-head{padding:17px 25px 14px;gap:12px;flex-shrink:0;border-bottom:1px solid var(--border)}.dock-back{width:32px;height:32px;border-radius:5px}.dock-meta{align-items:flex-start;gap:9px}.dock-tag{font-size:9px;letter-spacing:1px;color:var(--fg-muted)}.dock-dots{display:flex;gap:7px}.dock-dots button{width:32px;height:28px;display:grid;place-items:center;border:1px solid var(--border-strong);border-radius:4px;font:600 10px var(--font-head);background:var(--surface);color:var(--fg-muted);cursor:pointer}.dock-dots button.cur{background:var(--fg);color:var(--bg);border-color:var(--fg)}.dock-dots button.done{background:var(--surface-2);color:var(--fg)}.dock-body{max-height:none;min-height:0;flex:1;padding:25px 25px 18px;overflow:auto;scrollbar-width:thin;overscroll-behavior:contain;outline:none}.dk-q{font-size:26px;line-height:1.14;letter-spacing:-.8px;max-width:none;color:var(--fg);margin-bottom:12px}.dk-q em{font-family:'Fraunces',serif;color:var(--primary);font-weight:450}.dk-lead{font-size:12px;line-height:1.8;color:var(--fg-muted);margin-bottom:22px}.dk-field label{display:block;font-size:11px;font-weight:600;margin-bottom:7px}.dk-field label span{font-weight:400;color:var(--fg-muted)}.dk-field input,.bfield input{font-size:13px;padding:12px;border-radius:6px;background:var(--bg);box-shadow:none;min-height:44px}.dk-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}.dk-chip{border-radius:6px;padding:11px 10px;font-size:11px;min-height:46px;justify-content:flex-start;gap:9px}.dk-chip[aria-pressed="true"],.mod[aria-pressed="true"]{background:var(--surface-2);border-color:var(--fg);box-shadow:none;color:var(--fg)}.dkc-ico svg{width:19px;height:19px}.dock-footer{flex-shrink:0;padding:14px 25px 18px;border-top:1px solid var(--border);background:var(--surface);box-shadow:0 -14px 24px color-mix(in srgb,var(--surface) 78%,transparent)}.dock-footer[hidden]{display:none}.dk-actions{position:static;padding:0;background:transparent;margin:0;border:0;z-index:auto}.dk-actions .btn{width:100%;font-size:12px;min-height:47px;padding:13px 15px}.sum-note{font-size:10px;padding-bottom:22px;margin-top:10px}.sum-note a{text-decoration:underline;text-underline-offset:3px}.studio-presets{display:grid;grid-template-columns:1fr 1fr;gap:17px 12px}.studio-presets .duel-card{gap:8px;border-radius:6px}.studio-presets .dc-frame{border-radius:7px;box-shadow:none;min-height:160px}.studio-presets .dc-title{font-size:15px!important}.studio-presets .dc-hero{min-height:45px}.studio-presets .dc-nav{padding:9px;font-size:8px}.studio-presets .dc-body{padding:10px;gap:10px}.studio-presets .dc-cta{font-size:7px;padding:5px 8px}.studio-presets .dc-name{font-size:11px;color:var(--fg-muted);padding:0}.studio-presets .duel-card[aria-pressed="true"] .dc-frame{outline:2px solid var(--primary);outline-offset:2px}.studio-presets .duel-card[aria-pressed="true"] .dc-name{color:var(--primary)}.tune-row{flex-wrap:wrap;overflow:visible;padding:3px 2px 8px}.tune-sub{font-size:11px;margin-top:23px}.tn-chip{font-size:10px;border-radius:6px;min-height:39px}.tn-font{min-width:90px}.tn-lay{min-width:93px}.tn-dot{width:32px;height:32px}.tn-chip[aria-pressed="true"],.tn-dot[aria-pressed="true"]{box-shadow:none;border-color:var(--fg);background:var(--surface-2);color:var(--fg)}.mod-grid{grid-template-columns:1fr 1fr;gap:9px}.mod{padding:14px 10px;border-radius:6px;min-height:115px}.mod b{font-size:12px;line-height:1.4}.mod>span:last-child{font-size:10px}.recap{gap:6px}.recap-chip{border-radius:4px;font-size:9px}.bvalue{padding:13px;border-radius:6px;font-size:11px;align-items:flex-start;background:var(--surface-2);border-color:var(--border)}.bv-sub{font-size:10px;line-height:1.7;margin-top:7px}.bform{gap:14px}.bgrid2{grid-template-columns:1fr}.bfield label{font-size:11px}.opt-note{font-size:9px}.bguide{z-index:300}.bguide-card{border-radius:12px;background:var(--surface);color:var(--fg)}.bguide-card h2{font-size:32px}.bguide-points{font-size:13px}
.stage{position:fixed;left:var(--sidebar);right:0;top:74px;bottom:0;min-height:0;overflow:hidden;background:var(--bg)}.studio-preview-bar{height:67px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 26px;border-bottom:1px solid var(--border)}.studio-preview-bar>div:first-child{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.studio-preview-bar b{font-size:11px;font-weight:600}.studio-example{font-size:9px;color:var(--fg-muted);flex-basis:100%;padding-left:14px}.studio-live{width:6px;height:6px;background:#59845e;border-radius:50%}.studio-devices{display:flex;gap:3px;border:1px solid var(--border-strong);padding:3px;border-radius:6px}.studio-devices button{padding:6px 12px;font-size:10px;border:0;background:none;border-radius:3px;cursor:pointer;color:var(--fg-muted)}.studio-devices button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}.studio-canvas{height:calc(100% - 67px);padding:28px 26px 40px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}.studio-canvas .site{width:100%;max-width:1120px;min-height:100%;padding:0 0 15px;margin:auto;border:1px solid var(--border-strong);border-radius:9px;overflow:hidden;box-shadow:0 8px 35px #162c1912;filter:none;transform:none;container-type:inline-size}.site.wake>*{animation:none}.studio-canvas .lp-nav{padding:20px 24px}.studio-canvas .lp-logo{font-size:19px}.studio-canvas .lp-links{display:none}.studio-canvas .lp-navcta{font-size:9px;padding:8px 12px}.studio-canvas .lp-hero{padding:12px 24px 26px}.studio-canvas .lp-title{font-size:clamp(30px,4cqw,54px);line-height:1.09;font-weight:600}.studio-canvas .lp-sub{font-size:13px;line-height:1.75}.studio-canvas .lp-cta{font-size:11px;padding:12px 18px;box-shadow:none}.studio-canvas .lp-eyebrow{font-size:9px}.studio-canvas .lp-hero-media{height:290px;background-size:cover!important;background-position:center!important;box-shadow:none}.studio-canvas .lp-card{padding:10px;gap:9px}.studio-canvas .lp-photo{height:150px;background-size:cover!important;background-position:center!important}.studio-canvas .lp-cap{height:auto;background:none;opacity:1;font-size:12px;line-height:1.4;color:var(--b-fg);border-radius:0}.studio-canvas .lp-cap.short{font-size:10px;color:var(--b-muted);width:auto}.studio-canvas .lp-order{margin:10px 24px;width:auto}.studio-canvas .lp-review{margin:20px 24px;width:auto;font-size:12px}.studio-canvas .lp-hours{font-size:10px;flex-wrap:wrap}.studio-canvas .lp-foot{font-size:10px}.studio-canvas .site.lay-stage .lp-hero-copy{background:linear-gradient(90deg,#101a12c9,transparent);padding:35px;color:#fff9ed}.studio-canvas .site.lay-stage .lp-title,.studio-canvas .site.lay-stage .lp-sub,.studio-canvas .site.lay-stage .lp-eyebrow{color:#fff9ed}.studio-canvas .site.lay-split .lp-hero{gap:24px}.studio-canvas .site.lay-split .lp-hero-media{min-height:300px;height:auto}.studio-canvas .site.lay-menu .lp-photo{height:66px}.stage[data-device="mobile"] .site{width:390px;max-width:100%}.studio-mobile-tabs{display:none}.studio-noscript{position:fixed;inset:74px 0 auto;padding:22px;background:var(--surface);z-index:500}.studio-noscript a{text-decoration:underline}
@container(max-width:500px){.site .lp-cards{grid-template-columns:1fr!important}.site.lay-split .lp-hero{display:flex;flex-direction:column}.site.lay-split .lp-hero-media{width:100%;min-height:200px}.site .lp-title{font-size:34px!important}.site.lay-stage .lp-hero-copy{padding:22px!important}.site .lp-hero-media{height:220px!important}.site .lp-card:first-child{grid-column:auto!important;display:flex!important;flex-direction:column!important}.site .lp-card:first-child .lp-photo{width:100%;height:180px}.site .lp-review{font-size:12px}}
@media(max-width:1150px){:root{--sidebar:360px}.bhead-tag{display:none}.dock-body{padding-inline:20px}.studio-panel-title{padding-inline:22px}.studio-canvas{padding:20px 18px}.studio-canvas .site.lay-split .lp-hero{display:flex;flex-direction:column}.studio-canvas .site.lay-split .lp-hero-media{height:230px;min-height:230px}.studio-canvas .lp-cards{gap:10px;padding-inline:18px}.studio-canvas .lp-photo{height:110px}}
@media(max-width:760px){body.builder-body{height:100dvh}.bhead{height:64px;padding:0 15px}.bhead-brand{font-size:20px;gap:8px}.bhead-name{display:inline}.bhead-actions{gap:6px}.bhead-icon{width:31px;height:31px}.bsave{padding:0;max-width:85px;white-space:normal;font-size:8px;line-height:1.4}.bsave #saveLabel{display:inline}.bhead-exit{display:none}.studio-mobile-tabs{display:flex;position:fixed;inset:64px 0 auto;height:48px;border-bottom:1px solid var(--border-strong);z-index:190;background:var(--bg);padding:6px 15px;gap:6px}.studio-mobile-tabs button{flex:1;font:600 10px var(--font-head);border:0;background:none;color:var(--fg-muted);border-radius:4px}.studio-mobile-tabs button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}.dock{inset:112px 0 0;transform:none;width:100%;border:0;border-radius:0}.studio-panel-title{padding:18px 22px 13px}.studio-panel-title>strong{font-size:23px}.studio-panel-title p{font-size:11px;max-width:100%;margin-top:4px}.studio-download{margin-top:5px}.dock-head{padding:12px 22px}.dock-body{max-height:none;padding:22px 22px 0}.dk-q{font-size:27px}.dk-chip{font-size:12px}.stage{inset:112px 0 0}.studio-preview-bar{height:60px;padding:0 16px}.studio-preview-bar b{font-size:10px}.studio-example{font-size:8px}.studio-devices{display:none}.studio-canvas{padding:15px 12px 25px;height:calc(100% - 60px)}body[data-workview="editor"] .stage{display:none}body[data-workview="preview"] .dock{display:none}.studio-canvas .lp-cards{grid-template-columns:1fr}.studio-canvas .lp-photo{height:190px}.studio-canvas .lp-hero{padding:15px 20px 25px}.studio-canvas .lp-title{font-size:34px}.studio-canvas .site.lay-stage .lp-hero-copy{padding:24px}.bguide-card{width:calc(100% - 30px);max-height:85dvh;overflow:auto;padding:26px}.bguide-points{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.studio-import{margin-inline-start:16px}
[data-theme="light"] .bhead .theme-toggle .i-sun,[data-theme="dark"] .bhead .theme-toggle .i-moon{display:none}
[data-theme="light"] .bhead .theme-toggle .i-moon,[data-theme="dark"] .bhead .theme-toggle .i-sun{display:block}
.studio-presets .dc-frame{height:200px;padding:9px;min-height:0;width:100%}
.studio-presets .dc-title{font-size:12px!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.studio-presets .dc-split .dc-body{min-width:0}.studio-presets .dc-split .dc-hero{min-width:30px}
.studio-presets .dc-nav b{font-size:9px}.studio-presets .dc-body{padding:5px}
.studio-canvas .lp-order{background:var(--b-surface);border-color:var(--b-border)}
.studio-canvas .lp-order b{color:var(--b-fg)}
.site[style*="--b-fh"] .lp-navcta{max-width:50%;text-align:center}
.dk-actions .is-save{background:var(--primary)!important}
.site[data-font="charakter"] .lp-title{font-style:italic}
.studio-canvas .site .lp-othumb{background-size:cover;background-position:center}
.custom-accent{margin-top:14px;padding:15px;border:1px solid var(--border);border-radius:8px;background:linear-gradient(180deg,var(--bg),color-mix(in srgb,var(--surface-2) 62%,var(--bg)))}
.custom-accent-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.custom-accent-head b{display:block;font:800 13px var(--font-head);color:var(--fg);line-height:1.25}
.custom-accent-head span,.custom-accent-controls>span{display:block;font-size:10px;line-height:1.55;color:var(--fg-muted)}
.custom-accent-head button{border:1px solid var(--border-strong);background:var(--surface);color:var(--fg-muted);font:700 10px var(--font-head);padding:7px 10px;border-radius:5px;cursor:pointer;white-space:nowrap}
.custom-accent-head button:hover{color:var(--fg);border-color:var(--fg-faint)}
.custom-accent-head button:disabled{opacity:.45;cursor:not-allowed}
.accent-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:11px}
.accent-card{display:flex;flex-direction:column;gap:6px;min-width:0;border:1.5px solid var(--border);border-radius:7px;background:var(--surface);color:var(--fg-muted);padding:8px 6px;font:700 9px var(--font-head);cursor:pointer;text-align:center;transition:border-color .2s,background .2s,color .2s,transform .2s}
.accent-card:hover{transform:translateY(-1px);border-color:var(--border-strong);color:var(--fg)}
.accent-card[aria-pressed="true"]{border-color:var(--fg);background:var(--surface-2);color:var(--fg)}
.accent-swatch{height:38px;border-radius:5px;background:var(--accent);display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.accent-swatch i{width:24px;height:9px;border-radius:99px;background:var(--accent-ink);opacity:.9}
.custom-accent-controls{display:grid;grid-template-columns:1fr 96px;gap:8px 9px;align-items:center}
.accent-picker-label{height:42px;display:flex;align-items:center;gap:9px;border:1.5px solid var(--border-strong);border-radius:6px;background:var(--surface);padding:5px 10px;color:var(--fg);font:700 11px var(--font-head);cursor:pointer}
.accent-picker-label input{width:30px;height:30px;border:0;background:none;padding:0;cursor:pointer}
.custom-accent-controls input[type="text"]{height:42px;border:1.5px solid var(--border-strong);border-radius:6px;background:var(--surface);color:var(--fg);font:700 11px var(--font-head);padding:0 10px;text-transform:lowercase}
.custom-accent-controls input[type="text"]:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 20%,transparent)}
.custom-accent-controls input[aria-invalid="true"]{border-color:#ff5a5a;box-shadow:0 0 0 3px rgba(255,90,90,.16)}
.custom-accent-controls>span{grid-column:1/-1}
@media(max-width:760px){.accent-grid{grid-template-columns:repeat(4,1fr)}.accent-swatch{height:34px}}

/* Die Vorschau (.studio-canvas) scrollt vertikal, sobald die Website höher
   ist als der sichtbare Bereich — praktisch immer. Ohne reservierten Platz
   für die Scrollbar zieht der Browser sie erst beim Scrollen ein, wodurch
   die zentrierte Website (margin:auto, max-width:1120px) je nach Browser
   sichtbar nach links rutscht und rechts ein eigener Balken/Rand entsteht.
   stable both-edges reserviert den Platz auf beiden Seiten dauerhaft,
   damit die Website unabhängig vom Scroll-Zustand mittig bleibt. */
.studio-canvas{scrollbar-gutter:stable both-edges}