*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
button,input,select,textarea{font-family:inherit;font-size:inherit;}

:root{
  --serif:'EB Garamond',Georgia,serif;
  --sans:'Urbanist','Century Gothic',Futura,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;overflow-x:clip;}
body{height:100%;color:var(--black);background:transparent;
  font-family:var(--sans);font-size:12px;font-weight:300;overflow:hidden;overflow-x:clip;
  -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 → grey forest 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:'Londrina Solid',cursive;font-size:41px;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);}
.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);}
#credit-display{font-size:17px;font-weight:700;letter-spacing:0.01em;color:var(--black);
  display:none;white-space:nowrap;padding-right:12px;font-family:var(--sans);line-height:1;}
#credit-display.visible{display:flex;align-items:center;}

/* ── AUTH WIDGET ── */
.auth-wrap{position:relative;display:flex;justify-content:flex-end;align-items:center;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);caret-color:var(--black);}
.auth-field input::placeholder{color:var(--light);font-weight:300;font-style:italic;font-family:var(--sans);}
.auth-field input:focus::placeholder{opacity:0;}
/* 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; }
body.locked .history { display:none !important; }
body.locked #auth-btn { display:none !important; }
body.locked #credit-display { display:none !important; }
/* Anmelden-Button: nur sichtbar wenn locked */
#login-btn { display:none; }
body.locked #login-btn { display:flex !important; }
/* E-Mail-Eingabe im Footer */
#login-email-inp {
  font-family:var(--serif);font-size:15px;font-style:italic;font-weight:700;letter-spacing:.03em;
  color:var(--black);background:transparent;
  border:none;outline:none;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  padding:0 10px;height:32px;
  text-align:center;
  width:0;max-width:360px;
  transition:width .22s ease, opacity .22s ease;
  opacity:0;pointer-events:none;
}
#login-email-inp.open {
  width:320px;opacity:1;pointer-events:auto;
}
#login-email-inp::placeholder {
  font-weight:300;color:var(--light);
}
/* Im gesperrten Zustand: Eingabe unsichtbar, Button zeigt den Inhalt */
body.locked #login-email-inp {
  position:absolute;width:1px;height:1px;
  padding:0;opacity:0;overflow:hidden;
  pointer-events:none;transition:none;
}
body.locked #login-email-inp.open {
  pointer-events:auto;
}

/* 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;
  background:var(--white);}
#login-ph img,#login-ph video{width:100%;height:100%;object-fit:cover;display:block;background:var(--white);}

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

/* ── MODE TOGGLE ── */
.mode-toggle-wrap{padding:0 22px 0;display:flex;flex-direction:column;
  align-items:flex-end;gap:10px;width:100%;}
.mode-track{width:46px;height:14px;border:1px solid var(--light);border-radius:7px;
  position:relative;cursor:pointer;flex-shrink:0;transition:border-color .2s;}
.mode-track:hover{border-color:var(--mid);}
.mode-knob{position:absolute;width:10px;height:10px;border-radius:50%;
  background:var(--black);top:1px;right:1px;transition:transform .22s ease;}
.mode-track.innen  .mode-knob{transform:translateX(-17px);}
.mode-track.modell .mode-knob{transform:translateX(-34px);}
.mode-lbl{font-size:12px;font-weight:600;color:var(--black);padding:2px 0;white-space:nowrap;}

.sec{padding:26px 22px 0;text-align:right;max-width:100%;box-sizing:border-box;}
.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%;min-width:0;max-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;font-style:italic;font-family:var(--sans);font-size:12px;}
textarea{min-height:48px;line-height:1.6;}
/* Freie Beschreibung */
#uprompt{min-height:160px;resize:none;border-bottom:none;font-weight:600;text-align:right;width:100%;max-width:100%;overflow-x:hidden;box-sizing:border-box;overflow-wrap:break-word;word-break:break-word;white-space:pre-wrap;}
/* 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,.65);border:none;
  color:var(--black);font-size:16px;font-family:inherit;line-height:1;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;}
#powered-by{font-family:'Londrina Solid',cursive;font-style:italic;font-size:23px;
  letter-spacing:.04em;color:var(--white);text-align:center;
  padding:0 0 6px;user-select:none;display:none;color:var(--black);}
body.locked #powered-by{display:block;}
#powered-by a{color:inherit;text-decoration:underline;text-decoration-thickness:2.5px;}
#powered-by a:hover{opacity:.45;}

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

#out-img{display:none;width:100%;height:100%;object-fit:contain;z-index:6;cursor:zoom-in;}
#mimg-hover-area,#center-ref-clear,#mimg-dl,#mimg-num{display:none!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:none;cursor:pointer;
  position:relative;overflow:hidden;
  user-select:none;transition:opacity .15s;}
.ab-btn::before{content:'';position:absolute;inset:8px;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:13px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--mid);line-height:1;pointer-events:none;}
.ab-a{top:7px;left:8px;font-weight:700;color:var(--black);}
.ab-b{bottom:7px;right:8px;}
.ab-btn:hover{opacity:.6;}
.hist-nav-btn{width:48px;height:48px;flex-shrink:0;background:none;
  border:none;cursor:pointer;padding:0;
  display:none;align-items:center;justify-content:center;
  color:var(--light);}
.hist-nav-btn:hover{color:var(--black);}
/* 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;
  scrollbar-width:none;-ms-overflow-style:none;}
.history::-webkit-scrollbar{display:none;}
/* Chip-Markierung aus Bildhistorie */
.chip.hist-mark{color:#e8391c;}
#uprompt.hist-mark-text{color:#e8391c;}
/* Hist-Modus: aktive schwarze Auswahl ausblenden, nur rote Markierungen sichtbar */
.panel.hist-mode .chip.on{color:var(--light);font-weight:400;}
.panel.hist-mode .tag.on{color:var(--light);font-weight:400;}
.panel.hist-mode #uprompt{color:var(--light);font-weight:400;}
.panel.hist-mode .chip.hist-mark{color:#e8391c;font-weight:600;}
.panel.hist-mode .tag.hist-mark{color:#e8391c;font-weight:600;}
.panel.hist-mode #uprompt.hist-mark-text{color:#e8391c;font-weight:600;}
.panel.hist-mode .mode-lbl{color:#e8391c;}
.panel.hist-mode .mode-track{border-color:#e8391c;}
.panel.hist-mode .mode-knob{background:#e8391c;}

.hist-item{height:48px;width:64px;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{height:100%;width:auto;display:block;}
.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-info{position:absolute;bottom:4px;left:4px;background:none;border:none;
  cursor:pointer;padding:0;color:#fff;
  font-family:'Caveat',cursive;font-size:20px;font-weight:700;line-height:1;}
.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:calc(var(--pad) + 44px);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:1fr 1fr 1fr 1fr 48px;
  gap:4px;
  align-self:unset;
}
/* Materialreferenz — identisch mit .ref-ctx / .threed-zone */
.matref-zone{min-height:0;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;
  display:flex;align-items:center;justify-content:center;}
.matref-zone:hover,.matref-zone.drag-over{filter:none;transition:filter .25s ease;}
.matref-zone::after{content:'';position:absolute;inset:0;
  background-color:transparent;transition:background-color .15s;pointer-events:none;z-index:1;}
.matref-zone:not(.has-img):hover::after,
.matref-zone.drag-over::after{background-color:rgba(0,0,0,.06);}
.matref-empty{pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:4px;}
.matref-empty span{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--mid);}
.matref-filled{position:absolute;inset:0;display:none;z-index:2;}
.matref-filled img{width:100%;height:100%;object-fit:cover;}
/* Kreuz-Button — identisch mit .threed-clear */
.matref-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;}
.matref-clear::before,.matref-clear::after{content:'';position:absolute;inset:0;pointer-events:none;}
.matref-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));}
.matref-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));}
.matref-zone.has-img .matref-clear{pointer-events:auto;}
.matref-zone.has-img:hover .matref-clear{opacity:1;}
.matref-clear:hover{opacity:.5!important;}
aside.ctx.open{transform:translateX(0);}
#ctx-line{position:fixed;pointer-events:none;
  right:calc(var(--sw) + 22px);
  top:calc(var(--pad) + 65px);bottom:calc(var(--pad) + 44px);
  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;font-style:italic;font-family:var(--sans);}
.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);}
/* Schloss-Overlay auf der Karte — außerhalb von #map (kein filter-Einfluss) */
.map-wrap{position:relative;}
#map-lock-ico{position:absolute;top:50%;left:50%;transform:translate(-50%,-65%);
  z-index:2;pointer-events:none;}

/* ── 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);}
/* Lock icon — inline, ausgegraut, ausmitteln mit Feldtext */
.zone-lock{width:18px;height:29px;flex-shrink:0;pointer-events:none;margin-top:5px;}
.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;
  white-space:nowrap;
  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;}}
/* Cursor-Blinken im Login-Button */
@keyframes _cursor-blink{50%{opacity:0;}}
#login-btn:not(.typing)::before{content:'|';color:var(--white);font-style:italic;
  animation:_cursor-blink .7s step-end infinite;margin-right:1px;}
#login-btn.typing::after{content:'|';color:var(--white);font-style:italic;
  animation:_cursor-blink .7s step-end infinite;}

/* ── 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;}

/* ── CONTENT VIEW (Menü-Seiten) ── */
#content-view{
  position:absolute;inset:0;display:none;overflow-y:auto;
  background:var(--white);z-index:8;
  align-items:flex-start;justify-content:center;
  padding:60px var(--pad);scrollbar-width:none;cursor:pointer;}
#content-view:has(#content-body.hist-view){padding-top:var(--pad);}
#content-view::-webkit-scrollbar{width:0;}
#content-view.on{display:flex;}
#content-body{max-width:560px;width:100%;cursor:default;}
#content-body p{font-family:var(--sans);font-size:13px;font-weight:300;
  color:var(--black);line-height:1.85;margin-bottom:1.5em;}
#content-body p:last-child{margin-bottom:0;}
/* Historie-Grid — frei arrangiert, keine Überschneidungen */
#content-body.hist-view{max-width:min(960px,calc(100vw - 80px));}
#cv-grid{display:flex;align-items:flex-start;gap:32px;}
.cv-col{flex:1;display:flex;flex-direction:column;}
.cv-thumb{overflow:hidden;cursor:pointer;position:relative;
  transition:opacity .25s ease;}
.cv-thumb:hover{opacity:.85;}
.cv-thumb img{width:100%;height:auto;display:block;}
@media(max-width:600px){#cv-grid{gap:16px;}}
/* Hover-Overlay über Historiebild — Lightbox-Trigger */
.cv-overlay{position:absolute;inset:0;background:rgba(255,255,255,.65);
  opacity:0;transition:opacity .15s;cursor:zoom-in;z-index:1;}
.cv-thumb:hover .cv-overlay{opacity:1;}
/* × oben rechts als SVG */
.cv-del{position:absolute;top:10px;right:12px;z-index:2;
  background:none;border:none;cursor:pointer;padding:0;
  color:var(--black);opacity:0;transition:opacity .15s;}
.cv-thumb:hover .cv-del{opacity:1;}
.cv-del:hover{color:rgba(0,0,0,.35);}
.cv-dl{position:absolute;top:10px;right:40px;z-index:2;
  background:none;border:none;cursor:pointer;padding:0;
  color:var(--black);opacity:0;transition:opacity .15s;}
.cv-thumb:hover .cv-dl{opacity:1;}
.cv-dl:hover{color:rgba(0,0,0,.35);}
/* Nummerierungskreis unten links */
.cv-num{position:absolute;bottom:8px;left:8px;z-index:2;
  width:30px;height:30px;border-radius:50%;background:#e8391c;
  color:#fff;font-size:17px;font-family:var(--sans);font-weight:700;letter-spacing:0.01em;line-height:1;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  opacity:0;transition:opacity .15s;}
.cv-thumb:hover .cv-num{opacity:1;}
/* Strip + A/B ausblenden wenn Content-View offen */
body.cv-open #hist{display:none !important;}
/* Lightbox-Fokus: alles ausblenden, inkl. Logo */
body.lb-open .panel,
body.lb-open aside.ctx,
body.lb-open footer,
body.lb-open .edge-hint,
body.lb-open #ctx-line,
body.lb-open .hdr-nav,
body.lb-open #credit-display,
body.lb-open .hdr { display:none !important; }
/* Lightbox */
#cv-lightbox{position:fixed;inset:0;display:none;
  align-items:center;justify-content:center;
  background:var(--white);z-index:10;cursor:zoom-out;}
#cv-lightbox.on{display:flex;}
#cv-lb-num{display:none !important;}
#cv-lb-del{display:none !important;}
/* Lightbox-Bild: per JS auf oz-Fläche positioniert */
#cv-lb-img{position:fixed;object-fit:contain;display:block;cursor:zoom-out;}
.cv-lb-nav{position:absolute;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;
  font-size:18px;color:var(--light);padding:20px;transition:color .15s;}
.cv-lb-nav:hover{color:var(--black);}
#cv-lb-prev{left:0;}
#cv-lb-next{right:0;}

/* ── 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;}