/* WedPlanning · Demo-Abschnitt · neue Gestaltung „Abendempfang mit Wegweiser“ vom 28.10.2026
   Dunkle Bühne mit Lichterkette, darauf der helle Rahmen um den Planer; Startbild als Hochzeits-Wegweiser.
   Geführte Demo vom 29.10.2026: Die drei Schilder starten je eine kleine Aufgabe; danach drei offene Bereiche
   und Vorschauen für Funktionen mit Zugang.
   Nur #einblicke wird gestaltet; neue Klassen beginnen mit „dm-“. Nach den vorhandenen
   Landingpage-Stilen laden. Die App im iframe nutzt unverändert ihre eigenen Stile. */
#einblicke {
  --dm-night: #391e2e;
  --dm-pink: #efb4c6;
  --dm-light: #fff4f7;
  --dm-berry: #79364c;
  --dm-deep: #542638;
  --dm-ink: #40323a;
  --dm-muted: #725d68;
  --dm-soft: #ead9df;
  --dm-paper: #fffaf8;
  --dm-card: #fffdfb;
  --dm-display: Cormorant, Georgia, serif;
  --dm-body: Manrope, "Segoe UI", sans-serif;
  /* Feste Kopfzeile der Landingpage hier eintragen (Höhe + 12px) */
  --dm-offset: 12px;
  /* Höhe des Planers: passt mit Titelleiste (57) und Fußzeile (69) in das Fenster */
  --dm-chrome: 127px;
  --dm-frame-min: 480px;
  --dm-frame-max: 760px;
  --dm-frame-h: clamp(var(--dm-frame-min), calc(100vh - var(--dm-chrome) - var(--dm-offset)), var(--dm-frame-max));
  /* Wegweiser: Schildbreite und Abstand der Schildkante zum Pfosten */
  --dm-board-w: 340px;
  --dm-hold: 44px;
  --dm-sign-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='72' viewBox='0 0 160 72'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fffdfb'/%3E%3Cstop offset='1' stop-color='%23fbeff3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath d='M8.5 .5H124L159.5 36 124 71.5H8.5A8 8 0 0 1 .5 63.5V8.5A8 8 0 0 1 8.5 .5Z' fill='url(%23g)' stroke='%23d8bdc8'/%3E%3Cpath d='M9.5 5.5H121.93L152.43 36 121.93 66.5H9.5A4 4 0 0 1 5.5 62.5V9.5A4 4 0 0 1 9.5 5.5Z' fill='none' stroke='%23ecd9df' stroke-opacity='1'/%3E%3C/g%3E%3C/svg%3E");
  --dm-sign-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='72' viewBox='0 0 160 72'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fffdfb'/%3E%3Cstop offset='1' stop-color='%23fbeff3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='matrix(-1 0 0 1 160 0)'%3E%3Cpath d='M8.5 .5H124L159.5 36 124 71.5H8.5A8 8 0 0 1 .5 63.5V8.5A8 8 0 0 1 8.5 .5Z' fill='url(%23g)' stroke='%23d8bdc8'/%3E%3Cpath d='M9.5 5.5H121.93L152.43 36 121.93 66.5H9.5A4 4 0 0 1 5.5 62.5V9.5A4 4 0 0 1 9.5 5.5Z' fill='none' stroke='%23ecd9df' stroke-opacity='1'/%3E%3C/g%3E%3C/svg%3E");
  --dm-sign-pr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='72' viewBox='0 0 160 72'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%238a3e5a'/%3E%3Cstop offset='1' stop-color='%236c2c43'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath d='M8.5 .5H124L159.5 36 124 71.5H8.5A8 8 0 0 1 .5 63.5V8.5A8 8 0 0 1 8.5 .5Z' fill='url(%23g)' stroke='%235e2538'/%3E%3Cpath d='M9.5 5.5H121.93L152.43 36 121.93 66.5H9.5A4 4 0 0 1 5.5 62.5V9.5A4 4 0 0 1 9.5 5.5Z' fill='none' stroke='%23ffd9e6' stroke-opacity='.55'/%3E%3C/g%3E%3C/svg%3E");
  --dm-sign-pl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='72' viewBox='0 0 160 72'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%238a3e5a'/%3E%3Cstop offset='1' stop-color='%236c2c43'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='matrix(-1 0 0 1 160 0)'%3E%3Cpath d='M8.5 .5H124L159.5 36 124 71.5H8.5A8 8 0 0 1 .5 63.5V8.5A8 8 0 0 1 8.5 .5Z' fill='url(%23g)' stroke='%235e2538'/%3E%3Cpath d='M9.5 5.5H121.93L152.43 36 121.93 66.5H9.5A4 4 0 0 1 5.5 62.5V9.5A4 4 0 0 1 9.5 5.5Z' fill='none' stroke='%23ffd9e6' stroke-opacity='.55'/%3E%3C/g%3E%3C/svg%3E");
  --dm-ring-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='176' height='84' viewBox='0 0 176 84'%3E%3Cg%3E%3Cpath d='M14 1H132.28L173.28 42 132.28 83H14A13 13 0 0 1 1 70V14A13 13 0 0 1 14 1Z' fill='none' stroke='%2379364c' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E");
  --dm-ring-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='176' height='84' viewBox='0 0 176 84'%3E%3Cg transform='matrix(-1 0 0 1 176 0)'%3E%3Cpath d='M14 1H132.28L173.28 42 132.28 83H14A13 13 0 0 1 1 70V14A13 13 0 0 1 14 1Z' fill='none' stroke='%2379364c' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E");
  /* Desktop: Hintergrund über die volle Breite; Inhalt bleibt mittig und höchstens 1200 px breit. */
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  overflow: hidden; overflow: clip;
  width: 100%;
  margin: 32px 0 40px;
  padding: 116px max(48px, calc((100% - 1200px) / 2)) 72px;
  border-radius: 40px;
  background:
    radial-gradient(circle 22px at 7% 22%, rgba(255, 218, 186, .2), rgba(255, 218, 186, .07) 60%, transparent),
    radial-gradient(circle 11px at 14% 11%, rgba(239, 180, 198, .28), transparent),
    radial-gradient(circle 34px at 22% 30%, rgba(239, 180, 198, .05) 0 72%, rgba(239, 180, 198, .11) 86%, transparent),
    radial-gradient(circle 16px at 79% 26%, rgba(255, 218, 186, .2), transparent),
    radial-gradient(circle 38px at 90% 13%, rgba(239, 180, 198, .05) 0 72%, rgba(239, 180, 198, .1) 86%, transparent),
    radial-gradient(circle 9px at 95% 31%, rgba(255, 218, 186, .34), transparent),
    radial-gradient(circle 7px at 31% 15%, rgba(255, 218, 186, .3), transparent),
    radial-gradient(circle 13px at 69% 9%, rgba(239, 180, 198, .24), transparent),
    radial-gradient(circle 28px at 3% 88%, rgba(239, 180, 198, .1), transparent),
    radial-gradient(circle 14px at 97% 80%, rgba(255, 218, 186, .16), transparent),
    radial-gradient(64% 34% at 50% 62%, rgba(239, 180, 198, .16), transparent 70%),
    linear-gradient(180deg, #45243b, var(--dm-night) 32%, #2f1726);
  color: var(--dm-ink);
  font: 400 16px/1.65 var(--dm-body);
  -webkit-font-smoothing: antialiased;
}
@supports (height: 100svh) {
  #einblicke { --dm-frame-h: clamp(var(--dm-frame-min), calc(100svh - var(--dm-chrome) - var(--dm-offset)), var(--dm-frame-max)); }
}
#einblicke *, #einblicke *::before, #einblicke *::after { box-sizing: border-box; }
#einblicke [hidden] { display: none !important; }
#einblicke :is(h2, h3, p, ul) { margin: 0; }
#einblicke p { text-wrap: pretty; }
#einblicke :is(h2, h3) { color: inherit; font-family: var(--dm-display); font-weight: 500; font-synthesis: none; text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
#einblicke svg { display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#einblicke :is(button, a) { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#einblicke button { margin: 0; border: 0; font: inherit; cursor: pointer; }
#einblicke a { color: inherit; text-decoration: none; }
#einblicke :is(button, a):focus-visible { outline: 2px solid var(--dm-berry); outline-offset: 3px; }

/* Lichterkette über der Bühne */
/* Keep the SVG canvas tall enough for its light halos on wide screens. */
#einblicke .dm-stage-lights { position: absolute; z-index: -1; inset: 0 0 auto; width: 100%; height: auto; min-height: 120px; aspect-ratio: 12 / 1; pointer-events: none; }
#einblicke .dm-stage-lights .dm-wire { fill: none; stroke: rgba(255, 228, 236, .38); stroke-width: 1.4; }
#einblicke .dm-stage-lights .dm-cap { stroke: #9a7584; stroke-width: 3; stroke-linecap: butt; }
#einblicke .dm-stage-lights .dm-bulb { fill: #ffeed8; stroke: #f5cfa6; stroke-width: 1; }
#einblicke .dm-stage-lights .dm-halo { fill: url(#dm-glow); stroke: none; opacity: 1; }

/* Kopf: mittig und hell auf der Bühne */
#einblicke .dm-head { display: grid; justify-items: center; max-width: 820px; margin: 0 auto 48px; color: var(--dm-light); text-align: center; }
#einblicke .dm-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 16px; color: var(--dm-pink); font-size: 12px; font-weight: 800; letter-spacing: .2em; line-height: 1.4; text-transform: uppercase; }
#einblicke .dm-eyebrow::before, #einblicke .dm-eyebrow::after { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .55; }
#einblicke .dm-head h2 { font-size: clamp(44px, 5vw, 66px); line-height: 1.02; letter-spacing: -.035em; }
#einblicke .headline-tail { color: var(--dm-pink); font-style: normal; font-weight: inherit; }
#einblicke .dm-lead { max-width: 50ch; margin-top: 18px; color: #e8cfd8; font-size: 17px; line-height: 1.65; }
#einblicke .dm-assurances { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; padding: 0; list-style: none; }
#einblicke .dm-assurances li { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px 5px 6px; border-radius: 99px; background: rgba(255, 244, 247, .07); box-shadow: inset 0 0 0 1px rgba(255, 244, 247, .17); color: var(--dm-light); font-size: 12.5px; font-weight: 700; line-height: 1.5; }
#einblicke .dm-assurances li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--dm-pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23391e2e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4 4L18.5 7.5'/%3E%3C/svg%3E") 50% / 12px no-repeat; }

/* Rahmen um die Demo */
#einblicke .dm-panel { position: relative; overflow: hidden; overflow: clip; border-radius: 28px; background: var(--dm-paper); box-shadow: 0 0 0 1px rgba(255, 244, 247, .16), 0 0 110px -18px rgba(255, 214, 178, .3), 0 50px 90px -46px rgba(0, 0, 0, .6); scroll-margin-top: var(--dm-offset); }
#einblicke .dm-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 57px; padding: 7px 10px 7px 24px; border-bottom: 1px solid var(--dm-soft); background: linear-gradient(180deg, #f7ecef, #f3e5ea); }
#einblicke .dm-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
#einblicke .dm-title strong { overflow: hidden; color: var(--dm-deep); font: 600 21px/1.2 var(--dm-display); letter-spacing: -.01em; white-space: nowrap; text-overflow: ellipsis; }
#einblicke .dm-badge { display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; background: rgba(255, 250, 248, .75); box-shadow: inset 0 0 0 1px #dcc3cc; color: var(--dm-berry); font-size: 11px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
#einblicke .dm-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dm-berry); }
#einblicke .dm-reset { display: inline-flex; flex: none; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px 0 13px; border-radius: 99px; background: var(--dm-paper); box-shadow: inset 0 0 0 1px #dcc3cc; color: var(--dm-berry); font-size: 13px; font-weight: 700; white-space: nowrap; transition: background-color .2s; }
#einblicke .dm-reset:hover { background: #fff; }
#einblicke .dm-reset svg { width: 16px; height: 16px; stroke-width: 1.9; }
#einblicke .dm-reset-short { display: none; }

/* Titelleiste: „Zur Auswahl“ und „Mehr mit Zugang“ stehen rechts neben dem Titel. Die offenen Bereiche wechselt man im
   Menü des Planers, wie am Handy; so gibt es nur ein Menü und der Planer bekommt die Höhe einer Leiste dazu. */
#einblicke .demo-nav { display: flex; flex: none; align-items: center; gap: 8px; margin-left: auto; padding: 0; overflow: visible; border: 0; background: none; }
#einblicke .dm-chip { display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 38px; margin: 0; padding: 0 12px 0 10px; border-radius: 99px; background: transparent; box-shadow: none; color: var(--dm-muted); font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; transition: background-color .2s, color .2s; }
#einblicke .dm-chip svg { width: 17px; height: 17px; }
#einblicke .dm-chip:hover { background: #f6ebee; color: var(--dm-berry); box-shadow: none; }
#einblicke .dm-chip:focus-visible { outline-offset: 2px; }
#einblicke .dm-chip--back { box-shadow: inset 0 0 0 1px #dcc3cc; color: var(--dm-berry); }
#einblicke .dm-chip--locked { color: #87707c; }
#einblicke .dm-chip--locked[aria-current="true"] { background: #f3e5ea; box-shadow: inset 0 0 0 1px #d9bec9; color: var(--dm-berry); }
/* Die Bereiche mit Zugang öffnen sich als kleine Liste unter „Mehr mit Zugang“; der Knopf ist markiert, solange eine
   ihrer Vorschauen offen ist. */
#einblicke .dm-nav-group--locked { position: relative; z-index: 5; display: flex; }
#einblicke .dm-more { color: #87707c; box-shadow: inset 0 0 0 1px #e3cfd6; }
#einblicke .dm-more[aria-expanded="true"], #einblicke .dm-nav-group--locked:has([aria-current="true"]) .dm-more { background: #f3e5ea; box-shadow: inset 0 0 0 1px #d9bec9; color: var(--dm-berry); }
#einblicke .dm-more-arrow { width: 15px; height: 15px; transition: transform .2s; }
#einblicke .dm-more[aria-expanded="true"] .dm-more-arrow { transform: rotate(180deg); }
#einblicke .dm-locked-list { position: absolute; top: calc(100% + 8px); right: 0; display: none; min-width: 236px; padding: 6px; border-radius: 16px; background: var(--dm-card); box-shadow: 0 22px 44px -18px rgba(57, 30, 46, .5), 0 0 0 1px #ecdbe1; }
#einblicke .dm-more[aria-expanded="true"] + .dm-locked-list { display: grid; gap: 2px; }
#einblicke .dm-locked-list .dm-chip { justify-content: flex-start; min-height: 44px; border-radius: 10px; }

/* Streifen über dem Planer: ruhige Bestätigung oder freiwilliger Tipp; er deckt den Planer nie ab */
#einblicke .dm-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 9px 10px 9px 20px; border-bottom: 1px solid var(--dm-soft); background: #fbf2f5; }
#einblicke .dm-strip[data-kind="done"] { background: linear-gradient(90deg, #f6e8ee, #fbf3f6); }
#einblicke .dm-strip-text { display: flex; flex: 1 1 260px; align-items: center; gap: 10px; min-width: 0; color: var(--dm-deep); font-size: 14px; font-weight: 600; line-height: 1.45; }
#einblicke .dm-strip-text svg { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--dm-berry); color: #fff9f6; stroke-width: 2.4; }
#einblicke .dm-strip-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#einblicke .dm-strip-actions button { min-height: 40px; padding: 0 16px; border-radius: 99px; background: var(--dm-paper); box-shadow: inset 0 0 0 1px #d9bec9; color: var(--dm-berry); font-size: 13px; font-weight: 700; }
#einblicke .dm-strip-actions button.dm-strip-main { background: var(--dm-berry); box-shadow: none; color: #fff9f6; }
#einblicke .dm-strip-close { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: transparent; color: var(--dm-muted); }
#einblicke .dm-strip-close:hover { background: #f1e2e7; color: var(--dm-berry); }
#einblicke .dm-strip-close svg { width: 16px; height: 16px; }

/* Startbild: Lichterkette, Willkommensschild am Pfosten, Schleife, drei Wegweiser-Schilder */
#einblicke .dm-signpost { position: relative; display: grid; justify-items: center; padding: 50px 24px 26px; overflow: hidden; overflow: clip; background: radial-gradient(56% 42% at 50% 100%, #f5e4e9, transparent 72%), linear-gradient(180deg, var(--dm-paper), #fcf2f4); }
#einblicke .dm-lights { position: absolute; inset: 0 0 auto; width: 100%; height: 96px; pointer-events: none; }
#einblicke .dm-wire { fill: none; stroke: #d6b3bf; stroke-width: 1.4; }
#einblicke .dm-cap { stroke: #b88d9b; stroke-width: 3; stroke-linecap: butt; }
#einblicke .dm-bulb { fill: #fbe3cf; stroke: #edc4a6; stroke-width: 1; }
#einblicke .dm-halo { fill: #fbe6d4; stroke: none; opacity: .6; }
#einblicke .dm-post-area { position: relative; display: grid; justify-items: center; width: min(660px, 100%); padding-top: 26px; }
#einblicke .dm-post { position: absolute; z-index: 0; top: 6px; bottom: 15px; left: calc(50% - 7px); width: 14px; border-radius: 7px 7px 3px 3px; background: linear-gradient(90deg, #a3727f, #d8b6c1 42%, #b98a98 72%, #9a6878); box-shadow: 0 2px 4px rgba(84, 38, 56, .15); transform-origin: 50% 100%; }
#einblicke .dm-post::before { content: ""; position: absolute; top: -13px; left: -5px; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 36% 32%, #f1dbe2, #b48594 62%, #8f5d6d); box-shadow: 0 3px 6px rgba(84, 38, 56, .2); }
#einblicke .dm-welcome { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; width: min(480px, 100%); padding: 30px 40px 26px; border-radius: 240px 240px 22px 22px / 70px 70px 22px 22px; background: linear-gradient(180deg, var(--dm-card), #fcf0f3); box-shadow: inset 0 0 0 6px var(--dm-card), inset 0 0 0 7px #ecd9df, 0 26px 44px -30px rgba(84, 38, 56, .5), 0 2px 4px rgba(84, 38, 56, .06); text-align: center; }
#einblicke .dm-welcome img { display: block; width: 104px; height: 52px; margin-bottom: 2px; object-fit: contain; }
#einblicke .dm-kicker { color: var(--dm-berry); font-size: 11px; font-weight: 800; letter-spacing: .18em; line-height: 1.5; text-transform: uppercase; }
#einblicke .dm-welcome h3 { font-size: 38px; line-height: 1.08; letter-spacing: -.02em; }
#einblicke .dm-welcome > p:not(.dm-kicker) { max-width: 38ch; margin-top: 4px; color: var(--dm-muted); font-size: 14.5px; line-height: 1.6; }
#einblicke .dm-bow { position: relative; z-index: 2; width: 72px; height: 45px; margin: -15px 0 0; color: var(--dm-berry); stroke-width: 1.3; }
#einblicke .dm-bow-loop { fill: #f3d6e0; }
#einblicke .dm-bow-tail { fill: #eec3d2; }
#einblicke .dm-bow-knot { fill: #d99bb0; }
#einblicke .dm-boards { display: grid; justify-items: start; gap: 14px; width: 100%; margin-top: 4px; }
#einblicke .dm-board {
  --dm-dir: 1; --dm-tilt: -1.5deg; --dm-nail: #b48594;
  --dm-sign: var(--dm-sign-r); --dm-slice: 12 44 12 14;
  position: relative; z-index: 1; display: grid; align-content: center; justify-items: center; gap: 1px;
  width: var(--dm-board-w); height: 72px; margin: 0 0 0 calc(50% - var(--dm-hold)); padding: 0 8px 0 40px;
  border-style: solid; border-color: transparent; border-width: 12px 44px 12px 14px;
  border-image: var(--dm-sign) var(--dm-slice) fill stretch;
  background: none; color: var(--dm-berry); text-align: center;
  rotate: var(--dm-tilt); transform-origin: var(--dm-hold) 50%;
  filter: drop-shadow(0 10px 12px rgba(84, 38, 56, .16)) drop-shadow(0 1px 1px rgba(84, 38, 56, .12));
}
#einblicke .dm-board--left { --dm-dir: -1; --dm-tilt: 1.5deg; --dm-sign: var(--dm-sign-l); --dm-slice: 12 14 12 44; margin-left: calc(50% + var(--dm-hold) - var(--dm-board-w)); padding: 0 40px 0 8px; border-width: 12px 14px 12px 44px; transform-origin: calc(100% - var(--dm-hold)) 50%; }
#einblicke .dm-board--primary { --dm-sign: var(--dm-sign-pr); --dm-nail: #f0c6d4; color: #fff8fa; }
#einblicke .dm-board--primary.dm-board--left { --dm-sign: var(--dm-sign-pl); }
#einblicke .dm-board-label { font: 600 23px/1.1 var(--dm-display); letter-spacing: -.005em; white-space: nowrap; }
#einblicke .dm-board-place { color: var(--dm-muted); font-size: 10.5px; font-weight: 800; letter-spacing: .16em; line-height: 1.4; text-transform: uppercase; }
#einblicke .dm-board--primary .dm-board-place { color: #f4cbd8; }
/* Zwei Nägel, wo das Schild am Pfosten hängt */
#einblicke .dm-board::before { content: ""; position: absolute; top: 50%; left: calc(var(--dm-hold) - 17px); width: 6px; height: 30px; margin-top: -15px; background: radial-gradient(circle at 50% 3px, var(--dm-nail) 2.3px, transparent 2.8px), radial-gradient(circle at 50% calc(100% - 3px), var(--dm-nail) 2.3px, transparent 2.8px); }
#einblicke .dm-board--left::before { right: calc(var(--dm-hold) - 17px); left: auto; }
#einblicke .dm-board:hover { filter: drop-shadow(0 14px 16px rgba(84, 38, 56, .22)) drop-shadow(0 1px 1px rgba(84, 38, 56, .12)); }
/* Fokusring in Schildform, 4 bis 6 px außerhalb */
#einblicke .dm-board:focus-visible { outline: none; }
#einblicke .dm-board:focus-visible::after { content: ""; position: absolute; inset: -18px -54px -18px -20px; border-style: solid; border-color: transparent; border-width: 16px 50px 16px 18px; border-image: var(--dm-ring-r) 16 50 16 18 stretch; pointer-events: none; }
#einblicke .dm-board--left:focus-visible::after { inset: -18px -20px -18px -54px; border-width: 16px 18px 16px 50px; border-image: var(--dm-ring-l) 16 18 16 50 stretch; }
/* Nach dem Klick gleitet das gewählte Schild in Pfeilrichtung weg (Steuerung setzt data-leaving) */
#einblicke .dm-signpost[data-leaving] .dm-board { filter: opacity(.45); transition: filter .3s; }
#einblicke .dm-signpost[data-leaving] .dm-board[data-chosen] { transform: translateX(calc(var(--dm-dir) * 72px)) rotate(calc(var(--dm-dir) * -3deg)); filter: opacity(0); transition: transform .38s cubic-bezier(.5, 0, .75, 0), filter .38s; }
#einblicke .dm-ground { position: relative; z-index: 0; width: 260px; height: 30px; margin-top: 6px; border-radius: 50%; background: radial-gradient(closest-side, rgba(121, 54, 76, .2), rgba(121, 54, 76, .06) 60%, transparent); }
#einblicke .dm-signpost-note { margin-top: 8px; color: var(--dm-muted); font-size: 12.5px; line-height: 1.5; text-align: center; }
/* Geführte Demo: Ein erledigtes Schild zeigt ein Häkchen statt des Bereichs; darunter „Selbst erkunden“ */
#einblicke .dm-board-done { display: none; align-items: center; gap: 5px; color: var(--dm-berry); font-size: 10.5px; font-weight: 800; letter-spacing: .16em; line-height: 1.4; text-transform: uppercase; }
#einblicke .dm-board-done svg { width: 12px; height: 12px; stroke-width: 3; }
#einblicke .dm-board--primary .dm-board-done { color: #fff8fa; }
#einblicke .dm-board[data-done] .dm-board-place { display: none; }
#einblicke .dm-board[data-done] .dm-board-done { display: inline-flex; }
#einblicke .dm-explore { min-height: 40px; margin-top: 4px; padding: 0 12px; background: none; color: var(--dm-berry); font-size: 14px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
#einblicke .dm-explore:hover { text-decoration-thickness: 2px; }
/* Nach allen drei Aufgaben wird das Willkommensschild zum Abschluss: was geschafft ist und der nächste Schritt
   (die Steuerung setzt data-complete). Die Schilder bleiben zum erneuten Ausprobieren. */
#einblicke .dm-signpost:not([data-complete]) .dm-when-done, #einblicke .dm-signpost[data-complete] .dm-when-open { display: none; }
#einblicke .dm-signpost[data-complete] .dm-kicker .dm-when-done { display: inline-flex; align-items: center; gap: 6px; }
#einblicke .dm-kicker svg { width: 16px; height: 16px; padding: 2px; border-radius: 50%; background: var(--dm-berry); color: #fff9f6; stroke-width: 3; }
#einblicke .dm-finish { margin-top: 12px; }
#einblicke :is(.dm-welcome h3, .dm-preview h3):focus { outline: none; }

/* Vorschau einer Funktion mit Zugang: Bild aus der App (als Vorschau markiert), Erklärung, Angebot, zwei Aktionen */
#einblicke .dm-preview { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 36px; min-height: min(var(--dm-frame-h), 620px); padding: 40px 44px; background: radial-gradient(60% 50% at 20% 80%, #f5e4e9, transparent 70%), linear-gradient(180deg, var(--dm-paper), #fcf2f4); }
#einblicke .dm-preview-shot { position: relative; margin: 0; overflow: hidden; overflow: clip; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px #ead9df, 0 30px 50px -30px rgba(84, 38, 56, .6); }
#einblicke .dm-preview-shot img { display: block; width: 100%; height: auto; }
#einblicke .dm-preview-shot figcaption { position: absolute; top: 12px; left: 12px; padding: 4px 12px; border-radius: 99px; background: rgba(57, 30, 46, .88); color: #fff4f7; font-size: 11px; font-weight: 800; letter-spacing: .12em; line-height: 1.5; text-transform: uppercase; }
#einblicke .dm-preview-copy { display: grid; justify-items: start; gap: 12px; }
#einblicke .dm-preview-kicker { color: var(--dm-berry); font-size: 11px; font-weight: 800; letter-spacing: .16em; line-height: 1.5; text-transform: uppercase; }
#einblicke .dm-preview h3 { color: var(--dm-deep); font-size: clamp(30px, 3vw, 40px); line-height: 1.08; letter-spacing: -.02em; }
#einblicke .dm-preview-text { max-width: 46ch; color: var(--dm-ink); font-size: 15.5px; line-height: 1.65; }
#einblicke .dm-offer { margin-top: 6px; color: var(--dm-deep); font: 600 22px/1.25 var(--dm-display); }
#einblicke .dm-offer-price { white-space: nowrap; }
#einblicke .dm-offer-note { margin-top: -6px; color: var(--dm-muted); font-size: 13px; }
#einblicke .dm-preview-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
#einblicke :is(.dm-buy, .dm-finish) { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 99px; background: var(--dm-berry); color: #fff9f6; font-size: 14px; font-weight: 700; transition: background-color .2s; }
#einblicke :is(.dm-buy, .dm-finish):hover { background: var(--dm-deep); }
#einblicke :is(.dm-buy, .dm-finish) svg { width: 18px; height: 18px; }
#einblicke .dm-continue { min-height: 48px; padding: 0 20px; border-radius: 99px; background: var(--dm-paper); box-shadow: inset 0 0 0 1px #d9bec9; color: var(--dm-berry); font-size: 14px; font-weight: 700; }
#einblicke .dm-continue:hover { background: #fff; }
#einblicke .dm-preview-note { margin-top: 4px; padding: 10px 14px; border-radius: 12px; background: #f6e8ed; color: var(--dm-deep); font-size: 13px; line-height: 1.5; }

/* Planer, Laden, Fehler */
#einblicke .dm-frame { display: block; width: 100%; height: var(--dm-frame-h); border: 0; background: #fcf8f5; }
#einblicke .dm-loading { display: grid; place-content: center; justify-items: center; gap: 14px; min-height: var(--dm-frame-h); padding: 32px; background: linear-gradient(180deg, var(--dm-paper), #fcf2f4); text-align: center; }
#einblicke .dm-loading svg { width: 56px; height: 38px; color: var(--dm-berry); stroke-width: 1.6; }
#einblicke .dm-loading p { color: var(--dm-deep); font: 500 24px/1.2 var(--dm-display); }
#einblicke .dm-error { display: grid; justify-items: center; gap: 16px; padding: 64px 24px; background: linear-gradient(180deg, var(--dm-paper), #fcf2f4); text-align: center; }
#einblicke .dm-error p { max-width: 46ch; font-size: 15px; }
#einblicke .dm-retry { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 99px; background: var(--dm-berry); color: #fff9f6; font-size: 14px; font-weight: 700; transition: background-color .2s; }
#einblicke .dm-retry:hover { background: var(--dm-deep); }
#einblicke .dm-retry svg { width: 18px; height: 18px; }

/* Fußzeile mit Hinweis und Platzkarte für eigene Namen */
#einblicke .dm-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px 28px; padding: 10px 12px 10px 22px; border-top: 1px solid var(--dm-soft); background: #fcf5f6; }
#einblicke .dm-foot-note { display: flex; align-items: center; gap: 10px; color: var(--dm-muted); font-size: 12.5px; line-height: 1.5; }
#einblicke .dm-foot-note svg { width: 18px; height: 18px; color: var(--dm-berry); }
#einblicke .dm-namecard { display: inline-flex; flex: none; align-items: center; gap: 10px; min-height: 48px; padding: 12px 16px 8px 14px; border-radius: 10px; background: linear-gradient(180deg, #f1e1e7 0 5px, var(--dm-card) 5px); box-shadow: inset 0 0 0 1px #e3cbd4, 0 10px 18px -12px rgba(84, 38, 56, .55); color: var(--dm-berry); font: 600 19px/1.1 var(--dm-display); white-space: nowrap; transition: background-color .2s; }
#einblicke .dm-namecard:hover { background: linear-gradient(180deg, #ecd6de 0 5px, #fff 5px); }
#einblicke .dm-namecard svg { width: 16px; height: 16px; stroke-width: 1.9; }
#einblicke .dm-namecard .dm-namecard-heart { width: 18px; height: 18px; fill: #f3d6e0; stroke-width: 1.5; }
#einblicke .dm-noscript { margin-top: 16px; color: #e8cfd8; font-size: 14px; text-align: center; }

@media (max-width: 1050px) {
  #einblicke { --dm-board-w: 316px; width: 100%; padding-inline: 40px; border-radius: 34px; }
  #einblicke .dm-board-label { font-size: 21px; }
  #einblicke .dm-preview { gap: 28px; padding: 32px; }
  #einblicke .dm-badge { display: none; }
}
/* Tablet hochkant: Titel, „Zur Auswahl“, „Mehr mit Zugang“ und „Zurücksetzen“ passen nebeneinander in die Titelleiste
   (das Abzeichen „Interaktive Demo“ entfällt schon unter 1050 px). */
@media (max-width: 900px) {
  #einblicke .dm-bar { gap: 12px; padding-left: 18px; }
  #einblicke .dm-title strong { font-size: 19px; }
  #einblicke .dm-reset-long { display: none; }
  #einblicke .dm-reset-short { display: inline; }
}

/* Smartphone: dunkel ist nur der Kopf; der Planer läuft randlos über die volle Breite,
   eine schlanke Kopfzeile, Schilder mittig am Pfosten */
@media (max-width: 760px) {
  #einblicke {
    --dm-gutter: 20px; --dm-chrome: 114px; --dm-frame-min: 440px; --dm-frame-max: 860px;
    width: 100%; margin: 24px 0 56px; padding: 92px var(--dm-gutter) 0; border-radius: 28px 28px 0 0;
    background:
      radial-gradient(circle 16px at 9% 150px, rgba(255, 218, 186, .2), transparent),
      radial-gradient(circle 9px at 91% 118px, rgba(239, 180, 198, .3), transparent),
      radial-gradient(circle 26px at 94% 404px, rgba(239, 180, 198, .05) 0 72%, rgba(239, 180, 198, .12) 86%, transparent),
      radial-gradient(circle 7px at 7% 412px, rgba(255, 218, 186, .3), transparent),
      linear-gradient(180deg, #45243b, var(--dm-night) 22%, #2f1726);
  }
  #einblicke .dm-stage-lights { min-height: 84px; }
  #einblicke .dm-head { margin-bottom: 30px; }
  #einblicke .dm-eyebrow { gap: 10px; margin-bottom: 12px; font-size: 11px; }
  #einblicke .dm-eyebrow::before, #einblicke .dm-eyebrow::after { width: 22px; }
  #einblicke .dm-head h2 { font-size: clamp(36px, 10.5vw, 44px); line-height: 1.04; }
  #einblicke .dm-lead { margin-top: 14px; font-size: 15px; }
  #einblicke .dm-assurances { margin-top: 18px; }
  #einblicke .dm-panel { margin-inline: calc(-1 * var(--dm-gutter)); border-radius: 0; box-shadow: 0 -1px rgba(255, 244, 247, .14); }
  #einblicke .dm-bar { gap: 10px; min-height: 57px; padding: 6px 10px 6px 18px; }
  #einblicke .dm-title strong { font-size: 19px; }
  #einblicke .dm-badge, #einblicke .dm-reset-long { display: none; }
  #einblicke .dm-reset-short { display: inline; }
  #einblicke .dm-reset { min-height: 44px; padding: 0 14px 0 12px; font-size: 12.5px; }
  #einblicke .dm-signpost { padding: 26px 16px 22px; }
  #einblicke .dm-lights, #einblicke .dm-board::before { display: none; }
  #einblicke .dm-post-area { padding-top: 22px; }
  #einblicke .dm-welcome { width: min(360px, 100%); padding: 22px 20px 20px; gap: 4px; }
  #einblicke .dm-welcome img { width: 80px; height: 40px; }
  #einblicke .dm-welcome h3 { font-size: 28px; }
  #einblicke .dm-welcome > p:not(.dm-kicker) { font-size: 13.5px; line-height: 1.55; }
  #einblicke .dm-boards { justify-items: center; gap: 12px; }
  #einblicke .dm-board, #einblicke .dm-board--left { --dm-tilt: -1deg; width: min(300px, 100% - 24px); margin: 0; padding-inline: 8px; transform-origin: 50% 50%; }
  #einblicke .dm-board--left { --dm-tilt: 1deg; }
  #einblicke .dm-board-label { font-size: 21px; }
  #einblicke .dm-ground { width: 220px; }
  #einblicke .dm-strip { padding: 10px 8px 10px 16px; }
  #einblicke .dm-strip-actions { flex: 1 1 100%; }
  #einblicke .dm-strip-actions button { flex: 1 1 auto; }
  #einblicke .dm-preview { grid-template-columns: 1fr; gap: 22px; min-height: 0; padding: 22px 16px 26px; }
  #einblicke .dm-preview-actions { display: grid; width: 100%; }
  #einblicke .dm-offer-price { display: block; }
  #einblicke .dm-offer-sep { display: none; }
  #einblicke .dm-foot { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px 18px; }
  #einblicke .dm-foot-note { align-items: flex-start; font-size: 12px; }
  #einblicke .dm-namecard { justify-content: center; }
}
@media (max-width: 380px) {
  #einblicke .dm-welcome h3 { font-size: 26px; }
  #einblicke .dm-board-label { font-size: 19px; }
  #einblicke .dm-title strong { font-size: 17px; }
}

/* Bewegung: Die Lichterketten ziehen sich auf, der Pfosten wächst, das Willkommensschild senkt sich,
   die Schleife wird gebunden und die Schilder schwingen ein. Nur ohne reduzierte Bewegung und in
   Browsern mit Scroll-Animationen; sonst steht sofort alles still an seinem Platz. */
@media (prefers-reduced-motion: no-preference) {
  #einblicke .dm-board { transition: transform .35s cubic-bezier(.3, .7, .2, 1.2), filter .3s; }
  #einblicke .dm-board:hover { transform: rotate(calc(var(--dm-dir) * -2deg)); }
  #einblicke :is(.dm-reset, .dm-namecard, .dm-retry) svg { transition: rotate .4s ease, translate .2s ease; }
  #einblicke .dm-reset:hover svg { rotate: 200deg; }
  #einblicke :is(.dm-namecard, .dm-retry):hover svg:last-child { translate: 0 2px; }
  #einblicke .dm-retry:hover svg:last-child { translate: 3px 0; }
  #einblicke .dm-loading circle { transform-box: fill-box; transform-origin: center; animation: dm-rings 1.4s ease-in-out infinite alternate; }
  #einblicke .dm-loading circle + circle { animation-direction: alternate-reverse; }
  @supports (animation-timeline: view()) {
    #einblicke :is(.dm-stage-lights, .dm-lights, .dm-post, .dm-welcome, .dm-bow, .dm-board, .dm-signpost-note) { animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: view(); }
    #einblicke .dm-stage-lights { animation-name: dm-draw; animation-range: entry 0% cover 34%; }
    #einblicke .dm-lights { animation-name: dm-draw; animation-range: entry 0% cover 38%; }
    #einblicke .dm-post { animation-name: dm-grow; animation-range: entry 0% cover 30%; }
    #einblicke .dm-welcome { animation-name: dm-hang; animation-range: entry 10% cover 34%; }
    #einblicke .dm-bow { animation-name: dm-tie; animation-range: entry 40% cover 40%; }
    #einblicke .dm-board { animation-name: dm-swing; animation-range: entry 30% cover 44%; }
    #einblicke .dm-signpost-note { animation-name: dm-fade; animation-range: entry 0% cover 25%; }
  }
}
@media (forced-colors: active) {
  #einblicke .dm-board { height: auto; min-height: 72px; padding: 8px 16px; border: 1px solid ButtonText; border-image: none; }
  #einblicke .dm-board:focus-visible { outline: 2px solid Highlight; outline-offset: 3px; }
  #einblicke .dm-board:focus-visible::after { content: none; }
  #einblicke :is(.dm-preview-shot, .dm-strip, .dm-preview-note) { border: 1px solid CanvasText; }
  #einblicke :is(.dm-buy, .dm-finish, .dm-continue, .dm-chip--back) { border: 1px solid ButtonText; }
}
@keyframes dm-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes dm-grow { from { scale: 1 0; } to { scale: 1 1; } }
@keyframes dm-hang { from { opacity: 0; translate: 0 -22px; rotate: -3deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes dm-tie { from { opacity: 0; scale: .2; rotate: -25deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes dm-swing {
  0% { opacity: 0; rotate: calc(var(--dm-dir) * -16deg); translate: calc(var(--dm-dir) * -18px) 0; }
  60% { opacity: 1; rotate: calc(var(--dm-tilt) + var(--dm-dir) * 3deg); translate: 0 0; }
  100% { opacity: 1; rotate: var(--dm-tilt); translate: 0 0; }
}
@keyframes dm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dm-rings { from { translate: 2.5px 0; } to { translate: -2.5px 0; } }

/* Handy: die Demo im Vollbild wie eine App. Eine schmale Leiste mit Titel, „Zurücksetzen“ und ✕, darunter der Planer.
   „Zur Auswahl“, „Mehr mit Zugang“, Fußzeile und der Seitenkopf verschwinden; die Seite dahinter steht still. Bestätigung
   und Tipp stehen als schmale Leiste unter dem Planer, quer oben anstelle des Titels. */
#einblicke .dm-close { display: none; }
html.dm-full-open, html.dm-full-open body { overflow: hidden; overscroll-behavior: none; }
/* Der Abschnitt bildet eine eigene Ebene (isolation); im Vollbild muss sie über allen anderen Abschnitten liegen. */
html.dm-full-open #einblicke { z-index: 1000; }
#einblicke .dm-panel.dm-full { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; margin: 0; border-radius: 0; box-shadow: none; }
#einblicke .dm-panel.dm-full .dm-bar { flex: none; gap: 8px; min-height: 54px; padding: 6px 8px 6px 16px; }
#einblicke .dm-panel.dm-full .dm-title strong { font-size: 18px; }
#einblicke .dm-panel.dm-full :is(.dm-badge, .demo-nav, .dm-foot, .dm-reset-long) { display: none; }
#einblicke .dm-panel.dm-full .dm-reset { margin-left: auto; min-height: 40px; padding: 0 12px 0 10px; }
#einblicke .dm-panel.dm-full .dm-reset-short { display: inline; }
#einblicke .dm-panel.dm-full .dm-close { display: grid; flex: none; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: var(--dm-paper); box-shadow: inset 0 0 0 1px #dcc3cc; color: var(--dm-berry); }
#einblicke .dm-panel.dm-full .dm-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
#einblicke .dm-panel.dm-full .dm-frame { flex: 1 1 auto; height: auto; min-height: 0; }
#einblicke .dm-panel.dm-full :is(.dm-loading, .dm-error) { flex: 1 1 auto; min-height: 0; }
#einblicke .dm-panel.dm-full .dm-preview { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
/* Bestätigung nach einer Aufgabe und Tipp für den offenen Bereich: eine schmale Leiste unter dem Planer statt einer Karte
   darüber. Der Planer wird so viel kürzer, nichts wird verdeckt. Das Häkchen ersetzt das Wort „Erledigt“ (Vorleser hören
   es weiter), die Knöpfe heißen kurz „Weiter →“ und „Zeigen →“ und tragen ihren vollen Namen weiter. */
#einblicke .dm-panel.dm-full .dm-strip { order: 2; flex: none; flex-wrap: nowrap; gap: 8px; padding: 8px 4px max(8px, env(safe-area-inset-bottom)) 12px; border: 0; box-shadow: 0 -1px 0 #ead6de; }
#einblicke .dm-panel.dm-full .dm-strip-text { flex: 1 1 auto; gap: 9px; font-size: 13px; line-height: 1.35; }
#einblicke .dm-panel.dm-full .dm-strip-text svg { width: 24px; height: 24px; padding: 4px; }
#einblicke .dm-panel.dm-full .dm-strip-actions { flex: none; padding: 0; }
#einblicke .dm-panel.dm-full .dm-strip-actions button { padding: 0 14px; }
#einblicke .dm-panel.dm-full .dm-strip-main[data-short] { font-size: 0; }
#einblicke .dm-panel.dm-full .dm-strip-main[data-short]::after { content: attr(data-short) " →"; content: attr(data-short) " →" / ""; font-size: 13px; }
/* Unter 375 px: „Zurücksetzen“ nur als Symbol (der Name bleibt im aria-label), damit der Titel ganz zu lesen ist. */
@media (max-width: 374px) {
  #einblicke .dm-panel.dm-full .dm-reset-short { display: none; }
  #einblicke .dm-panel.dm-full .dm-reset { justify-content: center; width: 44px; min-height: 44px; padding: 0; border-radius: 50%; }
}
#einblicke .dm-panel.dm-full .dm-strip-lead { display: inline-block; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Handy quer: Bestätigung und Tipp stehen oben in der Leiste anstelle des Titels (die Steuerung setzt sie dorthin), so
   behält der Planer die ganze Höhe. Sein Menü steht dann als schmale Leiste links (style.css). */
@media (max-height: 500px) and (orientation: landscape) {
  #einblicke .dm-panel.dm-full .dm-bar .dm-strip { order: 0; flex: 1 1 auto; min-width: 0; min-height: 44px; margin-left: -8px; padding: 2px 2px 2px 6px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px #e3cbd4; }
  #einblicke .dm-panel.dm-full .dm-bar:has(> .dm-strip:not([hidden])) .dm-title { display: none; }
  #einblicke .dm-panel.dm-full .dm-bar .dm-strip-text svg { width: 28px; height: 28px; padding: 5px; }
}
/* Kleine Handys quer: „Zurücksetzen“ nur als Symbol (der Name bleibt im aria-label), damit Bestätigung und Tipp Platz haben. */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 740px) {
  #einblicke .dm-panel.dm-full .dm-reset-short { display: none; }
  #einblicke .dm-panel.dm-full .dm-reset { justify-content: center; width: 44px; min-height: 44px; padding: 0; border-radius: 50%; }
}
@media (forced-colors: active) {
  #einblicke .dm-panel.dm-full .dm-close { border: 1px solid ButtonText; }
}