.ipy-cc-anchor {
  position: relative;
}

.ipy-cc-edit-btn {
  position: relative;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  font-family: system-ui, sans-serif;
  color: #ffffff;
  background: #1c3d2e;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0.85;
}

.ipy-cc-edit-btn:hover {
  opacity: 1;
}

.ipy-cc-dialog {
  width: min(90vw, 720px);
  border: none;
  border-radius: 12px;
  padding: 1.5rem;
  font-family: system-ui, sans-serif;
}

.ipy-cc-dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

.ipy-cc-dialog-close {
  float: right;
  border: none;
  background: none;
  font-size: 1rem;
  cursor: pointer;
}

.ipy-cc-dialog textarea {
  width: 100%;
  box-sizing: border-box;
  margin: 0.5rem 0;
  font-family: inherit;
}

.ipy-cc-row {
  display: flex;
  gap: 1rem;
}

.ipy-cc-col {
  flex: 1;
  min-width: 0;
}

.ipy-cc-button {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid #1c3d2e;
  background: #ffffff;
  color: #1c3d2e;
  cursor: pointer;
  margin-right: 0.5rem;
}

.ipy-cc-button-primary {
  background: #1c3d2e;
  color: #ffffff;
}

.ipy-cc-message {
  color: #b3261e;
  min-height: 1.2em;
}

.ipy-cc-toolbar { position: sticky; top: 0; z-index: 101; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .75rem; background: #fff; color: #1c3d2e; border: 1px solid #1c3d2e; border-radius: 8px; }
.ipy-cc-toolbar [role="status"] { flex-basis: 100%; font-size: .85rem; }
.ipy-cc-editing [contenteditable] { outline: 2px dashed #689c3a; outline-offset: 5px; min-height: 1.5em; cursor: text; }
.ipy-cc-editing [contenteditable] a { color: #1c3d2e; text-decoration: underline; }
.ipy-cc-format-bar { display: flex; gap: .35rem; padding-right: .5rem; margin-right: .5rem; border-right: 1px solid #d8ded9; }
.ipy-cc-format-button { margin-right: 0; padding: 0.4rem 0.7rem; font-size: .8rem; font-weight: 600; }
.ipy-cc-button:disabled { opacity: .55; cursor: wait; }
.ipy-cc-dialog input { width: 100%; box-sizing: border-box; margin: .5rem 0; }
.ipy-cc-brand-size { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #e1e6e2; }
.ipy-cc-brand-size .ipy-cc-field-label { grid-column: 1 / -1; font-weight: 600; }
.ipy-cc-brand-size input[type="range"] { margin: 0; accent-color: #314f43; }
.ipy-cc-brand-size output { min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; }
.ipy-cc-brand-size button { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 600px) { .ipy-cc-row { flex-direction: column; } }

/* Galerie-Editiermodus (layout 70): Ersetzen-Knopf auf jeder Kachel */
.ipy-gallery-editing > .ipy-hero-image { position: relative; outline: 2px dashed #689c3a; outline-offset: 3px; }
.ipy-gallery-tile-btn { position: absolute; top: 8px; right: 8px; z-index: 3; }
.ipy-cc-align-button { display: inline-flex; align-items: center; justify-content: center; padding: 0.4rem 0.5rem; }

/* ---- Edit-Panel (Glasoptik, Konzept: public/mockups/fe-editor) ---- */
.ipy-cc-panel, .ipy-cc-fab {
  --ipy-ink: #273532; --ipy-muted: #6f7976; --ipy-line: rgba(54, 75, 67, .12); --ipy-accent: #314f43; --ipy-soft: rgba(55, 82, 68, .09);
  font: 400 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; letter-spacing: normal; text-align: left;
  color: var(--ipy-ink); font-synthesis: weight style; -webkit-font-smoothing: antialiased;
}
.ipy-cc-panel *, .ipy-cc-panel *::before, .ipy-cc-panel *::after { box-sizing: border-box; letter-spacing: normal }
.ipy-cc-panel {
  position: fixed; z-index: 900; top: 16px; right: 16px; bottom: 16px; width: 344px; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column; padding: 18px; overflow: hidden; border-radius: 24px;
  background: rgba(255, 255, 255, .76); border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 10px 40px rgba(49, 71, 57, .18), inset 0 1px 1px #fff;
  backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%);
}
.ipy-cc-panel[hidden], .ipy-cc-fab[hidden] { display: none }
.ipy-cc-panel button { font: inherit; cursor: pointer; border: 0; margin: 0; color: inherit }
.ipy-cc-panel button:focus-visible, .ipy-cc-panel textarea:focus-visible, .ipy-cc-panel summary:focus-visible, .ipy-cc-fab:focus-visible { outline: 3px solid #4675d0; outline-offset: 2px }
.ipy-cc-panel-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px }
.ipy-cc-brand { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--ipy-accent); color: #fff; font-weight: 700 }
.ipy-cc-panel-close { flex: none; width: 30px; height: 30px; padding: 0; border-radius: 10px; background: transparent; font-size: 13px; color: var(--ipy-muted) }
.ipy-cc-panel-close:hover { background: var(--ipy-soft) }
.ipy-cc-panel-dock { margin-left: auto !important }
.ipy-cc-panel.is-left { right: auto; left: 16px }
.ipy-cc-fab.is-left { right: auto; left: 20px }
.ipy-cc-panel-body { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -8px; padding: 2px 8px 8px; overscroll-behavior: contain }
.ipy-cc-panel-status { min-height: 18px; margin: 8px 0 0; font-size: 12px; color: var(--ipy-muted) }
.ipy-cc-panel-label { font-size: 10px; font-weight: 650; letter-spacing: 1.6px !important; color: var(--ipy-muted); margin: 4px 0 8px }
.ipy-cc-empty { margin: 4px 0 18px; font-size: 15px; line-height: 1.5; letter-spacing: -.3px !important }
.ipy-cc-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 16px }
.ipy-cc-heading-icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: #e6ece4; color: #627861 }
.ipy-cc-heading small { display: block; font-size: 10px; letter-spacing: 1.2px !important; color: var(--ipy-muted) }
.ipy-cc-heading h2 { margin: 3px 0 0; font: 600 17px/1.25 inherit; letter-spacing: -.4px !important; overflow-wrap: anywhere; color: var(--ipy-ink) }
.ipy-cc-tabs { display: flex; padding: 3px; margin: 0 0 16px; border-radius: 11px; background: #e6ebe6 }
.ipy-cc-tabs button { flex: 1; padding: 8px; border-radius: 8px; background: transparent; font-size: 12px; font-weight: 600 }
.ipy-cc-tabs .is-selected { background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .06) }
.ipy-cc-panel-button, .ipy-cc-image-controls .ipy-cc-edit-btn {
  display: inline-block; padding: 10px 14px; border-radius: 12px; background: var(--ipy-soft); color: var(--ipy-ink);
  font-size: 12.5px; font-weight: 600; opacity: 1; transition: background .18s, transform .18s;
}
.ipy-cc-panel-button:hover, .ipy-cc-image-controls .ipy-cc-edit-btn:hover { background: rgba(55, 82, 68, .16) }
.ipy-cc-panel-button:active { transform: scale(.98) }
.ipy-cc-panel-button:disabled, .ipy-cc-image-controls .ipy-cc-edit-btn:disabled { opacity: .55; cursor: wait }
.ipy-cc-panel-primary, .ipy-cc-image-controls .ipy-cc-edit-btn[aria-pressed="true"] { background: var(--ipy-accent); color: #fff !important; box-shadow: 0 3px 8px rgba(32, 57, 42, .16) }
.ipy-cc-panel-primary:hover, .ipy-cc-image-controls .ipy-cc-edit-btn[aria-pressed="true"]:hover { background: #496257 }
.ipy-cc-wide { width: 100% }
.ipy-cc-image-controls { display: grid; gap: 8px }
.ipy-cc-image-controls .ipy-cc-edit-btn { width: 100%; margin: 0; text-align: center }
.ipy-cc-hint { margin: 8px 2px 0; font-size: 12px; color: var(--ipy-muted); line-height: 1.55 }
.ipy-cc-ai-card { margin-top: 18px; padding: 15px; border: 1px solid #fff; border-radius: 17px; background: linear-gradient(130deg, rgba(233, 233, 245, .8), rgba(244, 239, 250, .85)) }
.ipy-cc-ai-title { font-weight: 600; margin-bottom: 4px }
.ipy-cc-ai-card p { margin: 0 0 8px; font-size: 12px; color: #767387; line-height: 1.55 }
.ipy-cc-panel textarea { display: block; width: 100%; min-height: 64px; resize: vertical; padding: 10px 12px; border: 1px solid #dcdbe7; border-radius: 12px; background: rgba(255, 255, 255, .7); font: inherit; font-size: 12.5px; color: #36483e }
.ipy-cc-ai-button { width: 100%; margin-top: 9px; background: rgba(255, 255, 255, .65); border: 1px solid #fff !important; color: #605978 }
.ipy-cc-proposal { margin-top: 16px; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .72); border: 1px solid var(--ipy-line) }
.ipy-cc-proposal-header { margin: 8px 0 0; font-weight: 600 }
.ipy-cc-proposal-text { margin: 8px 0 12px; font-size: 12.5px; color: #36483e; max-height: 260px; overflow: auto }
.ipy-cc-proposal-text p { margin: 0 0 8px }
.ipy-cc-proposal-text ul, .ipy-cc-proposal-text ol { margin: 0 0 8px; padding-left: 20px }
.ipy-cc-proposal-actions { display: flex; gap: 8px }
.ipy-cc-sections { display: grid; gap: 2px }
.ipy-cc-section-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) 30px 30px; align-items: center; gap: 4px; border-radius: 10px }
.ipy-cc-section-row.is-readonly { grid-template-columns: minmax(0, 1fr) 30px 30px }
.ipy-cc-section-row[draggable="true"] { cursor: grab }
.ipy-cc-section-row.is-dragging { opacity: .4; cursor: grabbing }
.ipy-cc-section-row.drop-before { box-shadow: 0 -2px 0 var(--ipy-accent) }
.ipy-cc-section-row.drop-after { box-shadow: 0 2px 0 var(--ipy-accent) }
.ipy-cc-section-drag { color: var(--ipy-muted); font-size: 18px; line-height: 1; cursor: grab; user-select: none }
.ipy-cc-section { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 10px; background: transparent; text-align: left; font-size: 12.5px }
.ipy-cc-section:hover { background: var(--ipy-soft) }
.ipy-cc-section.is-selected { background: #e6ece4; font-weight: 600 }
.ipy-cc-section-duplicate, .ipy-cc-section-delete { width: 28px; height: 28px; border-radius: 9px; background: transparent; font-size: 15px !important; line-height: 1 }
.ipy-cc-section-duplicate { color: var(--ipy-accent) !important }
.ipy-cc-section-duplicate:hover { background: var(--ipy-soft) }
.ipy-cc-section-delete { color: #8a514b !important; font-size: 19px !important }
.ipy-cc-section-delete:hover { background: #f8e9e7 }
.ipy-cc-section-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ipy-cc-section small { flex: none; font-size: 10px; color: var(--ipy-muted); padding: 3px 7px; border-radius: 7px; background: rgba(255, 255, 255, .8) }
.ipy-cc-others { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--ipy-line) }
.ipy-cc-others summary { cursor: pointer; font-size: 12px; color: var(--ipy-muted); margin-bottom: 8px }
.ipy-cc-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.ipy-cc-fab {
  position: fixed; z-index: 900; right: 20px; bottom: 20px; padding: 12px 18px; border: 1px solid rgba(255, 255, 255, .9); border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .82); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 8px 30px rgba(18, 44, 40, .2); font-weight: 600; color: var(--ipy-accent);
}
/* Auswahl in der Seite */
.ipy-cc-selectable { cursor: pointer }
.ipy-cc-selectable:hover { outline: 2px dashed rgba(113, 150, 124, .75); outline-offset: 3px }
.ipy-cc-selected, .ipy-cc-selected:hover { outline: 2px solid #71967c; outline-offset: 3px }
.ipy-cc-selected::before {
  content: attr(data-ipy-cc-label); position: absolute; z-index: 5; top: -13px; left: 10px; max-width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 4px 10px; border-radius: 6px; background: #3f6650; color: #fff; font: 600 11px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; letter-spacing: normal; text-transform: none;
}
@media (max-width: 700px) {
  .ipy-cc-panel { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-width: none; max-height: 62vh; padding: 14px }
  .ipy-cc-fab { right: 12px; bottom: 12px }
}
@media print { .ipy-cc-panel, .ipy-cc-fab { display: none !important } }

/* Tab „Aussehen“ */
.ipy-cc-field { margin: 0 0 14px }
.ipy-cc-field-label { display: block; margin: 0 2px 6px; font-size: 12px; font-weight: 600; color: #36483e }
.ipy-cc-segmented { display: flex; padding: 3px; border-radius: 11px; background: #e6ebe6; gap: 2px }
.ipy-cc-segmented button { flex: 1; min-width: 0; padding: 7px 4px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 11.5px; font-weight: 600; color: #36483e; cursor: pointer }
.ipy-cc-segmented button.is-selected { background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .06) }
.ipy-cc-segmented button:disabled { opacity: .45; cursor: not-allowed }
.ipy-cc-design-site { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--ipy-line) }
.ipy-cc-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 7px }
.ipy-cc-swatch, .ipy-cc-swatch-custom { width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--ipy-line); background: var(--swatch); cursor: pointer }
.ipy-cc-swatch.is-selected, .ipy-cc-swatch-custom.is-selected { box-shadow: 0 0 0 2px var(--ipy-accent) }
.ipy-cc-swatch-custom.is-selected { background: var(--swatch) }
.ipy-cc-swatch-custom { position: relative; overflow: hidden; background: conic-gradient(#e0793c, #d6f590, #38bdf8, #a78bfa, #ff5a5f, #e0793c) }
.ipy-cc-swatch-custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0 }
.ipy-cc-swatch-default { height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--ipy-line); background: rgba(255, 255, 255, .7); font: inherit; font-size: 11px; font-weight: 600; color: #36483e; cursor: pointer }
.ipy-cc-swatch-default.is-selected { border-color: var(--ipy-accent); box-shadow: 0 0 0 1px var(--ipy-accent) }
.ipy-cc-panel select { display: block; width: 100%; padding: 8px 10px; border: 1px solid #dcdbe7; border-radius: 10px; background: rgba(255, 255, 255, .8); font: inherit; font-size: 12.5px; color: #36483e }
.ipy-cc-design-note { margin: 10px 0 0 !important; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .7); color: #36483e !important }
.ipy-cc-design-actions { margin-top: 16px }
.ipy-cc-create-dialog { position: fixed; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: min(420px, calc(100vw - 32px)); max-height: min(80vh, 620px); padding: 24px; border: 1px solid var(--ipy-line); border-radius: 18px; color: #263d34; background: #fff; box-shadow: 0 22px 70px rgba(20, 40, 30, .28); font: 14px/1.5 system-ui, sans-serif }
.ipy-cc-create-dialog::backdrop { background: rgba(15, 32, 25, .45); backdrop-filter: blur(3px) }
.ipy-cc-create-dialog h2 { margin: 0 42px 6px 0; font-size: 20px }
.ipy-cc-create-dialog p { margin: 0 0 16px; color: #68776e; font-size: 13px }
.ipy-cc-create-close { position: absolute; top: 14px; right: 14px }
.ipy-cc-create-options { display: grid; gap: 8px }
.ipy-cc-create-options .ipy-cc-panel-button { width: 100%; margin: 0; text-align: left }
.ipy-cc-segmented button:focus-visible, .ipy-cc-swatch:focus-visible, .ipy-cc-swatch-default:focus-visible, .ipy-cc-swatch-custom:focus-within { outline: 2px solid var(--ipy-accent); outline-offset: 2px }