/* nestwärme Slides — Proof of Concept (no build step) */

@font-face {
  font-family: "Marguerite Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/MargueriteGrotesk2022-Regular.woff") format("woff");
}
@font-face {
  font-family: "Marguerite Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./assets/fonts/MargueriteGrotesk2022-Bold.woff") format("woff");
}
@font-face {
  font-family: "Marguerite Grotesk";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("./assets/fonts/MargueriteGrotesk2022-Light.woff") format("woff");
}

/* Special headline system */
@font-face {
  font-family: "Marguerite Nestwärme Bold";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/MargueriteNestwaerme-Bold.woff2") format("woff2");
}
@font-face { font-family: "Marguerite Nestwärme Freiraum"; font-style: normal; font-weight: 400; font-display: swap; src: url("./assets/fonts/MargueriteNestwaerme-FreiraumSchaffen.woff2") format("woff2"); }
@font-face { font-family: "Marguerite Nestwärme Hinaus"; font-style: normal; font-weight: 400; font-display: swap; src: url("./assets/fonts/MargueriteNestwaerme-HinausWachsen.woff2") format("woff2"); }
@font-face { font-family: "Marguerite Nestwärme Einander"; font-style: normal; font-weight: 400; font-display: swap; src: url("./assets/fonts/MargueriteNestwaerme-EinanderZuwenden.woff2") format("woff2"); }
@font-face { font-family: "Marguerite Nestwärme Perspektive"; font-style: normal; font-weight: 400; font-display: swap; src: url("./assets/fonts/MargueriteNestwaerme-PerpektiveWechseln.woff2") format("woff2"); }
@font-face { font-family: "Marguerite Nestwärme Spielerisch"; font-style: normal; font-weight: 400; font-display: swap; src: url("./assets/fonts/MargueriteNestwaerme-SpielerischAgieren.woff2") format("woff2"); }
@font-face { font-family: "Marguerite Nestwärme Zusammen"; font-style: normal; font-weight: 400; font-display: swap; src: url("./assets/fonts/MargueriteNestwaerme-ZusammenWachsen.woff2") format("woff2"); }

:root {
  --nw-yellow: #ffd200;
  --nw-dark: #1b1b1b;
  --nw-paper: #ffffff;
  --nw-grey: rgba(0,0,0,.08);

  /* slide bg presets */
  /* primary */
  --p1: #ffcb00;
  --p2: #e9aa03;
  --p3: #ff7e1d;
  --p4: #f85d1c;
  --p5: #c33e10;
  --p6: #808059;
  --p7: #756133;
  --p8: #704a2b;

  /* secondary */
  --s1: #f2e8de;
  --s2: #cfd6d1;
  --s3: #e3e5e5;
  --s4: #e3ded4;
  --s5: #d8d4d1;
  --s6: #ab9e9c;
  --s7: #c2bfbd;

  --font-ui: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-body: "Marguerite Grotesk", var(--font-ui);
  --font-display: "Marguerite Nestwärme Bold", "Marguerite Grotesk", var(--font-ui);

  --radius: 16px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: #0f1115;
  color: #e9eef7;
  font: 14px/1.4 var(--font-ui);
}

/* Floating toolbar */
.toolbar {
  position: fixed;
  z-index: 100;
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(18,21,28,.92);
  border: 1px solid rgba(255,255,255,.14);
  /* Disabled: can trigger GPU flicker on some external monitors (Safari/BenQ PD-series). */
  backdrop-filter: none;
}
.toolbar__btn {
  appearance: none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #e9eef7;
  border-radius: 10px;
  padding: 6px 10px;
  font: 13px/1 var(--font-ui);
}
.toolbar__btn:hover { background: rgba(255,255,255,.12); }
.toolbar__sep { width: 1px; align-self: stretch; background: rgba(255,255,255,.12); margin: 0 2px; }
.toolbar[hidden],
#toolbar[hidden],
#headlineBar[hidden] { display: none !important; }

.confirm {
  position: fixed;
  z-index: 9998;
  min-width: 240px;
  max-width: 340px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(10,10,12,.92);
  color: #fff;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
.confirm[hidden] { display:none !important; }
.confirm__q { font: 13px/1.3 system-ui; margin-bottom: 10px; }
.confirm__row { display:flex; gap:10px; justify-content:flex-end; }

/* In-slide editable text */
[contenteditable="true"] { outline: none; }
.editable.is-editing {
  box-shadow: 0 0 0 2px rgba(255,255,255,.22);
  border-radius: 10px;
}

/* Headline edit affordance */
#headlineView[contenteditable="true"].is-editing {
  box-shadow: 0 0 0 2px rgba(255,255,255,.22);
  border-radius: 12px;
  padding: 4px 6px;
  margin-left: -6px;
}

.app {
  height: 100%;
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
}

.panel {
  background: #12151c;
  border-right: 1px solid rgba(255,255,255,.08);
  padding: 14px;
  overflow: auto;
}
.panel__brand { font-weight: 800; letter-spacing: .02em; }
.panel__hint { opacity: .7; font-size: 12px; margin-top: 4px; }

.panel__section { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.07); }

/* Accordion */
.acc {
  margin-top: 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,.03);
}
.acc > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  font-weight: 800;
  text-transform: lowercase;
  letter-spacing: .02em;
  position: relative;
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::after {
  content: "▾";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .7;
  transition: transform .15s ease;
}
.acc[open] > summary::after { transform: translateY(-50%) rotate(180deg); }
.acc__body { padding: 10px 12px 12px; border-top: 1px solid rgba(255,255,255,.08); }

.presetSwatch{
  height: 10px;
  border-radius: 999px;
  margin-top: 8px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}

/* Corner picker */
.cornerPick {
  width: 92px;
  height: 68px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
  padding: 8px;
}
.corner {
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  border-radius: 8px;
}
.corner[aria-pressed="true"] {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.30);
}
.corner--tl { border-top-left-radius: 22px; }
.corner--tr { border-top-right-radius: 22px; }
.corner--bl { border-bottom-left-radius: 22px; }
.corner--br { border-bottom-right-radius: 22px; }
.label { display:block; font-size: 12px; opacity: .8; margin-bottom: 6px; }
.small { font-size: 12px; opacity: .7; margin-top: 6px; }
#headlineFit[data-status="ok"] { color: #b7f0c2; opacity: .95; }
#headlineFit[data-status="bad"] { color: #ffb3b3; opacity: 1; font-weight: 700; }

input[type="text"], textarea, select {
  width: 100%;
  background: rgba(255,255,255,.06);
  color: #e9eef7;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 10px;
  outline: none;
}
textarea { resize: vertical; }

.row { display:flex; align-items:center; gap: 10px; margin-top: 10px; }
.row input[type="range"] { width: 100%; }

.btn {
  width: 100%;
  display: block;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #e9eef7;
  cursor: pointer;
  transition: transform .08s ease, background-color .12s ease, border-color .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.btn:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.28);
}
.btn:active {
  transform: translateY(1px) scale(.995);
  background: rgba(255,255,255,.18);
}
.btn:focus-visible {
  outline: 2px solid rgba(255,255,255,.42);
  outline-offset: 2px;
}
.btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}
.btn--primary {
  background: var(--nw-yellow);
  border-color: rgba(0,0,0,.10);
  color: #111;
  font-weight: 800;
}
.btn--primary:hover {
  filter: brightness(1.03);
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
}
.btn--primary:active {
  filter: brightness(.98);
}
.btn--ghost { background: transparent; }
.btn--ghost:hover { background: rgba(255,255,255,.08); }

.slides { margin: 0; padding-left: 0; list-style: none; }
.slides li { margin: 0; }

.slideItem {
  display: grid;
  grid-template-columns: 28px 1fr 32px 32px;
  gap: 8px;
  align-items: center;
  margin: 8px 0;
}
.slideItem[data-hidden="1"] { opacity: .55; }
.slideItem.is-over { outline: 2px solid rgba(255,255,255,.16); border-radius: 12px; }

.slideItem__handle,
.slideItem__main,
.slideItem__eye,
.slideItem__del {
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: inherit;
}

.slideItem__handle {
  width: 28px;
  padding: 0;
  cursor: grab;
  opacity: .85;
}
.slideItem__handle:active { cursor: grabbing; }

.slideItem__main {
  width: 100%;
  text-align: left;
  padding: 0 12px;
}
.slideItem__main[aria-current="true"] { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.24); }

.slideItem__eye { width: 32px; padding: 0; opacity: .9; }
.slideItem__del { width: 32px; padding: 0; font-size: 22px; line-height: 1; opacity: .9; }

.slideItem__eye:hover,
.slideItem__del:hover,
.slideItem__handle:hover { background: rgba(255,255,255,.10); }
.slideItem__del:active { background: rgba(255,255,255,.14); }

.stage {
  display: grid;
  place-items: center;
  padding: 18px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* Experimental interactive SceneDeck */
.sceneStage {
  width: 100%;
  max-width: 1180px;
  height: min(100%, calc(100vh - 36px));
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
}
.sceneCanvasWrap {
  position: relative;
  width: min(100%, calc((100vh - 72px) * 16 / 9));
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  max-height: 100%;
  overflow: hidden;
}
.sceneViewport {
  width: 1600px;
  height: 900px;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--scene-bg, var(--nw-yellow));
  color: var(--scene-fg, #111);
  box-shadow: 0 20px 80px rgba(0,0,0,.45);
  font-family: var(--font-body);
  isolation: isolate;
  transform-origin: 0 0;
  flex: none;
}
.sceneCanvas {
  position: absolute;
  inset: 0;
  width: 1600px;
  height: 900px;
  transform: translate(var(--cam-x, 0px), var(--cam-y, 0px)) scale(var(--cam-scale, 1));
  transform-origin: 50% 50%;
  transition: transform 680ms cubic-bezier(.2,.8,.2,1);
}
.sceneViewport--editor .sceneCanvas {
  transition: none;
}
.sceneViewport[data-enhanced="0"] .sceneCanvas {
  transform: none;
  transition: none;
}
.sceneModule {
  position: absolute;
  overflow: hidden;
  transition: opacity .24s ease, transform .24s ease, box-shadow .24s ease, filter .24s ease;
}
.sceneModule.is-primary {
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.16));
  transform: translateY(-1.5%);
}
.sceneHeadline {
  line-height: .98;
  margin: 0;
  cursor: default;
  overflow: hidden;
  max-height: 100%;
}
.sceneTextCard,
.sceneCard,
.sceneQuote,
.sceneStat {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: #f2e8de;
  background: color-mix(in oklab, #fff 42%, var(--scene-bg));
  color: #111;
  padding: var(--module-pad, 24px);
  display: grid;
  align-content: start;
  gap: .45em;
  overflow: hidden;
}
.sceneTextCard p {
  margin: 0 0 .55em;
  font-size: inherit;
  line-height: 1.25;
}
.sceneCard strong {
  line-height: 1.05;
}
.sceneCard span {
  line-height: 1.25;
}
.sceneQuote {
  margin: 0;
  line-height: 1.2;
  font-style: italic;
}
.sceneQuote cite {
  display: block;
  margin-top: .6em;
  font-size: .62em;
  font-style: normal;
  opacity: .72;
}
.sceneStat {
  background: var(--scene-accent, #ff7e1d);
  color: #111;
  place-items: center;
  align-content: center;
  text-align: center;
}
.sceneStat strong {
  display: block;
  font-weight: 800;
  line-height: .82;
}
.sceneStat span {
  font-weight: 800;
  line-height: 1.02;
}
.sceneImage {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #f2e8de;
  background: color-mix(in oklab, var(--scene-accent, #ff7e1d) 20%, #fff);
}
.sceneImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: 50% 50%;
  will-change: transform;
}
.sceneImage--placeholder {
  display: grid;
  place-items: center;
  border: 1px dashed rgba(0,0,0,.22);
}
.sceneImage--placeholder span {
  font-weight: 800;
  opacity: .58;
}
.sceneLogo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.sceneShape {
  width: 100%;
  height: 100%;
  border-radius: 0 999px 999px 999px;
  background: var(--shape-color, var(--scene-accent));
}
.sceneProgress,
.sceneWarnings {
  position: absolute;
  z-index: 10;
  left: 16px;
  bottom: 14px;
  border-radius: 999px;
  padding: 7px 10px;
  font: 12px/1.15 var(--font-ui);
  background: rgba(0,0,0,.28);
  color: #fff;
}
.sceneWarnings {
  left: auto;
  right: 14px;
  border-radius: 10px;
  max-width: 380px;
  opacity: .9;
}
.sceneList,
.sceneStateList {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.scenePill,
.sceneStatePill {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: inherit;
  padding: 6px 9px;
  font: 12px/1 var(--font-ui);
  cursor: pointer;
}
.scenePill[aria-current="true"],
.sceneStatePill[aria-current="true"] {
  background: var(--nw-yellow);
  color: #111;
  border-color: rgba(0,0,0,.10);
  font-weight: 800;
}
.sceneWarnPanel {
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,203,0,.35);
  background: rgba(255,203,0,.10);
  color: #ffe9a0;
  font-size: 12px;
}
.sceneModuleControls {
  margin-top: 8px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  overflow: hidden;
}
.sceneModuleControls > summary {
  cursor: pointer;
  padding: 8px 10px;
  font-weight: 800;
}
.sceneModuleControls > :not(summary) {
  margin: 0 10px 10px;
}

body[data-scene-present="1"] .panel { display: none !important; }
body[data-scene-present="1"] .app { display: block; }
body[data-scene-present="1"] .stage {
  padding: 0;
  display: grid;
  place-items: center;
  height: 100vh;
  overflow: hidden;
  background: #000;
}
body[data-scene-present="1"] .deck,
body[data-scene-present="1"] #socialStage,
body[data-scene-present="1"] #flyerStage,
body[data-scene-present="1"] #composerStage {
  display: none !important;
}
body[data-scene-present="1"] .sceneStage {
  width: 100vw;
  max-width: none;
  height: 100vh;
  display: grid;
  place-items: center;
}
body[data-scene-present="1"] .sceneCanvasWrap {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  display: grid;
  place-items: center;
}
body[data-scene-present="1"] .sceneViewport {
  position: relative;
  left: auto;
  top: auto;
  border-radius: 0;
  box-shadow: none;
  transform-origin: 50% 50%;
}
.scenePresentNav {
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}
.sceneTransitionGhost {
  position: absolute;
  inset: 0;
  z-index: 18;
  pointer-events: none;
  animation: sceneGhostFade .32s ease forwards;
}
.sceneViewport.is-scene-entering {
  animation: sceneViewportIn .34s ease;
}
@keyframes sceneGhostFade {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes sceneViewportIn {
  from { opacity: .4; }
  to { opacity: 1; }
}
body[data-scene-present="1"] .sceneStage:hover .presentNav__btn { opacity: .9; }
body[data-scene-present="1"] .sceneStage:hover .presentNav__hint { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .sceneCanvas,
  .sceneModule {
    transition-duration: .01ms;
  }
}

@media (max-width: 1180px) {
  .sceneStage {
    max-width: none;
    height: min(100%, calc(100vh - 24px));
  }
  .sceneCanvasWrap {
    width: min(100%, calc((100vh - 48px) * 16 / 9));
  }
}

/* Slide canvas: 16:9 */
.deck {
  width: min(1100px, calc(100vw - 360px - 36px));
  aspect-ratio: 16 / 9;
  /* CI rule: never put text on white. Slides always sit on a CI color. */
  background: var(--slide-bg, var(--nw-yellow));
  color: var(--slide-fg, #111);
  border-radius: var(--radius);
  position: relative;
  --box-round: 54px;
  --box-corner: br;
  overflow: hidden;
  box-shadow: 0 20px 80px rgba(0,0,0,.45);
  font-family: var(--font-body);
}

/* Presentation mode */
body[data-present="1"] .panel { display: none !important; }
body[data-present="1"] .app { display: block; }
body[data-present="1"] .stage {
  padding: 0;
  display: grid;
  /* Center the scaled deck in the viewport (transform does not affect layout sizing). */
  place-items: center;
  height: 100vh;
  overflow: hidden;
  background: #000;
}
body[data-present="1"] .deck {
  /* Presentation mode uses a fixed “design size” and scales the whole deck via transform (set in JS). */
  width: 1600px;
  height: 900px;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
  transform-origin: 50% 50%;
}
body[data-present="1"] .toolbar,
body[data-present="1"] #toolbar,
body[data-present="1"] #headlineBar,
body[data-present="1"] .confirm,
body[data-present="1"] .imgImport,
body[data-present="1"] .vslider,
body[data-present="1"] .memberImport,
body[data-present="1"] .memberZoomV,
body[data-present="1"] #bootMark,
body[data-present="1"] #err,
body[data-present="1"] #saveWarn {
  display: none !important;
}
body[data-present="1"] [contenteditable="true"] { pointer-events: none; }

.presentNav {
  position: absolute;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}
.presentNav__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 64px;
  height: 120px;
  border: 0;
  background: rgba(0,0,0,.18);
  color: #fff;
  font: 700 30px/1 system-ui;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: auto;
}
.presentNav__btn--prev { left: 0; border-radius: 0 14px 14px 0; }
.presentNav__btn--next { right: 0; border-radius: 14px 0 0 14px; }
body[data-present="1"] .deck:hover .presentNav__btn { opacity: .9; }

.presentNav__hint {
  position: absolute;
  left: 16px;
  bottom: 14px;
  color: rgba(255,255,255,.9);
  font: 12px/1.2 system-ui;
  background: rgba(0,0,0,.28);
  padding: 8px 10px;
  border-radius: 12px;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
body[data-present="1"] .deck:hover .presentNav__hint { opacity: 1; }

/* Simple crossfade between slides */
body[data-present="1"] .deck { position: relative; }
body[data-present="1"] .slide { animation: presentFade .18s ease; }
@keyframes presentFade { from { opacity: 0; } to { opacity: 1; } }

body[data-present="1"] .box,
body[data-present="1"] .content-panel,
body[data-present="1"] .support-panel,
body[data-present="1"] .caption-panel,
body[data-present="1"] .quoteBlock,
body[data-present="1"] .gridModWrap,
body[data-present="1"] .memberCard,
body.offlinePresentation .box,
body.offlinePresentation .content-panel,
body.offlinePresentation .support-panel,
body.offlinePresentation .caption-panel,
body.offlinePresentation .quoteBlock,
body.offlinePresentation .gridModWrap,
body.offlinePresentation .memberCard {
  --present-hl: var(--slide-accent, currentColor);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
  transform-origin: 50% 50%;
  will-change: transform;
}

body[data-present="1"] .box,
body[data-present="1"] .content-panel,
body[data-present="1"] .support-panel,
body[data-present="1"] .caption-panel,
body[data-present="1"] .quoteBlock,
body.offlinePresentation .box,
body.offlinePresentation .content-panel,
body.offlinePresentation .support-panel,
body.offlinePresentation .caption-panel,
body.offlinePresentation .quoteBlock {
  --present-hl: currentColor;
}

body[data-present="1"] :is(.box, .content-panel, .support-panel, .caption-panel, .quoteBlock, .gridModWrap, .memberCard):hover,
body.offlinePresentation :is(.box, .content-panel, .support-panel, .caption-panel, .quoteBlock, .gridModWrap, .memberCard):hover {
  transform: translateY(calc(-7px * var(--slide-scale, 1))) scale(1.012);
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.18));
  box-shadow:
    0 0 0 2px color-mix(in oklab, var(--present-hl) 55%, transparent),
    0 0 24px color-mix(in oklab, var(--present-hl) 32%, transparent);
  animation: presentGlowPulse .72s ease-out 1;
}

body[data-present="1"] .slide--body[data-autolayout] > .box:hover,
body[data-present="1"] .slide--imageSplit[data-autolayout] .split__text > .box:hover,
body.offlinePresentation .slide--body[data-autolayout] > .box:hover,
body.offlinePresentation .slide--imageSplit[data-autolayout] .split__text > .box:hover {
  transform: translateY(calc(var(--al-body-offset, 0px) - (7px * var(--slide-scale, 1)))) scale(1.012);
}

body[data-present="1"] .gridModWrap:hover .gridMod--image,
body.offlinePresentation .gridModWrap:hover .gridMod--image {
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.18));
}

body[data-present="1"] .h1,
body.offlinePresentation .h1 {
  transition: filter .18s ease, text-shadow .18s ease;
}

body[data-present="1"] .h1 .ch,
body.offlinePresentation .h1 .ch {
  transition: none;
}

body[data-present="1"] .h1:hover,
body.offlinePresentation .h1:hover {
  text-shadow:
    0 calc(3px * var(--slide-scale, 1)) calc(7px * var(--slide-scale, 1)) rgba(0,0,0,.18),
    0 0 calc(10px * var(--slide-scale, 1)) color-mix(in oklab, currentColor 16%, transparent);
}

body[data-present="1"] .h1:hover .ch,
body.offlinePresentation .h1:hover .ch {
  -webkit-text-stroke: 0 transparent;
  text-shadow: inherit;
}

body[data-present="1"] .slide--image .frame,
body[data-present="1"] .slide--imageSplit .media-frame,
body[data-present="1"] .slide--imageSplit .split__img,
body.offlinePresentation .slide--image .frame,
body.offlinePresentation .slide--imageSplit .media-frame,
body.offlinePresentation .slide--imageSplit .split__img {
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
  animation: none !important;
}

@keyframes presentGlowPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--present-hl) 45%, transparent), 0 0 0 color-mix(in oklab, var(--present-hl) 0%, transparent); }
  100% { box-shadow: 0 0 0 2px color-mix(in oklab, var(--present-hl) 55%, transparent), 0 0 24px color-mix(in oklab, var(--present-hl) 32%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-present="1"] :is(.box, .content-panel, .support-panel, .caption-panel, .quoteBlock, .gridModWrap, .memberCard):hover,
  body.offlinePresentation :is(.box, .content-panel, .support-panel, .caption-panel, .quoteBlock, .gridModWrap, .memberCard):hover {
    animation: none;
    transition-duration: .01ms;
  }
  body[data-present="1"] .h1:hover .ch,
  body.offlinePresentation .h1:hover .ch {
    text-shadow: none;
    -webkit-text-stroke: 0 transparent;
  }
}

/* A simple brand corner */
.slide__logo {
  position: absolute;
  left: auto;
  right: calc(58px * var(--slide-scale, 1));
  bottom: calc(48px * var(--slide-scale, 1));
  width: calc(124px * var(--slide-scale, 1));
  opacity: .95;
}

.slide {
  position: absolute;
  inset: 0;
  padding: calc(58px * var(--slide-scale, 1)) calc(72px * var(--slide-scale, 1));
  background: var(--slide-bg);
  isolation: isolate;
  /* Prevent blurred bg images from sampling “transparent” outside the slide and revealing the solid bg at the edges. */
  overflow: hidden;
}

.slide::before {
  content: "";
  position: absolute;
  /* Expand generously so blur has pixels to work with; clipped by .slide { overflow:hidden }. */
  inset: -48px;
  background-image: var(--bg-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Extra safety: avoid transforms here (can trigger compositor flicker on some setups). */
  transform: none;
  opacity: var(--bg-img-opacity, 1);
  mix-blend-mode: var(--bg-img-blend, normal);
  filter: var(--bg-img-filter, none);
  z-index: 0;
  pointer-events: none;
}

/* debug: if we think bgimg is on, make it obvious */
.slide[data-bgimg="1"]::before {
  outline: 3px solid rgba(0,255,255,.35);
}
.slide > :not(.slide__logo):not(.split):not(.frame) { position: relative; z-index: 1; }
/* Keep the logo truly pinned to the corner. */
.slide > .slide__logo { position: absolute !important; z-index: 2; }
/* Split + frame must remain position:absolute/relative as defined by their templates. */

.h1 {
  font-family: var(--font-display);
  text-transform: lowercase;
  font-size: calc(var(--headline-size, 76px) * var(--slide-scale, 1));
  line-height: 0.98;
  letter-spacing: 0;
  margin: 0 0 calc(24px * var(--slide-scale, 1));
  cursor: text;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

/* Per-letter glyph mixing */
.h1 .headlineWord {
  display: inline-block;
  white-space: nowrap;
}
.h1 .ch {
  display: inline-block;
}

/* If special font lacks a glyph (e.g. umlauts), fall back to Grotesk for that character. */
.h1 .nw-fallback {
  font-family: "Marguerite Grotesk", var(--font-body);
  font-weight: 700;
}
/* (selection frame removed from main slide view; selection happens inside headline designer modal) */

.g--bold { font-family: "Marguerite Nestwärme Bold", var(--font-display); }
.g--groteskBold { font-family: "Marguerite Grotesk", var(--font-body); font-weight: 700; }
.g--freiraum { font-family: "Marguerite Nestwärme Freiraum", var(--font-display); }
.g--hinaus { font-family: "Marguerite Nestwärme Hinaus", var(--font-display); }
.g--einander { font-family: "Marguerite Nestwärme Einander", var(--font-display); }
.g--perspektive { font-family: "Marguerite Nestwärme Perspektive", var(--font-display); }
.g--spielerisch { font-family: "Marguerite Nestwärme Spielerisch", var(--font-display); }
.g--zusammen { font-family: "Marguerite Nestwärme Zusammen", var(--font-display); }

.p {
  font-size: calc(27px * var(--slide-scale, 1));
  line-height: 1.35;
  margin: calc(16px * var(--slide-scale, 1)) 0 0;
  max-width: 36ch;
}
.p[data-size="s"] { font-size: calc(24px * var(--slide-scale, 1)); }
.p[data-size="m"] { font-size: calc(27px * var(--slide-scale, 1)); }
.p[data-size="l"] { font-size: calc(31px * var(--slide-scale, 1)); line-height: 1.3; }

/* Density-aware typography tuning (quality+) */
.slide[data-autolayout="airy"] .p { line-height: 1.45; }
.slide[data-autolayout="balanced"] .p { line-height: 1.35; }
.slide[data-autolayout="dense"] .p,
.slide[data-autolayout="overflow-tightened"] .p,
.slide[data-autolayout="overflow-escalated-2col"] .p { line-height: 1.24; }

.slide[data-autolayout="airy"] .p p { margin: 0 0 0.95em; }
.slide[data-autolayout="balanced"] .p p { margin: 0 0 0.75em; }
.slide[data-autolayout="dense"] .p p,
.slide[data-autolayout="overflow-tightened"] .p p,
.slide[data-autolayout="overflow-escalated-2col"] .p p { margin: 0 0 0.48em; }

/* Block-level text sizing inside editable areas (paragraphs / lines / list items)
   Note: contenteditable roots often *are* the block (no nested <p>), so we support both
   descendant and self classes. */
.editable.t--s, .editable .t--s { font-size: calc(24px * var(--slide-scale, 1)); line-height: 1.35; }
.editable.t--m, .editable .t--m { font-size: calc(27px * var(--slide-scale, 1)); line-height: 1.35; }
.editable.t--l, .editable .t--l { font-size: calc(31px * var(--slide-scale, 1)); line-height: 1.22; }

/* If the editable also has the .p base class, ensure the size wins over .p defaults */
.p.editable.t--s { font-size: calc(24px * var(--slide-scale, 1)); line-height: 1.35; }
.p.editable.t--m { font-size: calc(27px * var(--slide-scale, 1)); line-height: 1.35; }
.p.editable.t--l { font-size: calc(31px * var(--slide-scale, 1)); line-height: 1.22; }

.gridMod--text.size-s .p { font-size: calc(24px * var(--slide-scale, 1)); }
.gridMod--text.size-m .p { font-size: calc(27px * var(--slide-scale, 1)); }
.gridMod--text.size-l .p { font-size: calc(31px * var(--slide-scale, 1)); line-height: 1.3; }

.kicker {
  margin: 0 0 calc(16px * var(--slide-scale, 1));
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: calc(15px * var(--slide-scale, 1));
}

/* Templates */

/* Modular grid template */
.slide--grid { padding: calc(58px * var(--slide-scale, 1)) calc(72px * var(--slide-scale, 1)); }
.grid {
  position: absolute;
  inset: 0;
  padding: calc(58px * var(--slide-scale, 1)) calc(72px * var(--slide-scale, 1));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: calc(24px * var(--slide-scale, 1));
  z-index: 1;
  width: 100%;
  height: 100%;
  align-items: stretch;
  justify-items: stretch;
}

/* base empty cells (click targets) */
.gridCell {
  position: relative;
  border: 1px dashed rgba(0,0,0,.14);
  border-radius: 12px;
  overflow: hidden;
  min-height: 0;
}
.gridCell.is-empty { background: rgba(0,0,0,.02); }
.gridCell.is-empty::after {
  content: "+";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(0,0,0,.22);
  font-weight: 800;
  font-size: 18px;
}

/* module overlay */
.slide--grid[data-guides="0"] .gridModWrap {
  border-color: transparent;
  outline: none !important;
}

.gridModWrap {
  position: relative;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 12px;
  overflow: hidden;
  /* Important for CSS grid: make modules fill their grid area. */
  width: 100%;
  height: 100%;
  min-height: 0;
  align-self: stretch;
  justify-self: stretch;
  background: rgba(0,0,0,.00);
}
.gridModWrap.is-selected { outline: 2px solid rgba(0,0,0,.35); outline-offset: 2px; }

.gridMod {
  position: absolute;
  inset: 0;
  padding: calc(18px * var(--slide-scale, 1));
  display: grid;
  align-content: start;
  justify-items: start;
}
.gridMod--image {
  position: absolute;
  inset: 0;
  padding: 0;
  display: block;
}
.gridMod--headline .h1 { margin: 0; }
.gridMod--text .p { margin: 0; max-width: none; }
.gridImg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgba(0,0,0,.03);
}
/* In grid image modules, show the import button even without hover when empty. */
.gridImg[data-has="0"] .imgImport {
  opacity: .95;
  pointer-events: auto;
}

/* Debug overlay (temporary) */
#debugBar {
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 9999;
  font: 12px/1.3 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: rgba(255,255,255,.92);
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  padding: 8px 10px;
  max-width: min(640px, calc(100vw - 20px));
  white-space: pre-wrap;
  pointer-events: none;
}
#debugBar b { color: #fff; }
.gridImg[data-mask="tl"] { border-top-left-radius: var(--mask-r, 54px); }
.gridImg[data-mask="tr"] { border-top-right-radius: var(--mask-r, 54px); }
.gridImg[data-mask="bl"] { border-bottom-left-radius: var(--mask-r, 54px); }
.gridImg[data-mask="br"] { border-bottom-right-radius: var(--mask-r, 54px); }
.gridImg .frame__img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  transform-origin: 50% 50%;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}
.gridCaption {
  position: absolute;
  z-index: 5;
  left: 16px;
  right: 16px;
  bottom: 12px;
  font-size: 12px;
  opacity: .9;
  background: rgba(0,0,0,.18);
  color: #fff;
  padding: 6px 10px;
  border-radius: 10px;
}

.slide--cover {
  /* subtle overlay on top of theme background */
  background:
    radial-gradient(900px circle at 14% 22%, rgba(255, 255, 255, .22), transparent 60%),
    linear-gradient(120deg, rgba(255, 255, 255, .14), transparent 56%);
}

.slide--section {
  display: grid;
  place-items: center;
  text-align: center;
}
.slide--section .h1 { transform: translateY(-28px); margin-bottom: 0; }

.slide--body .box { max-width: 62ch; transform: translateY(var(--al-body-offset, 0px)); transition: transform .18s ease; }
.content-panel,
.slide--twoCols .box {
  min-height: 4.5em;
  padding-bottom: calc(24px * var(--slide-scale, 1));
}
.slide[data-box="1"] .content-panel,
.slide[data-box="1"].slide--twoCols .box {
  padding-bottom: calc(30px * var(--slide-scale, 1));
}

.slide--twoCols .cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(28px * var(--slide-scale, 1));
  margin-top: calc(18px * var(--slide-scale, 1));
}

.slide--imageSplit {
  padding: 0;
}
.slide--imageSplit .split {
  position: absolute !important;
  inset: 0;
  display: grid !important;
  grid-template-columns: 55% 45% !important;
  align-items: stretch;
  justify-items: stretch;
}
.slide--imageSplit[data-flip="1"] .split { grid-template-columns: 45% 55% !important; }
.slide--imageSplit.slide--textImage .split { grid-template-columns: 45% 55% !important; }

.slide--imageSplit .split__img { position: relative; overflow: hidden; }
.slide--imageSplit .split__text {
  /* Anchor-normalized with other core templates */
  padding: calc(58px * var(--slide-scale, 1)) calc(72px * var(--slide-scale, 1));
  display: grid;
  align-content: start;
  justify-items: start;
  text-align: left;
}
/* Auto-layout variants (beta): move content box only, keep kicker/headline anchors stable */
.slide--imageSplit[data-autolayout] .split__text > .box,
.slide--body[data-autolayout] > .box,
.slide--twoCols[data-autolayout] .cols {
  transform: translateY(var(--al-body-offset, 0px));
  transition: transform .18s ease;
}
.slide--imageSplit[data-flip="1"] .split__text { grid-column: 1; }
.slide--imageSplit[data-flip="1"] .split__img { grid-column: 2; }

/* Quote */
.slide--quote {
  display: grid;
  place-items: center;
  text-align: center;
}
.quoteBlock {
  max-width: 62ch;
}
.quoteWrap {
  display: inline;
  font-size: calc(34px * var(--slide-scale, 1));
  line-height: 1.25;
  font-style: italic;
}
.quote {
  display: inline;
  white-space: pre-wrap;
  outline: none;
}
/* Keep opening/closing quotes together with the text (no separate element that can wrap onto its own line). */
.quote::before { content: "“"; opacity: .92; }
.quote::after  { content: "”"; opacity: .92; }
.quote:empty::before {
  content: "“ein sanftes zitat…";
  opacity: .45;
}
.quote:empty::after {
  content: "”";
  opacity: .45;
}
.quoteAuthor {
  margin-top: calc(14px * var(--slide-scale, 1));
  font-size: calc(20px * var(--slide-scale, 1));
  opacity: .85;
  font-style: normal;
  min-height: 1.2em;
  outline: none;
}
.quoteAuthor:empty::before {
  content: "— name";
  opacity: .45;
}

/* Team */
.slide--team {
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  padding-top: 42px; /* move headline up a bit */
}
.slide--team .kicker { margin: 0 0 6px 0; }
.slide--team .h1 { margin: 0 0 6px 0; }
/* team logo uses global .slide__logo positioning */

.teamGrid {
  margin-top: 8px;
  display: grid;
  justify-content: center;
  gap: 46px 22px; /* extra row gap because names are absolutely positioned */
}

/* sizing + layout rules
   1–3: one row, bigger
   4–8: two rows, smaller
*/
.teamGrid[data-count="2"],
.teamGrid[data-count="3"] {
  --member-size: 240px;
  grid-template-columns: repeat(var(--cols, 3), var(--member-size));
}
.teamGrid[data-count="4"] {
  --member-size: 185px;
  grid-template-columns: repeat(4, var(--member-size));
  margin-top: 22px; /* nudge down to feel more centered */
}
.teamGrid[data-count="5"],
.teamGrid[data-count="6"],
.teamGrid[data-count="7"],
.teamGrid[data-count="8"] {
  --member-size: 155px;
  grid-template-columns: repeat(var(--cols, 4), var(--member-size));
}

.teamGrid[data-count="2"] { --cols: 2; }
.teamGrid[data-count="3"] { --cols: 3; }
.teamGrid[data-count="5"],
.teamGrid[data-count="6"] { --cols: 3; }
.teamGrid[data-count="7"],
.teamGrid[data-count="8"] { --cols: 4; }

.memberCard {
  position: relative;
  width: var(--member-size);
  /* allow the label to overlap upward if needed */
  display: block;
}

/* bring labels closer for one-row layouts */
.teamGrid[data-count="2"] .memberName,
.teamGrid[data-count="3"] .memberName,
.teamGrid[data-count="4"] .memberName {
  top: calc(var(--member-size) + 14px);
}

.teamGrid[data-count="2"],
.teamGrid[data-count="3"],
.teamGrid[data-count="4"] {
  gap: 34px 22px;
}

.memberWrap {
  position: relative;
  width: var(--member-size);
  height: var(--member-size);
}

.member {
  width: var(--member-size);
  height: var(--member-size);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  background: rgba(255,255,255,.10);
}
.member.is-selected { box-shadow: 0 0 0 3px rgba(255,255,255,.25); }
.member .frame__img { width: auto; height: auto; }

.memberName {
  position: absolute;
  left: 50%;
  top: calc(var(--member-size) + 18px);
  transform: translateX(-50%);

  width: calc(var(--member-size) + 20px);
  text-align: center;
  font-size: 14px;
  line-height: 1.15;
  opacity: .95;
  outline: none;

  padding: 0;
  min-height: 1.15em;
  max-height: 2.4em;
  overflow: hidden;

  border-radius: 8px;
}
.memberName.is-editing { box-shadow: 0 0 0 2px rgba(255,255,255,.18); padding: 2px 4px; }

.memberHint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 800;
  opacity: .7;
}

.memberImport {
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.38);
  color: rgba(255,255,255,.94);
  font: 12px/1 system-ui;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .12s ease, background .12s ease;
}
.memberImport:hover {
  background: rgba(0,0,0,.48);
  transform: translateX(-50%) scale(1.02);
}
.memberImport:active {
  background: rgba(0,0,0,.58);
  transform: translateX(-50%) scale(0.98);
}

.memberZoomV.vslider {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 124px;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  touch-action: none;
  cursor: ns-resize;
}

.vslider__track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.28);
}

.vslider__thumb {
  position: absolute;
  left: 50%;
  top: calc((1 - var(--p)) * 100%);
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.18);
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}

.memberWrap.is-zooming .memberZoomV,
.memberWrap:hover .memberZoomV,
.memberWrap:hover .memberImport,
.memberWrap.is-zooming .memberImport,
.memberWrap:focus-within .memberZoomV,
.memberWrap:focus-within .memberImport {
  opacity: .95;
  pointer-events: auto;
}

.memberImport { z-index: 4; }

.imgUiWrap { position: relative; }

.imgImport {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.38);
  color: rgba(255,255,255,.94);
  font: 12px/1 system-ui;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .12s ease, background .12s ease;
  z-index: 4;
}
.imgImport:hover { background: rgba(0,0,0,.48); transform: translateX(-50%) scale(1.02); }
.imgImport:active { background: rgba(0,0,0,.58); transform: translateX(-50%) scale(0.98); }

.imgZoomV.vslider {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 124px;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  touch-action: none;
  cursor: ns-resize;
}

.imgUiWrap:hover .imgImport,
.imgUiWrap:hover .imgZoomV,
.imgUiWrap:focus-within .imgImport,
.imgUiWrap:focus-within .imgZoomV {
  opacity: .95;
  pointer-events: auto;
}

/* make bg image controls match UI */
#bgImageControls .btn { width: 100%; }
#bgImageControls .row label { user-select: none; }

.slide--image .frame,
.slide--imageText .frame {
  position: absolute;
  inset: 0;
}

.frame {
  background: #f2f2f2;
}

.frame__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.frame__viewport.is-drop {
  outline: 3px dashed rgba(0,0,0,.25);
  outline-offset: -10px;
}

/* Modal (headline designer) */
.modal { position: fixed; inset: 0; z-index: 50; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.modal__panel {
  position: relative;
  width: min(1100px, calc(100vw - 40px));
  height: min(720px, calc(100vh - 40px));
  margin: 20px auto;
  background: #12151c;
  color: #e9eef7;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
}
.modal__head {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.modal__title { font-weight: 900; letter-spacing: .02em; }
.modal__sub { font-size: 12px; opacity: .72; margin-top: 2px; }
.modal__actions { display: flex; gap: 10px; align-items: center; }
.modal__actions input[type="text"] {
  width: 220px;
  background: rgba(255,255,255,.06);
  color: inherit;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 8px 10px;
}
.modal__body { overflow: hidden; }

.designer { height: 100%; display: grid; grid-template-columns: 1fr 420px; }
.designer__left { padding: 16px; overflow: auto; }
.designer__right { border-left: 1px solid rgba(255,255,255,.08); padding: 12px; overflow: auto; }
.designer__left input[type="text"] {
  width: 100%;
  background: rgba(255,255,255,.08);
  color: #e9eef7;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  padding: 10px 12px;
}
.designer__headline {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 16px;
  font-family: var(--font-display);
  font-size: 54px;
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.altStrip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.altBtn {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 10px 10px;
  text-align: left;
  color: #e9eef7;
  cursor: pointer;
}
.altBtn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); }
.altBtn.is-active { outline: 2px solid rgba(255,255,255,.28); outline-offset: 2px; }
.altBtn__label { font-size: 11px; opacity: .75; margin-bottom: 6px; }
.altBtn__glyph { font-family: "Marguerite Nestwärme Bold", var(--font-display); font-size: 28px; line-height: 1; }

.glyphGrid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
}
.glyph {
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  height: 48px;
  display: grid;
  place-items: center;
  font-family: "Marguerite Nestwärme Bold", var(--font-display);
  font-size: 26px;
  cursor: pointer;
  user-select: none;
  color: #e9eef7; /* avoid default button black */
}
.glyph:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); }

.frame__img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: 50% 50%;
  user-select: none;
  -webkit-user-drag: none;
  max-width: none;
}

/* Image+Text layout */
.slide--imageText .frame__viewport { inset: 0 45% 0 0; }
.slide--imageText .text {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 45%;
  padding: calc(58px * var(--slide-scale, 1)) calc(58px * var(--slide-scale, 1));
  /* CI rule: no white text areas. Use a tinted CI layer. */
  background: color-mix(in oklab, var(--slide-bg) 82%, rgba(255,255,255,.0));
  border-left: 1px solid rgba(0,0,0,.08);

  /* One rounded corner system */
  border-radius: 0;
}

/* Corner rounding: apply one rounded corner to boxed UI */
.slide--imageText[data-corner="br"] .text { border-bottom-right-radius: var(--box-round); }
.slide--imageText[data-corner="bl"] .text { border-bottom-left-radius: var(--box-round); }
.slide--imageText[data-corner="tr"] .text { border-top-right-radius: var(--box-round); }
.slide--imageText[data-corner="tl"] .text { border-top-left-radius: var(--box-round); }

/* List */
.box {
  padding: calc(22px * var(--slide-scale, 1)) calc(24px * var(--slide-scale, 1));
  background: var(--box-bg, transparent);
  color: var(--box-fg, inherit);
  border: 0;
  max-width: 52ch;

  /* Friendly micro-rounding on all corners */
  border-radius: 8px;
}

.box.content-panel,
.slide--twoCols .box {
  min-height: 4.5em;
  padding-bottom: calc(24px * var(--slide-scale, 1));
}

.slide[data-box="1"] .box.content-panel,
.slide[data-box="1"].slide--twoCols .box {
  padding-bottom: calc(30px * var(--slide-scale, 1));
}

.slide[data-box="1"] .box { display: block; }
.slide:not([data-box="1"]) .box { display: contents; padding: 0; border: 0; background: transparent; color: inherit; }

.slide[data-box="1"][data-corner="br"] .box { border-bottom-right-radius: var(--box-round); }
.slide[data-box="1"][data-corner="bl"] .box { border-bottom-left-radius: var(--box-round); }
.slide[data-box="1"][data-corner="tr"] .box { border-top-right-radius: var(--box-round); }
.slide[data-box="1"][data-corner="tl"] .box { border-top-left-radius: var(--box-round); }

/* Bullet list styling (logo bullet, inherits text color via mask) */
.prose ul,
.box ul {
  margin: calc(18px * var(--slide-scale, 1)) 0 0;
  padding: 0;
  list-style: none;
}
.prose li,
.box li {
  position: relative;
  padding-left: calc(22px * var(--slide-scale, 1));
  margin: calc(10px * var(--slide-scale, 1)) 0;
}
.prose li::before,
.box li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: calc(12px * var(--slide-scale, 1));
  height: calc(12px * var(--slide-scale, 1));
  transform: translateY(-50%);
  background-color: currentColor;
  -webkit-mask-image: url('./assets/bullets/bullet.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  mask-image: url('./assets/bullets/bullet.svg');
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  opacity: .92;
}

/* Printing */
/* planner role hooks */
.slide { background: var(--slide-bg, transparent); }
.slide.has-text-surface .box,
.slide.has-text-surface .content-panel { background: var(--slide-surface, var(--box-bg)); color: var(--slide-text-primary, var(--box-fg)); }
.slide.no-text-surface .h1,
.slide.no-text-surface .p,
.slide.theme-text-onBg .h1,
.slide.theme-text-onBg .p { color: var(--slide-text-on-bg, inherit); }
.slide .media-frame { background: var(--slide-media-frame, rgba(255,255,255,.35)); }
.slide.is-continuation .kicker::before { content: "Fortsetzung "; opacity: .7; font-weight: 700; }

.family-content.slide--body .bodyLayout { display:grid; grid-template-columns: 1fr; gap:22px; }
.family-content.variant-panel-left.slide--body .bodyLayout { grid-template-columns:minmax(0,.72fr) minmax(180px,.28fr); align-items:start; }
.family-content.variant-panel-right.slide--body .bodyLayout { grid-template-columns:minmax(180px,.28fr) minmax(0,.72fr); align-items:start; }
.support-panel { display:none; }
.family-content.variant-panel-left .support-panel,
.family-content.variant-panel-right .support-panel { display:block; background:var(--slide-surface-alt, rgba(255,255,255,.75)); color:var(--slide-text-primary,#111); border-radius:22px; padding:18px 20px; }

.family-dual.slide--twoCols .dualLayout { display:grid; gap:22px; }
.family-dual.variant-50-50 .dualLayout { grid-template-columns:1fr 1fr; }
.family-dual.variant-60-40 .dualLayout { grid-template-columns:1.5fr 1fr; }

.family-media.slide--imageSplit .mediaLayout { display:grid; gap:24px; align-items:stretch; }
.family-media .media-frame { border-radius:28px; overflow:hidden; }
.family-media .caption-panel { margin-top:12px; font-size:.9em; opacity:.9; }

@media print {
  body { background: #fff; }
  .panel { display: none !important; }
  .app { display: block; }
  .stage { padding: 0; }

  /* When printing, we render ALL slides into .deck */
  .deck {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    overflow: visible;
  }

  /* Each slide becomes its own full page */
  .deck .slide {
    position: relative;
    width: 100%;
    height: 100%;
    /* Force the print engine to treat each slide as its own page. */
    page-break-after: always;
    break-after: page;
    /* Avoid splitting a slide across pages. */
    page-break-inside: avoid;
    break-inside: avoid;
    margin: 0;
  }
  /* Some print engines honor break-before more reliably than break-after. */
  .deck .slide + .slide {
    page-break-before: always;
    break-before: page;
  }
  .deck .slide:last-child {
    page-break-after: auto;
    break-after: auto;
  }

  /* Disable editor chrome in print */
  [contenteditable="true"] { outline: none !important; box-shadow: none !important; }
  .toolbar, #toolbar, #headlineBar, .confirm { display: none !important; }
  .imgImport, .vslider, .memberImport, .memberZoomV { display: none !important; }

  /* Force Chrome/Safari to actually print backgrounds/colors */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  /* Use a 16:9 page so slides fit without distortion.
     320×180mm is close to a “widescreen slide” and prints nicely.
  */
  @page { size: 320mm 180mm; margin: 0; }

  /* Lock slide box size to the page size (avoids remaining whitespace / zoom issues). */
  .deck { width: 320mm; }
  .deck .slide { width: 320mm; height: 180mm; }
}
/* composer preview snippet */
.composer-preview-wrap { width:100%; padding:8px; border:1px solid rgba(255,255,255,.08); border-radius:10px; background:rgba(255,255,255,.02); }
.composerStructured,
.composerChunks {
  display: grid;
  gap: 8px;
}
.composerFit {
  margin-top: 4px;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 8px;
  background: rgba(0,0,0,.16);
  font-size: 12px;
  line-height: 1.3;
}
.composerCard {
  margin-top: 8px;
}
.composerCard.is-locked {
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.025);
}
.composerCard__summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
}
.composerCard__body {
  padding: 0 10px 10px;
}
.composerToggle {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: #eef4ff;
  cursor: pointer;
}
.composerSummaryMain {
  min-width: 0;
  flex: 1;
}
.composerSummaryTitle {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: #eef4ff;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.composerSummaryMeta {
  margin-top: 2px;
  color: rgba(238,244,255,.62);
  font-size: 11px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.composerTouched {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 999px;
  color: #ffe0a8;
  background: rgba(255,180,80,.12);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.composerSummaryChips {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  flex-wrap: wrap;
  max-width: 290px;
}
.composerSummaryChip,
.composerSummaryFit {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.10);
  color: #eef4ff;
  font-size: 12px;
  font-weight: 800;
}
.composerSummaryChip--headline { background: rgba(255,203,0,.22); }
.composerSummaryChip--body { background: rgba(125,145,170,.24); }
.composerSummaryChip--bullets { background: rgba(76,201,240,.22); }
.composerSummaryChip--quote { background: rgba(199,125,255,.22); }
.composerSummaryChip--image { background: rgba(6,214,160,.22); }
.composerSummaryChip--date { background: rgba(255,126,29,.22); }
.composerSummaryChip--notes { background: rgba(166,173,186,.18); }
.composerSummaryFit {
  width: auto;
  padding: 0 7px;
  font-size: 10px;
  text-transform: uppercase;
}
.composerSummaryFit--good { background: rgba(80,180,120,.18); }
.composerSummaryFit--tight { background: rgba(255,200,80,.18); }
.composerSummaryFit--overfull { background: rgba(255,100,100,.18); }
.composerCard__work {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 32%);
  gap: 10px;
  align-items: start;
}
.composerCard__inputs {
  min-width: 0;
  display: grid;
  gap: 8px;
}
.composerCard__preview {
  position: sticky;
  top: 0;
  min-width: 0;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.045));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.composerLock {
  width: 30px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #eef4ff;
  cursor: pointer;
}
.composerLock:hover { background: rgba(255,255,255,.12); }
.composerFit--good { border-color: rgba(120,220,145,.22); }
.composerFit--tight { border-color: rgba(255,210,120,.24); }
.composerFit--overfull { border-color: rgba(255,120,120,.28); }
.composerSmart {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.composerSmart .btn,
.composerActions .btn,
.composerChunkTools .btn,
.composerSettings .btn {
  width: auto;
  margin: 0;
  padding: 6px 9px;
}
.composerInput {
  --composer-role: rgba(255,255,255,.10);
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 7px;
  align-items: stretch;
}
.composerInput__icon {
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.10);
  background: var(--composer-role);
  color: #eef4ff;
  font-size: 13px;
  font-weight: 800;
}
.composerInput__control {
  min-width: 0;
}
.composerInput input,
.composerInput textarea {
  margin: 0;
  min-height: 36px;
}
.composerInput textarea {
  resize: vertical;
}
.composerInput--headline { --composer-role: rgba(255,203,0,.24); }
.composerInput--body { --composer-role: rgba(125,145,170,.24); }
.composerInput--bullets { --composer-role: rgba(76,201,240,.22); }
.composerInput--quote { --composer-role: rgba(199,125,255,.22); }
.composerInput--image { --composer-role: rgba(6,214,160,.22); }
.composerInput--date { --composer-role: rgba(255,126,29,.22); }
.composerInput--notes { --composer-role: rgba(166,173,186,.18); }
.composerImageField {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
}
.composerImageField input {
  min-width: 0;
}
.composerImagePick {
  height: 36px;
  margin: 0;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(6,214,160,.14);
  color: #eef4ff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}
.composerImagePick:hover {
  background: rgba(6,214,160,.22);
}
.composerImageThumb {
  grid-column: 1 / -1;
  width: 100%;
  height: 70px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.composerImageThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.composerTouched,
.composerLock {
  position: relative;
}
.composerTouched[data-help]:hover::after,
.composerLock[data-help]:hover::after {
  content: attr(data-help);
  position: absolute;
  z-index: 30;
  right: 0;
  top: calc(100% + 8px);
  width: min(300px, 70vw);
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.16);
  background: #f3f6f2;
  color: #172019;
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  text-transform: none;
  white-space: normal;
  pointer-events: none;
}
.composerActions,
.composerChunkTools,
.composerSettings {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.composerSettings {
  margin-top: 9px;
}
.composerSettings select {
  width: auto;
  min-width: 120px;
  flex: 1 1 140px;
  margin: 0;
}
.composerChunk {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 7px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 7px;
  background: var(--role-bg, rgba(255,255,255,.08));
}
.composerChunk__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.composerRoleButton,
.composerChunk__moves button,
.composerRoleOpt {
  width: 28px;
  height: 28px;
  margin: 0;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.20);
  color: #eef4ff;
  cursor: pointer;
  font-weight: 800;
}
.composerChunk__moves {
  display: grid;
  gap: 4px;
}
.composerChunk__moves button {
  height: 22px;
  font-size: 11px;
}
.composerChunk textarea {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  min-height: 58px;
  resize: vertical;
}
.composerRoleMenu {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.composerRoleOpt.is-active {
  background: rgba(255,255,255,.22);
}
.composerWarn {
  color:#ffcf9b;
  opacity:1;
}
.composerPlanPreview { display:flex; flex-direction:column; gap:7px; }
.composerPlanHeader { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.planLabel { font-size:12px; font-weight:600; opacity:.85; text-transform:uppercase; letter-spacing:.04em; }
.fitBadge { font-size:11px; font-weight:700; padding:4px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.10); }
.fitBadge.good { background: rgba(80,180,120,.16); }
.fitBadge.tight { background: rgba(255,200,80,.16); }
.composerPlanCanvas { position:relative; width:100%; aspect-ratio:16/9; border-radius:10px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); overflow:hidden; }
.composerPlanCanvas .zone { position:absolute; border-radius:8px; border:1px solid rgba(255,255,255,.08); padding:5px; display:flex; flex-direction:column; gap:4px; overflow:hidden; }
.zone-label { display:grid; place-items:center; width:18px; height:18px; border-radius:5px; background:rgba(255,255,255,.12); font-size:10px; font-weight:800; opacity:.9; }
.zone-content { display:flex; flex-wrap:wrap; gap:6px; align-content:flex-start; }
.zone-placeholder {
  margin-top: auto;
  padding: 4px 5px;
  border-radius: 6px;
  background: rgba(255,255,255,.14);
  color: rgba(255,255,255,.88);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.15;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.composerPlanPreview .zone-headline { left:4%; top:5%; width:38%; height:12%; }
.composerPlanPreview .zone-textMain { left:6%; top:21%; width:58%; height:58%; }
.composerPlanPreview .zone-panelA { left:5%; top:22%; width:40%; height:58%; }
.composerPlanPreview .zone-panelB { right:5%; top:22%; width:40%; height:58%; }
.composerPlanPreview .zone-mediaPrimary { right:5%; top:18%; width:34%; height:58%; }
.composerPlanPreview .zone-caption { left:5%; bottom:8%; width:35%; height:10%; }
.blockChip { display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 5px; border-radius:7px; font-size:11px; font-weight:800; border:1px solid rgba(255,255,255,.08); }
.blockChip.type-title { background: rgba(255,255,255,.08); }
.blockChip.type-text { background: rgba(110,125,150,.24); }
.blockChip.type-list { background: rgba(70,150,160,.24); }
.blockChip.type-quote { background: rgba(130,95,170,.24); }
.blockChip.type-caption { background: rgba(150,150,150,.22); }
.blockChip.type-footnote { background: rgba(90,90,100,.24); }
.blockChip.type-image { background: rgba(120,135,85,.24); }

.imagePlaceholder {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  background: color-mix(in oklab, var(--slide-bg-solid, #d8d4d1) 72%, #fff);
}
.imagePlaceholder__bg {
  position:absolute;
  inset:0;
  opacity:.42;
  background:
    linear-gradient(135deg, transparent 0 46%, rgba(255,255,255,.32) 46% 54%, transparent 54%),
    radial-gradient(circle at 28% 28%, rgba(255,255,255,.55) 0 10%, transparent 11%),
    linear-gradient(160deg, rgba(0,0,0,.12), transparent 46%);
}
.imagePlaceholder__text {
  position:relative;
  max-width:74%;
  padding:9px 12px;
  border-radius:8px;
  background: rgba(255,255,255,.72);
  color:#111;
  font-weight:800;
  line-height:1.15;
  text-align:center;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}

@media (max-width: 980px) {
  .composerCard__work {
    grid-template-columns: 1fr;
  }
  .composerCard__preview {
    position: static;
  }
  .composerSummaryChips {
    max-width: 180px;
  }
}

.socialStage {
  width:min(1180px, calc(100vw - 360px - 36px));
  background:#111722;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  box-shadow:0 20px 80px rgba(0,0,0,.45);
  padding:18px;
  overflow:auto;
  max-height:84vh;
}
.socialCanvasWrap { display:flex; justify-content:center; align-items:flex-start; }
.socialCanvas {
  position:relative;
  background:#fff;
  overflow:hidden;
  box-shadow:0 12px 50px rgba(0,0,0,.4);
  user-select:none;
}
.socialCanvas img { position:absolute; left:0; top:0; transform-origin:top left; }
/* Social image viewport uses slide-style frame__img geometry (center anchor). */
.socialCanvas .frame__img { left:50%; top:50%; width:auto; height:auto; transform-origin:50% 50%; max-width:none; max-height:none; }
.socialText {
  position:absolute;
  white-space:pre-wrap;
  line-height:.96;
  letter-spacing:-.01em;
  font-family: "Marguerite Nestwärme Bold", var(--font-display);
}
.socialBodyWrap {
  position:absolute;
  border-radius:18px;
  pointer-events:none;
}
.socialBodyWrap.is-on { background:rgba(242,232,222,.90); }
.socialBodyWrap.is-blur { background:rgba(255,255,255,.10); backdrop-filter:blur(14px) saturate(1.05); -webkit-backdrop-filter:blur(14px) saturate(1.05); border:1px solid rgba(255,255,255,.24); }
.socialBody {
  position:absolute;
  white-space:pre-wrap;
  line-height:1.2;
  font-family: "Marguerite Grotesk", var(--font-body);
}
.socialDate { position:absolute; display:flex; align-items:stretch; gap:0; color:#111; min-width:360px; border-radius:54px; --d-large:66px; --d-small:36px; --d-divider-w:3px; --d-pad-y:12px; --d-pad-x:16px; --d-gap:8px; --d-divider-color:rgba(0,0,0,.85); }
.socialDate__left,
.socialDate__right { display:flex; flex-direction:column; justify-content:center; padding:var(--d-pad-y) var(--d-pad-x); gap:var(--d-gap); font-family:"Marguerite Grotesk", var(--font-body); }
.socialDate__month { font-size:var(--d-small); font-weight:400; line-height:.92; letter-spacing:.01em; text-transform:uppercase; }
.socialDate__day { font-size:var(--d-large); line-height:.88; font-weight:700; }
.socialDate__divider { width:var(--d-divider-w); margin:var(--d-pad-y) 8px; }
.socialDate__time { font-size:var(--d-large); line-height:.86; font-weight:700; }
.socialDate__suffix { font-size:var(--d-small); line-height:.95; font-weight:400; letter-spacing:.01em; }
.socialDate--splitBlock { background:#ffcb00; color:#111; overflow:hidden; }
.socialDate--splitBlock .socialDate__divider { background:var(--d-divider-color); }
.socialDate--splitPlain { color:inherit; background:transparent; }
.socialDate--splitPlain .socialDate__divider { background:var(--d-divider-color); }
.socialLogo { position:absolute; object-fit:contain; }