/* Mockup controls (review only). Neutral glass styling so it reads as a tool, not as design. */
.mc-panel { position: fixed; left: 16px; bottom: 16px; z-index: 9999; font: 500 14px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; color: #1f1d1b; }
/* Phone: a slim vertical tab on the right edge, so it never covers page actions */
@media (max-width: 760px) {
  .mc-panel { left: auto; right: 0; bottom: auto; top: 58%; }
  .mc-fab { writing-mode: vertical-rl; min-height: 0; padding: 10px 5px; border-radius: 12px 0 0 12px; font-size: 11px; gap: 5px; opacity: .82; box-shadow: -4px 6px 18px rgba(0, 0, 0, .18); }
  .mc-fab[aria-expanded="true"] { opacity: 1; }
  .mc-body { left: auto; right: calc(100% + 8px); bottom: auto; top: -40px; margin: 0; width: min(272px, calc(100vw - 64px)); }
}
.mc-fab { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border: 0; border-radius: 999px; background: rgba(31, 29, 27, .86); color: #fff; font: inherit; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); backdrop-filter: blur(8px); }
.mc-dot { width: 8px; height: 8px; border-radius: 50%; background: #ffcc00; box-shadow: 0 0 0 3px rgba(255, 204, 0, .25); }
.mc-body { margin-bottom: 10px; position: absolute; bottom: 100%; left: 0; width: 272px; padding: 14px; border-radius: 20px; background: rgba(255, 255, 255, .96); box-shadow: 0 18px 48px rgba(0, 0, 0, .22); backdrop-filter: blur(12px); }
.mc-h { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #6b6560; }
.mc-seg { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: #f1eee9; margin-bottom: 10px; }
.mc-seg button { flex: 1; min-height: 34px; border: 0; border-radius: 10px; background: transparent; font: inherit; font-size: 13px; cursor: pointer; color: inherit; }
.mc-seg button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); font-weight: 700; }
.mc-sw { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 4px; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.mc-knob { flex: none; width: 36px; height: 22px; border-radius: 999px; background: #d9d4cc; position: relative; transition: background .2s; }
.mc-knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.mc-sw[aria-pressed="true"] .mc-knob { background: #ad2221; }
.mc-sw[aria-pressed="true"] .mc-knob::after { transform: translateX(14px); }
.mc-admin { display: block; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: #ad2221; color: #fff; text-align: center; text-decoration: none; font-weight: 700; }
.mc-fab:focus-visible, .mc-body button:focus-visible, .mc-admin:focus-visible, .mc-edit-chip:focus-visible { outline: 3px solid #ffcc00; outline-offset: 2px; }

/* Notes: hidden unless "Notizen" is on — keeps the mockup clean by default */
.mock-note { display: none !important; }
.show-notes .mock-note { display: inline-flex !important; }

/* Edit mode: every plannable area gets a soft dashed outline and a chip linking to the planner */
.edit-mode [data-edit] { position: relative; outline: 2px dashed rgba(173, 34, 33, .55); outline-offset: 6px; border-radius: inherit; }
.mc-edit-chip { display: none; }
.edit-mode .mc-edit-chip { display: inline-flex; align-items: center; gap: 6px; position: absolute; top: -18px; right: 12px; z-index: 50; min-height: 34px; padding: 6px 12px 6px 10px; border-radius: 999px; background: #ad2221; color: #fff !important; font: 700 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif; text-decoration: none !important; box-shadow: 0 6px 18px rgba(173, 34, 33, .35); white-space: nowrap; }
.mc-edit-chip svg { width: 16px; height: 16px; }