/* Self-hosted Google Fonts — EB Garamond, Abril Fatface, Caveat */
@font-face {
  font-family: 'Abril Fatface';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/abril-fatface-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Abril Fatface';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/abril-fatface-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/caveat-700-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/caveat-700-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/eb-garamond-400-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/eb-garamond-400-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/eb-garamond-500-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/eb-garamond-500-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/eb-garamond-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/eb-garamond-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/eb-garamond-500-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/eb-garamond-500-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}

:root{
  --serif:'EB Garamond',Georgia,serif;
  --sans:'Helvetica Neue',Helvetica,Arial,system-ui,sans-serif;
  --black:#000;--white:#fff;--mid:#686868;--light:#b0b0b0;
  --border:#e6e6e6;--xlight:#f5f5f5;--green:#4d9a5e;--red:#e8391c;
  --sw:272px;   /* Seitenbreite — links und rechts identisch */
  --pad:28px;   /* Fensterrand */
}

html{height:100%;background:var(--white);overflow:hidden;}
body{height:100%;color:var(--black);background:transparent;
  font-family:var(--sans);font-size:12px;overflow:hidden;
  -webkit-font-smoothing:antialiased;padding:var(--pad);
}

/* ── SHELL ── */
.app{height:100%;background:var(--white);display:grid;grid-template-rows:auto 1fr auto;}

/* ── HEADER ── */
/* Spaltenstruktur exakt wie .body → Bildchen steht axial über dem Bild */
.hdr{display:grid;grid-template-columns:var(--sw) 1fr var(--sw);align-items:center;
  padding:0 0 var(--pad);}
.logo{font-family:'Abril Fatface',var(--serif);font-size:36px;font-weight:400;
  font-style:normal;letter-spacing:0.01em;color:var(--black);
  text-align:center;white-space:nowrap;line-height:1;}
.hdr-nav{justify-self:end;display:flex;align-items:center;justify-content:flex-end;
  gap:0;width:var(--sw);}
#help-btn{background:none;border:none;cursor:pointer;padding:0 0 0 2px;
  font-family:'Caveat',cursive;font-size:28px;font-weight:700;font-style:normal;
  color:#e8391c;line-height:1;transition:font-size .1s,opacity .15s;
  -webkit-text-stroke:0.5px #e8391c;
  display:inline-block;}
#help-btn:hover{opacity:.75;}
#help-btn:active{font-size:34px;-webkit-text-stroke:1.5px #e8391c;}
.nav-btn{font-size:9px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--mid);background:none;border:none;cursor:pointer;padding:0;transition:color .15s;}
.nav-btn:hover{color:var(--black);}

/* ── AUTH WIDGET ── */
.auth-wrap{position:relative;display:flex;justify-content:flex-end;width:100%;}
.auth-btn{background:none;border:none;cursor:pointer;padding:3px;
  color:var(--black);position:relative;display:flex;align-items:center;
  transition:color .15s;}
.auth-btn:hover{color:var(--mid);}
.auth-icon-wake{display:none;}
.auth-wrap.logged-in .auth-icon-sleep{display:none;}
.auth-wrap.logged-in .auth-icon-wake{display:block;}
.auth-wrap.logged-in .auth-z{display:none;}
@keyframes authZ{
  0%  {opacity:0;transform:translateY(1px);}
  20% {opacity:1;}
  80% {opacity:.5;}
  100%{opacity:0;transform:translateY(-13px);}
}
.auth-z{position:absolute;font-weight:700;font-family:var(--sans);
  color:var(--black);pointer-events:none;
  animation:authZ 2.4s ease-in infinite;}
.auth-z:nth-of-type(1){font-size:8px;right:3px;top:1px;animation-delay:0s;}
.auth-z:nth-of-type(2){font-size:6px;right:7px;top:-3px;animation-delay:.8s;}
.auth-z:nth-of-type(3){font-size:5px;right:9px;top:-7px;animation-delay:1.6s;}
/* E-Mail-Feld */
.auth-field{position:absolute;top:50%;transform:translateY(-50%);left:0;z-index:300;}
.auth-field input{display:block;border:none;
  font-size:12px;font-weight:700;padding:3px 0;width:170px;outline:none;background:none;
  font-family:var(--sans);color:var(--black);}
.auth-field input::placeholder{color:var(--light);font-weight:400;}
/* Dropdown-Menü — fixed, per JS auf 3D-Feld ausgerichtet */
.auth-menu{position:fixed;z-index:300;background:none;display:none;}
body.menu-open .ctx{visibility:hidden;}
.auth-menu-item{display:block;width:100%;text-align:left;
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mid);background:none;border:none;cursor:pointer;
  padding:4px 0;transition:color .15s;white-space:nowrap;}
.auth-menu-item:hover{color:var(--black);}

/* ── BODY ── */
.body{display:grid;grid-template-columns:1fr;min-height:0;overflow:hidden;gap:4px;}

/* ── GESPERRT (nicht angemeldet) ── */
/* Vor Login: Gen-Button und Seitenmenüs komplett ausblenden */
body.locked .gen-btn { display:none !important; }
body.locked .panel { pointer-events:none !important; }
body.locked aside.ctx { pointer-events:none !important; }
body.locked .auth-menu { display:none !important; }
body.locked .edge-hint { display:none !important; }

/* Login-Placeholder — always visible as background */
#login-ph{
  display:block;
  position:absolute;top:0;left:50%;
  transform:translateX(-50%);
  height:88%;width:auto;
  max-width:100%;
  aspect-ratio:3/2;
  overflow:hidden;z-index:5;}
#login-ph img{width:100%;height:100%;object-fit:cover;display:block;}

/* ── LEFT PANEL ── */
.panel{
  position:fixed;top:calc(var(--pad) + 65px);bottom:var(--pad);left:0;
  width:var(--sw);z-index:200;
  background:var(--white);
  transform:translateX(calc(-100% - 2px));
  transition:transform 0.3s ease;
  overflow-y:auto;overflow-x:hidden;
}
.panel.open{transform:translateX(0);box-shadow:1px 0 0 0 var(--border);}
.panel::-webkit-scrollbar{width:0;}

.sec{padding:26px 22px 0;text-align:right;}
.sec:first-child{padding-top:28px;}
.sec-last{padding-bottom:24px;}

.sec-label{font-size:9px;font-weight:400;letter-spacing:0.24em;
  text-transform:uppercase;color:var(--light);margin-bottom:9px;display:block;text-align:right;}

.chips{display:flex;flex-wrap:wrap;justify-content:flex-end;margin-bottom:6px;gap:2px 10px;}
.tags{display:flex;flex-wrap:wrap;justify-content:flex-end;margin-top:7px;gap:2px 8px;}

.field{margin-bottom:12px;}
input[type=text],textarea{width:100%;background:transparent;border:none;
  border-bottom:1px solid var(--border);padding:5px 0;font-family:var(--sans);
  font-size:12px;color:var(--black);outline:none;resize:none;
  -webkit-appearance:none;letter-spacing:.01em;transition:border-color .2s;cursor:text;}
input[type=text]:focus,textarea:focus{border-bottom-color:var(--black);}
input[type=text]::placeholder,textarea::placeholder{color:var(--light);font-weight:300;}
textarea{min-height:48px;line-height:1.6;}
/* Freie Beschreibung */
#uprompt{min-height:unset;aspect-ratio:4/3;resize:none;border-bottom:none;font-weight:600;text-align:right;}
/* Beschreibungstext: fett wenn geschrieben, wie aktive Chips */
#uprompt.has-text{font-weight:600;}

.geo-btn{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--black);
  background:none;border:none;cursor:pointer;padding:0;margin-top:5px;
  display:inline-block;transition:color .15s;}
.geo-btn:hover{color:var(--mid);}

.chip{font-size:12px;color:var(--light);background:none;border:none;cursor:pointer;
  padding:2px 0;transition:color .12s;white-space:nowrap;}
.chip:hover{color:var(--mid);}
.chip.on{color:var(--black);font-weight:600;}

.tag{font-size:12px;color:var(--light);background:none;border:none;cursor:pointer;
  padding:2px 0;transition:color .12s;}
.tag:hover{color:var(--mid);}
.tag.on{color:var(--black);font-weight:600;}

.ref-drop-zone{cursor:pointer;position:relative;display:inline-block;margin-bottom:7px;}
.ref-drop-zone input{position:absolute;inset:0;opacity:0;cursor:pointer;border:none;}
.ref-drop-lbl{font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--light);transition:color .15s;}
.ref-drop-zone:hover .ref-drop-lbl{color:var(--black);}

.ref-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-top:7px;}
.ref-thumb{aspect-ratio:1;overflow:hidden;position:relative;background:var(--xlight);}
.ref-thumb img{width:100%;height:100%;object-fit:cover;}
.ref-rm{position:absolute;inset:0;background:rgba(255,255,255,.88);border:none;
  color:var(--black);font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s;}
.ref-thumb:hover .ref-rm{opacity:1;}

.hdiv{height:1px;background:var(--border);margin:18px 0 0;}

/* ── STILREFERENZ ── */
.sref-slot{width:100%;aspect-ratio:4/3;border:1px solid var(--border);cursor:pointer;
  position:relative;overflow:hidden;background:var(--xlight);transition:border-color .15s;
  display:block;margin-bottom:2px;}
.sref-slot:hover{border-color:var(--mid);}
.sref-empty{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;text-align:center;pointer-events:none;}
.sref-empty span{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--mid);}
.sref-filled{position:absolute;inset:0;display:none;}
.sref-filled img{width:100%;height:100%;object-fit:cover;}
/* Filigran-Kreuz — zwei 1px Diagonalen via Gradient, wie die A/B-Linie */
.sref-clear{position:absolute;top:8px;right:8px;width:16px;height:16px;
  background:none;border:none;cursor:pointer;padding:0;
  font-size:0;opacity:0;transition:opacity .15s;}
.sref-clear::before,.sref-clear::after{
  content:'';position:absolute;inset:0;pointer-events:none;}
.sref-clear::before{
  background:linear-gradient(to bottom right,
    transparent calc(50% - 0.5px),
    var(--black) calc(50% - 0.5px),
    var(--black) calc(50% + 0.5px),
    transparent calc(50% + 0.5px));}
.sref-clear::after{
  background:linear-gradient(to top right,
    transparent calc(50% - 0.5px),
    var(--black) calc(50% - 0.5px),
    var(--black) calc(50% + 0.5px),
    transparent calc(50% + 0.5px));}
.sref-filled:hover .sref-clear{opacity:1;}
.sref-clear:hover{opacity:.5!important;}
.sref-hint{font-size:9px;letter-spacing:.12em;color:var(--light);margin-top:4px;display:block;}

/* ── CANVAS ── */
.canvas{display:flex;flex-direction:column;min-height:0;overflow:hidden;position:relative;}

.img-area{flex:1;position:relative;background:var(--white);overflow:hidden;
  display:flex;align-items:center;justify-content:center;}

#out-img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  max-width:100%;max-height:100%;width:auto;height:auto;display:none;z-index:6;}
/* Center-Referenz X-Button — nur bei Hover über dem Bild selbst */
#center-ref-clear{position:absolute;top:8px;right:8px;z-index:10;
  opacity:0;transition:opacity .15s;}
#oz:has(#out-img:hover) #center-ref-clear,
#center-ref-clear:hover{opacity:1;}
#center-ref-clear:hover{opacity:.5!important;}

.placeholder{display:none;}

.loading{position:absolute;inset:0;display:none;}
.loading.on{display:none;}
.ld-label,.ld-bar,.ld-fill,.ld-step{display:none;}

.dl-btn{display:none!important;}
#ab-btn{ flex-shrink:0; }
.ab-btn{width:48px;height:48px;flex-shrink:0;background:none;
  border:1px solid var(--border);cursor:pointer;
  position:relative;overflow:hidden;
  transition:border-color .1s;user-select:none;}
.ab-btn::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom right,
    transparent calc(50% - 0.5px),
    var(--light) calc(50% - 0.5px),
    var(--light) calc(50% + 0.5px),
    transparent calc(50% + 0.5px));}
.ab-a,.ab-b{position:absolute;font-size:8px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mid);line-height:1;pointer-events:none;}
.ab-a{top:9px;left:10px;font-weight:700;color:var(--black);}
.ab-b{bottom:9px;right:10px;}
.ab-btn:hover{border-color:var(--mid);}
/* gedrückt: B fett, A normal */
.ab-btn.on .ab-a{font-weight:400;color:var(--mid);}
.ab-btn.on .ab-b{font-weight:700;color:var(--black);}

.prompt-strip{display:none!important;}
.ps-label{font-size:8px;letter-spacing:.22em;text-transform:uppercase;color:var(--light);margin-bottom:2px;}
.ps-text{font-size:10px;color:var(--mid);line-height:1.5;font-style:italic;
  max-height:40px;overflow:hidden;}

/* History — linke Ausrichtung wird per JS auf Bildkante gesetzt */
.history{display:flex;align-items:center;
  padding:14px 0 0;gap:5px;overflow-x:auto;flex-shrink:0;}
.history::-webkit-scrollbar{height:0;}
.hist-item{width:48px;height:48px;flex-shrink:0;cursor:pointer;
  perspective:160px;opacity:.45;transition:opacity .15s;}
.hist-item:hover,.hist-item.on{opacity:1;}
.hist-card{width:100%;height:100%;position:relative;transform-style:preserve-3d;
  transition:transform .4s ease;}
.hist-item.flipped .hist-card{transform:rotateY(180deg);}
.hist-front,.hist-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.hist-front img{width:100%;height:100%;object-fit:cover;}
.hist-back{background:#e8391c;transform:rotateY(180deg);display:flex;align-items:center;justify-content:center;}
.hist-del{position:absolute;top:3px;right:3px;width:16px;height:16px;
  background:none;border:none;cursor:pointer;padding:0;color:#fff;
  font-size:14px;line-height:1;font-weight:300;}
.hist-empty{font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--light);width:100%;text-align:center;}

/* ── RIGHT CONTEXT ── */
aside.ctx{
  position:fixed;top:calc(var(--pad) + 65px);bottom:var(--pad);right:0;
  width:var(--sw);z-index:200;
  background:var(--white);
  transform:translateX(calc(100% + 2px));
  transition:transform 0.3s ease;
  overflow:hidden;
  display:grid;
  grid-template-rows:var(--sw) var(--sw) var(--sw) 48px;
  gap:4px;
  align-self:unset;
}
aside.ctx.open{transform:translateX(0);}
#ctx-line{position:fixed;pointer-events:none;
  right:calc(var(--sw) + 22px);
  top:calc(var(--pad) + 65px);bottom:var(--pad);
  width:1px;background:var(--border);z-index:199;
  transform:translateX(calc(var(--sw) + 26px));
  transition:transform 0.3s ease;}
#ctx-line.open{transform:translateX(0);}
body.menu-open #ctx-line{transform:translateX(calc(var(--sw) + 26px))!important;}

/* Adress-Suchzeile oben in der rechten Spalte */
.ctx-addr{display:flex;align-items:center;padding:0 12px 0 0;
  gap:8px;background:var(--white);}
.ctx-addr input[type=text]{flex:1;background:transparent;border:none;
  padding:0;font-family:var(--sans);font-size:12px;color:var(--black);
  outline:none;-webkit-appearance:none;letter-spacing:.01em;font-weight:600;}
.ctx-addr input[type=text]::placeholder{color:var(--light);font-weight:300;}
.ctx-search-btn{font-size:14px;line-height:1;color:var(--mid);background:none;border:none;
  cursor:pointer;padding:0;flex-shrink:0;transition:color .15s;}
.ctx-search-btn:hover{color:var(--black);}
/* Google Places Autocomplete Dropdown */
.pac-container{border:1px solid var(--border)!important;border-top:none!important;
  box-shadow:0 6px 18px rgba(0,0,0,.09)!important;font-family:var(--sans)!important;
  border-radius:0!important;z-index:9999!important;}
.pac-item{padding:5px 12px!important;cursor:pointer;
  font-size:11px!important;line-height:1.55!important;color:var(--mid)!important;}
.pac-item:hover,.pac-item-selected{background:var(--xlight)!important;}
.pac-icon{display:none!important;}
.pac-item-query{font-size:11px!important;color:var(--black)!important;}
.pac-matched{font-weight:600;}

#map{min-height:0;background:var(--xlight);position:relative;overflow:hidden;}
/* Google Maps overrides */
#map .gm-style{cursor:crosshair!important;}
/* Alle Google Maps UI-Elemente ausblenden */
#map .gmnoprint,
#map .gm-bundled-control,
#map .gm-style-cc,
#map .gm-style-mtc,
#map .gm-svpc,
#map .gm-fullscreen-control,
#map .gm-style a[href*="maps.google"],
#map .gm-style a[href*="google.com/maps"],
#map .gm-style a[title*="Google"],
#map button[title*="Zoom"],
#map button[title*="zoom"],
#map .gm-style > div > div > a,
.gm-style .gm-style-iw-c,
.gm-style .gm-style-iw-d,
[class*="gm-err"],[class*="dismissButton"]{display:none!important;}
/* Map overlay buttons */
.map-info{display:none!important;}
.map-btns{position:absolute;top:8px;left:8px;z-index:2;display:flex;gap:4px;}
.map-btn{font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--mid);
  background:rgba(255,255,255,.9);border:1px solid var(--border);
  padding:3px 7px;cursor:pointer;transition:color .15s;}
.map-btn:hover,.map-btn.on{color:var(--black);}
/* High-Key S/W wenn nicht gehovered */
#map{
  filter:grayscale(1) brightness(1.22) contrast(0.78);
  transition:filter .6s ease;}
#map:hover{
  filter:none;
  transition:filter .25s ease;}

/* No-key placeholder */
.map-nokey{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;z-index:3;
  background:var(--xlight);}
.map-nokey-lbl{font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--light);text-align:center;line-height:1.8;}
.map-nokey-btn{font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--black);background:none;border:1px solid var(--black);
  padding:5px 14px;cursor:pointer;transition:background .15s;}
.map-nokey-btn:hover{background:var(--border);}

/* ── 3D FILE ZONE ── */
.threed-zone{min-height:0;position:relative;overflow:hidden;
  background-color:var(--xlight);background-image:url(img/grain.jpg);
  background-size:cover;background-position:center;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:5px;
  filter:grayscale(1);transition:background-color .15s,filter .6s ease;}
.threed-zone:hover,.threed-zone.drag-over{filter:none;transition:background-color .15s,filter .25s ease;}
.threed-zone.has-model{cursor:default;}
.threed-zone::after{content:'';position:absolute;inset:0;
  background-color:transparent;transition:background-color .15s;
  pointer-events:none;z-index:1;}
.threed-zone:not(.has-model):hover::after,
.threed-zone.drag-over::after{background-color:rgba(0,0,0,.06);}
.threed-empty{pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:4px;}
.threed-empty .t-lbl{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--mid);}
.threed-empty .t-hint{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--mid);}
.threed-filled{position:absolute;bottom:0;left:0;right:0;z-index:10;
  display:none;align-items:center;justify-content:flex-start;
  background:rgba(245,245,245,.82);padding:3px 10px;pointer-events:none;}
.threed-fname{font-size:9px;color:var(--mid);font-family:monospace;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
/* Filigran-Kreuz oben rechts — identisch mit .sref-clear */
.threed-clear{position:absolute;top:8px;right:8px;width:16px;height:16px;
  background:none;border:none;cursor:pointer;padding:0;z-index:20;
  font-size:0;opacity:0;pointer-events:none;transition:opacity .15s;}
.threed-clear::before,.threed-clear::after{
  content:'';position:absolute;inset:0;pointer-events:none;}
.threed-clear::before{
  background:linear-gradient(to bottom right,
    transparent calc(50% - 0.5px),
    var(--black) calc(50% - 0.5px),
    var(--black) calc(50% + 0.5px),
    transparent calc(50% + 0.5px));}
.threed-clear::after{
  background:linear-gradient(to top right,
    transparent calc(50% - 0.5px),
    var(--black) calc(50% - 0.5px),
    var(--black) calc(50% + 0.5px),
    transparent calc(50% + 0.5px));}
/* Nur wenn Modell geladen: klickbar und sichtbar beim Hover */
.threed-zone.has-model .threed-clear{pointer-events:auto;}
.threed-zone.has-model:hover .threed-clear{opacity:1;}
.threed-clear:hover{opacity:.5!important;}

/* ── REFERENZBILD (linkes Panel) ── */
.ref-left{width:100%;aspect-ratio:3/2;position:relative;overflow:hidden;
  cursor:pointer;background-image:url(img/grain.jpg);background-size:cover;
  background-position:center;filter:grayscale(1);transition:filter .6s ease;}
.ref-left:hover{filter:none;transition:filter .25s ease;}
.ref-left.drag-over{filter:none;}
.ref-left .sref-empty{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;text-align:center;pointer-events:none;}
.ref-left .sref-filled{position:absolute;inset:0;display:none;}
.ref-left .sref-filled img{width:100%;height:100%;object-fit:cover;}
.ref-left:hover .sref-clear{opacity:1;}

/* ── REFERENZBILD (rechtes Panel) ── */
.ref-ctx{min-height:0;position:relative;overflow:hidden;
  background-image:url(img/grain.jpg);background-size:cover;background-position:center;
  filter:grayscale(1);transition:filter .6s ease;}
.ref-ctx:hover,.ref-ctx.drag-over{filter:none;transition:filter .25s ease;}
.ref-ctx .sref-slot{position:absolute;inset:0;aspect-ratio:unset;border:none;
  background:transparent;transition:background-color .15s;}
.ref-ctx .sref-slot:hover{border:none;background-color:rgba(0,0,0,.06);}
.ref-ctx #rgrid{display:none!important;}


/* ── NOMINATIM AUTOCOMPLETE (Fallback ohne Maps API) ── */
.nom-ac{position:absolute;z-index:9999;background:var(--white);
  border:1px solid var(--border);left:0;right:0;top:100%;
  max-height:180px;overflow-y:auto;display:none;
  box-shadow:0 4px 12px rgba(0,0,0,.07);}
.nom-ac-item{padding:6px 12px;cursor:pointer;font-size:11px;
  color:var(--mid);line-height:1.45;}
.nom-ac-item:hover{background:var(--xlight);color:var(--black);}

/* ComfyUI Panel — hidden (workflow loads in background) */
.comfy-panel{display:none!important;}
.comfy-panel .nodemap,.comfy-panel #c-wf-info{display:none!important;}

.comfy-hdr{display:flex;align-items:center;justify-content:space-between;}
.comfy-title{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--light);}
.comfy-status{display:flex;align-items:center;gap:5px;}
.c-dot{width:5px;height:5px;border-radius:50%;background:var(--light);
  transition:background .3s;flex-shrink:0;}
.c-dot.ok{background:var(--green);}
.c-dot.err{background:var(--red);}
.c-status-txt{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--mid);}

.comfy-row{display:flex;align-items:center;gap:6px;}
.comfy-port-lbl{font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--light);white-space:nowrap;flex-shrink:0;}
.comfy-port-inp{width:54px!important;font-size:11px!important;padding:3px 0!important;}

.c-btn{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--black);
  background:none;border:1px solid var(--border);cursor:pointer;padding:5px 9px;
  transition:border-color .15s;white-space:nowrap;}
.c-btn:hover{border-color:var(--black);}

.c-wf-info{font-size:10px;color:var(--mid);line-height:1.55;}
.c-wf-info strong{color:var(--black);font-weight:600;display:block;font-size:11px;}
.c-wf-none{font-style:italic;color:var(--light);font-size:10px;}

.nodemap{padding-top:8px;display:none;}
.nm-row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:5px;}
.nm-key{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--light);}
.nm-val{font-size:9px;font-family:monospace;color:var(--black);
  max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;}
.nm-val.miss{color:var(--light);font-style:italic;font-family:var(--sans);}

/* ── FOOTER ── */
/* Spaltenstruktur exakt wie .body → Button steht axial unter dem Bild */
footer{display:grid;grid-template-columns:var(--sw) 1fr var(--sw);align-items:center;
  padding:var(--pad) 0 0;}
.f-status{opacity:0;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mid);transition:opacity .3s;pointer-events:none;white-space:nowrap;}
.gen-wrap{position:relative;display:flex;flex-direction:column;align-items:center;justify-self:center;gap:0;}
.gen-progress{width:100%;height:1px;background:transparent;overflow:hidden;opacity:0;}
.gen-progress.on{opacity:1;}
.gen-progress-fill{height:100%;width:0;background:var(--black);}
@keyframes _progSteady{from{width:0}to{width:88%}}
.gen-progress.on .gen-progress-fill{animation:_progSteady 180s linear forwards;}
.gen-btn{font-family:var(--serif);font-size:17px;font-weight:400;font-style:italic;
  letter-spacing:.04em;color:var(--white);background:var(--black);border:none;
  cursor:pointer;padding:0 26px;height:32px;display:flex;align-items:center;
  transition:opacity .15s;position:relative;overflow:hidden;}
.gen-btn:hover{opacity:.75;}
.gen-btn:disabled{opacity:0.35;cursor:default;}
.gen-btn canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}

/* ── Login-Feuerwerk ── */
@keyframes _fw{
  0%  {transform:translate(-50%,-50%) translate(0,0) scale(1);opacity:1;}
  100%{transform:translate(-50%,-50%) translate(var(--fx),var(--fy)) scale(0);opacity:0;}}

/* ── Button-Animationen (CSS) ── */
@keyframes _btn-shake{
  0%,100%{transform:translate(0,0)rotate(0deg)}
  10%{transform:translate(-6px,-1px)rotate(-1deg)}
  20%{transform:translate(6px,1px)rotate(1deg)}
  30%{transform:translate(-6px,1px)rotate(-1deg)}
  40%{transform:translate(6px,-1px)rotate(1deg)}
  50%{transform:translate(-4px,0)rotate(-.5deg)}
  60%{transform:translate(4px,0)rotate(.5deg)}
  70%{transform:translate(-3px,-1px)rotate(-.5deg)}
  80%{transform:translate(3px,1px)rotate(.5deg)}
  90%{transform:translate(-1px,0)rotate(0)}}
@keyframes _btn-bounce {0%,100%{transform:translateY(0)}   50%{transform:translateY(-5px)}}
@keyframes _btn-wave   {0%,100%{transform:skewX(0)}        25%{transform:skewX(-4deg)}   75%{transform:skewX(4deg)}}
@keyframes _btn-breathe{0%,100%{transform:scale(1)}        50%{transform:scale(1.05)}}
@keyframes _btn-wobble {0%,100%{transform:translate(0,0)rotate(0)} 30%{transform:translate(-3px,0)rotate(-1.5deg)} 70%{transform:translate(3px,0)rotate(1.5deg)}}
@keyframes _btn-stir   {0%,100%{transform:rotate(0)}       25%{transform:rotate(-6deg)}  75%{transform:rotate(6deg)}}
@keyframes _btn-pulse  {0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.5)} 50%{box-shadow:0 0 0 8px rgba(255,255,255,0)}}

.gen-btn.anim-shake  {animation:_btn-shake   .28s ease-in-out infinite;}
.gen-btn.anim-bounce {animation:_btn-bounce  .55s ease-in-out infinite;}
.gen-btn.anim-wave   {animation:_btn-wave    .7s  ease-in-out infinite;}
.gen-btn.anim-breathe{animation:_btn-breathe 1.6s ease-in-out infinite;}
.gen-btn.anim-wobble {animation:_btn-wobble  .45s ease-in-out infinite;}
.gen-btn.anim-stir   {animation:_btn-stir    .6s  ease-in-out infinite;}
.gen-btn.anim-pulse  {animation:_btn-pulse   1.2s ease-in-out infinite;}
.f-right{display:none;}
.ki{display:flex;align-items:center;gap:4px;font-size:9px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--light);}
.dot{width:4px;height:4px;border-radius:50%;background:var(--light);transition:background .3s;}
.dot.ok{background:var(--green);}
.copy-btn{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--mid);
  background:none;border:none;cursor:pointer;padding:0;transition:color .15s;}
.copy-btn:hover{color:var(--black);}

/* ── EDGE HINTS ── */
.edge-hint{
  position:fixed;top:50%;transform:translateY(-50%);
  z-index:150;display:flex;align-items:center;gap:10px;
  pointer-events:none;
  font-family:var(--serif);font-size:17px;font-weight:400;font-style:italic;
  letter-spacing:.04em;color:var(--black);
  transition:opacity 0.2s;
}
.edge-hint .eh-arrow{font-size:28px;line-height:1;font-style:normal;}
.edge-hint-left{left:4px;}
/* Rechts: tiefer, an Mitte des Noise-Bildes ausgerichtet (per JS gesetzt) */
.edge-hint-right{right:4px;}

/* ── COMPARE SLIDER ── */
.compare-wrap{position:absolute;inset:0;display:none;cursor:ew-resize;user-select:none;-webkit-user-select:none;}
.compare-wrap.on{display:block;}
.cmp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.cmp-line{position:absolute;top:0;bottom:0;width:2px;background:rgba(255,255,255,.92);
  transform:translateX(-50%);pointer-events:none;
  box-shadow:0 0 8px rgba(0,0,0,.18);}
.cmp-knob{position:absolute;top:50%;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.97);transform:translate(-50%,-50%);
  box-shadow:0 2px 12px rgba(0,0,0,.18);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--mid);pointer-events:none;letter-spacing:-.02em;}
.cmp-lbl{position:absolute;bottom:14px;font-size:8px;letter-spacing:.2em;
  text-transform:uppercase;background:rgba(255,255,255,.88);
  padding:3px 8px;pointer-events:none;color:var(--mid);}
.cmp-lbl-l{left:12px;}
.cmp-lbl-r{right:12px;}

/* ── MODAL ── */
.overlay{position:fixed;inset:0;background:rgba(255,255,255,.94);z-index:9999;
  display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px);}
.overlay.on{display:flex;}
.modal{width:420px;max-width:94vw;background:var(--white);
  border:1px solid var(--border);padding:34px;}
.modal-hdr{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:26px;}
.modal-title{font-family:var(--serif);font-size:24px;font-style:italic;color:var(--black);}
.modal-close{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--mid);
  background:none;border:none;cursor:pointer;transition:color .15s;}
.modal-close:hover{color:var(--black);}
.m-field{margin-bottom:20px;}
.m-label{font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--light);display:block;margin-bottom:5px;}
.m-hint{font-size:10px;color:var(--light);margin-top:4px;line-height:1.5;}
.m-hint a{color:var(--mid);text-decoration:none;}
.m-hint a:hover{color:var(--black);}
.m-save{font-family:var(--serif);font-size:16px;font-style:italic;color:var(--white);
  background:var(--black);border:none;width:100%;padding:11px;cursor:pointer;
  transition:opacity .15s;margin-top:8px;}
.m-save:hover{opacity:.8;}