/* Seegut Blaue Blume — In-Place-Editor styles.
   Everything is scoped to body.sbb-edit, so normal visitors are unaffected. */

/* Toolbar */
.sbb-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 20px;
  background: var(--ink, #1c1f1b); color: var(--paper, #efe9dd);
  font-family: var(--font-mono, monospace); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  box-shadow: 0 -2px 20px rgba(0,0,0,0.28);
}
.sbb-bar .sbb-brand { color: var(--moss-2, #8ba06f); letter-spacing: 0.2em; }
.sbb-bar .sbb-hint { opacity: 0.6; text-transform: none; letter-spacing: 0.02em; font-size: 11px; }
.sbb-bar .sbb-spacer { flex: 1; }
.sbb-bar .sbb-btn {
  font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid rgba(246,241,230,0.3); background: transparent; color: var(--paper, #efe9dd);
  padding: 9px 16px; cursor: pointer; border-radius: 0;
}
.sbb-bar .sbb-btn:hover { border-color: rgba(246,241,230,0.7); }
.sbb-bar .sbb-save { background: var(--moss-2, #8ba06f); border-color: var(--moss-2, #8ba06f); color: #12160f; }
.sbb-bar.is-dirty .sbb-save { background: #d9b64e; border-color: #d9b64e; }
.sbb-bar .sbb-btn:disabled { opacity: 0.5; cursor: default; }
body.sbb-edit { padding-bottom: 56px; }

/* Editable text */
body.sbb-edit .sbb-ed { outline: 1px dashed transparent; outline-offset: 3px; transition: outline-color 0.15s, background 0.15s; cursor: text; }
body.sbb-edit .sbb-ed:hover { outline-color: rgba(122,143,95,0.5); background: rgba(122,143,95,0.06); }
body.sbb-edit .sbb-ed:focus { outline: 1px solid var(--moss, #5c6f4a); outline-offset: 3px; background: rgba(122,143,95,0.08); }

/* Editable images */
body.sbb-edit .sbb-ed-img { position: relative; }
body.sbb-edit .sbb-ed-img::after {
  content: ""; position: absolute; inset: 0; outline: 1px dashed rgba(122,143,95,0.6); outline-offset: -1px;
  pointer-events: none; opacity: 0; transition: opacity 0.15s;
}
body.sbb-edit .sbb-ed-img:hover::after { opacity: 1; }
.sbb-imgbtn {
  position: absolute; left: 12px; bottom: 12px; z-index: 5;
  font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--ink, #1c1f1b); color: var(--paper, #efe9dd);
  border: none; padding: 8px 14px; cursor: pointer; border-radius: 0; opacity: 0.85;
}
.sbb-imgbtn:hover { opacity: 1; }
body.sbb-edit .sbb-uploading { filter: brightness(0.6) saturate(0.5); }
body.sbb-edit .sbb-uploading::before {
  content: "Lädt hoch…"; position: absolute; inset: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #fff;
}

/* Save flash */
.sbb-flash {
  position: fixed; left: 50%; bottom: 72px; transform: translate(-50%, 12px); z-index: 9500;
  background: var(--moss, #5c6f4a); color: #fff; padding: 12px 22px;
  font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: 0.1em;
  opacity: 0; transition: opacity 0.3s, transform 0.3s;
}
.sbb-flash.is-err { background: #a3402f; }
.sbb-flash.in { opacity: 1; transform: translate(-50%, 0); }