/* Galerie Marie – gemeinsame Gestaltung (dunkles Design) */
:root{
  --bg:#151311; --wall:#1d1a17; --surface:#26221d; --ink:#f0e9df; --muted:#a99d90; --accent:#e0805f; --accent-ink:#1a1714; --line:#38312a;
  --shadow:0 18px 40px -18px rgba(0,0,0,.8),0 2px 6px rgba(0,0,0,.5);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:Jost,"Helvetica Neue",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark; box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.55;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
button{font:inherit;color:inherit;cursor:pointer}
img{display:block;-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
a{color:inherit}
[hidden]{display:none!important}
.logo{display:block;height:100%;width:auto;color:var(--ink)}
.logo .rie{fill:var(--accent)}

header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px clamp(18px,4vw,56px)}
.brand{display:block;height:68px;text-decoration:none}
nav.menu{display:flex;gap:clamp(14px,3vw,34px)}
nav.menu a{font-size:13px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--muted);padding:8px 0;border-bottom:1px solid transparent;font-weight:500}
nav.menu a:hover{color:var(--ink)}
nav.menu a.active{color:var(--ink);border-bottom-color:var(--accent)}

.btn{border:1px solid var(--ink);background:transparent;color:var(--ink);padding:12px 26px;border-radius:999px;font-weight:500;font-size:14px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;display:inline-block;transition:.2s}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.08);background:var(--accent);color:var(--accent-ink)}
.btn.danger{color:#ec8a82;border-color:#ec8a8266}
.btn.danger:hover{background:#b3261e;color:#fff}
.btn.small{padding:8px 16px;font-size:12px}
.btn[disabled]{opacity:.5;cursor:default}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500}
input[type=text],input[type=email],input[type=password],textarea,select{font:inherit;font-size:17px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;width:100%}
textarea{resize:vertical;min-height:90px}
input:focus,textarea:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px}

dialog{border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--ink);padding:0;width:min(500px,calc(100% - 24px));max-height:calc(100% - 24px)}
dialog::backdrop{background:rgba(20,14,8,.62)}
.dlg-body{padding:24px}
.dlg-body h3{font-family:var(--serif);font-size:32px;font-weight:500;margin:0 0 2px;line-height:1.1}
.dlg-body .sub{color:var(--muted);font-size:15px;margin:0 0 16px}
.dlg-foot{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:8px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:12px 22px;border-radius:999px;z-index:100;font-size:15px;box-shadow:var(--shadow)}
footer.foot{padding:48px 16px 56px;text-align:center;color:var(--muted);font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.demo-note{background:var(--accent);color:var(--accent-ink);text-align:center;font-size:13px;padding:7px 12px;letter-spacing:.04em}

/* Antike Rahmen (reines CSS, Masse in Einheiten --u; Dicke je Rahmen siehe api.js) */
.frm{--u:1;--a:0;--b:0;--c:0;display:block;box-sizing:border-box;border:solid transparent;border-width:calc(var(--u)*var(--a)*1px);
  box-shadow:0 calc(var(--u)*12px) calc(var(--u)*26px) calc(var(--u)*-10px) rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.4)}
.frm-mid{display:block;border:solid transparent;border-width:calc(var(--u)*var(--b)*1px)}
.frm-in{display:block;position:relative;overflow:hidden;line-height:0;border:solid transparent;border-width:calc(var(--u)*var(--c)*1px);background:var(--wall)}
.frm-in img{display:block}
.frm-in::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 calc(var(--u)*10px) rgba(0,0,0,.6);background:linear-gradient(125deg,rgba(255,255,255,.09),rgba(255,255,255,0) 42%)}
.f-none .frm-in::after{display:none}
.f-gold{--a:9;--b:4;--c:3;border-color:#f7e6a8 #c39b45 #7d5a1c #e3c26d}
.f-gold .frm-mid{border-style:ridge;border-color:#a07a2a}
.f-gold .frm-in{border-color:#6b4a14 #d9b45e #f2dc90 #a07628}
.f-barock{--a:12;--b:7;--c:4;border-color:#f5de92 #b98d38 #6f4d15 #dcb860}
.f-barock .frm-mid{border-style:dotted;border-color:#e6c36c;background:#3a2508}
.f-barock .frm-in{border-color:#5b3d0f #c9a04c #efd484 #8f6a22}
.f-nussbaum{--a:11;--b:2;--c:5;border-color:#9a6a40 #5f3a1c #38200d #7a4c2c}
.f-nussbaum .frm-mid{border-color:#c9a24d}
.f-nussbaum .frm-in{border-color:#26150a #6d4522 #7e5129 #3a200d}
.f-silber{--a:9;--b:4;--c:3;border-color:#f5f7f9 #aab1b9 #6a7178 #d0d5da}
.f-silber .frm-mid{border-style:ridge;border-color:#7f868e}
.f-silber .frm-in{border-color:#525960 #dce0e4 #f0f2f4 #8a9199}
.f-ebenholz{--a:10;--b:3;--c:6;border-color:#454545 #1a1a1a #070707 #2a2a2a}
.f-ebenholz .frm-mid{border-color:#c6a04a}
.f-ebenholz .frm-in{border-color:#000 #2b2b2b #3b3b3b #121212}
.f-museum{--a:5;--b:14;--c:2;border-color:#f3dfa0 #bf9840 #7d5a1c #dfbd68}
.f-museum .frm-mid{border-color:#eee5d1}
.f-museum .frm-in{border-color:#c9bfa6 #fbf7ec #fffdf6 #ddd3bb}