/* Airy generated crystal scenery; quiet surfaces keep everyday content legible. */
html[data-palette='pastel-crystal'], html[data-palette='pastel-crystal'] body { background: var(--ui-browser-color, #eee5f4); }
html[data-palette='pastel-crystal'], html[data-palette='pastel-crystal'] #mha-familienkarte {
  --ui-paper: color-mix(in srgb, var(--crystal-secondary) 12%, white);
  --ui-ink: color-mix(in srgb, var(--crystal-secondary-ink) 65%, #25232b);
  --ui-muted: color-mix(in srgb, var(--crystal-secondary-ink) 80%, #888);
  --ui-accent: var(--crystal-primary-ink); --ui-brass: var(--crystal-primary);
  --ui-line: color-mix(in srgb, var(--crystal-secondary-ink) 22%, var(--ui-paper));
  --ui-surface: color-mix(in srgb, var(--ui-paper) 93%, transparent);
  --ui-control: color-mix(in srgb, var(--crystal-secondary) 25%, white);
  --ui-hover: color-mix(in srgb, var(--crystal-primary) 55%, white);
  --ui-shadow-tint: color-mix(in srgb, var(--crystal-primary-ink) 3%, transparent);
  --ui-canvas: color-mix(in srgb, var(--ui-paper) 40%, transparent);
  --ui-masthead: color-mix(in srgb, var(--crystal-canvas) 94%, transparent);
  --ui-control-line: color-mix(in srgb, var(--crystal-primary-ink) 36%, var(--ui-paper)); --ui-highlight: #ffffff;
  --ui-primary: var(--crystal-primary); --ui-primary-line: var(--ui-control-line); --ui-on-primary: var(--crystal-primary-ink);
  --ui-primary-ink: var(--ui-on-primary); --ui-primary-highlight: #ffffff80;
  --ui-primary-shadow: color-mix(in srgb, var(--crystal-primary-ink) 9%, transparent);
  --ui-primary-hover: color-mix(in srgb, var(--crystal-primary) 80%, white);
  --ui-selected: var(--crystal-primary); --ui-selected-ink: var(--crystal-primary-ink);
  --ui-danger: #a13960; --ui-danger-line: #d9a6bb; --ui-danger-surface: #fff0f5;
  --ui-focus: var(--crystal-primary-ink); --ui-input: var(--ui-paper); --ui-input-shadow: transparent; --ui-invalid: #a13960;
  --ui-dialog-line: var(--ui-control-line); --ui-dialog: var(--ui-paper); --ui-dialog-shadow: color-mix(in srgb, var(--ui-ink) 21%, transparent);
  --ui-popover: var(--ui-paper); --ui-toast-line: var(--ui-control-line); --ui-toast: var(--crystal-primary);
  --ui-sidebar: color-mix(in srgb, var(--crystal-canvas) 95%, transparent); --ui-sidebar-title: var(--ui-accent); --ui-sidebar-muted: var(--ui-muted);
  --ui-sidebar-line: var(--ui-line); --ui-sidebar-branch: var(--ui-control-line); --ui-sidebar-ink: var(--ui-ink);
  --ui-sidebar-hover: var(--ui-hover); --ui-nav-selected: var(--crystal-primary); --ui-nav-selected-ink: var(--ui-accent);
  --ui-nav-selected-line: var(--ui-control-line); --ui-nav-current: var(--ui-accent);
  --ui-menu-selected: var(--crystal-primary); --ui-menu-selected-line: var(--ui-control-line);
  --ui-feature-line: var(--ui-control-line); --ui-feature: color-mix(in srgb, var(--crystal-primary) 35%, var(--ui-paper));
  --ui-jewel-edge: var(--ui-control-line); --ui-jewel-light: var(--ui-hover); --ui-jewel-dark: var(--ui-accent);
  --ui-jewel-mid: var(--crystal-primary); --ui-jewel-inset: #ffffff70; --ui-jewel-rim: var(--ui-control-line);
  --ui-jewel-shadow: var(--ui-primary-shadow); --ui-jewel-engraving: var(--ui-accent); --ui-jewel-glow: var(--ui-hover);
  --ui-jewel-active: var(--ui-paper); --ui-jewel-ring: var(--ui-line); --ui-mobile: var(--crystal-canvas);
  --crystal-background: url('/assets/images/design-kristallglanz/pastel-landscape-v1.webp');
  --crystal-veil: color-mix(in srgb, var(--crystal-canvas) 60%, transparent);
  --atlas-lettering-filter: hue-rotate(245deg) saturate(.6);
  --atlas-base: var(--crystal-canvas); --atlas-intro: var(--crystal-background); --atlas-home: var(--crystal-background); --atlas-kitchen: var(--crystal-background); --atlas-night: var(--crystal-background);
  --mha-paper-image: none; --mha-font-heading: 'Manrope', 'Segoe UI', sans-serif;
  --ui-shadow: none;
}
/* The same scenery as Focus, softened once behind the quiet reading surfaces. */
html[data-palette='pastel-crystal'] #mha-familienkarte .sf-page-backdrop,
html[data-palette='pastel-crystal'] #mha-familienkarte .mha-cover-stage::before {
  background-color: var(--crystal-canvas);
  background-image: linear-gradient(var(--crystal-veil), var(--crystal-veil)), var(--crystal-background);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: normal, luminosity;
}
html[data-theme] #mha-familienkarte .sf-theme-sample-kristallglanz { background: #f1e5f4; }
html[data-palette='pastel-crystal'] #mha-familienkarte :is(.sf-ambient, .mha-background-walkers, .mha-foreground-walkers, .hp-only) { display: none; }
html[data-palette='pastel-crystal'] #mha-familienkarte .mha-cover-stage::before { --crystal-veil: color-mix(in srgb, var(--crystal-canvas) 35%, transparent); }
html[data-palette='pastel-crystal'] #mha-familienkarte .mha-main { background: transparent; }
html[data-palette='pastel-crystal'] #mha-familienkarte .sf-cover-lettering { width: min(490px, 100%); }
html[data-palette='pastel-crystal'] #mha-familienkarte .sf-intro-crystal { width: clamp(130px, 20svh, 180px); height: clamp(130px, 20svh, 180px); margin: 0 0 8px; }
html[data-palette='pastel-crystal'] #mha-familienkarte .mha-frame { border-radius: 20px; box-shadow: none; }
html[data-palette='pastel-crystal'] #mha-familienkarte :is(.mha-title, .mha-brand, .mha-dialog h2, .mha-shelf h2, .building-room-title) { font-weight: 550; letter-spacing: -.035em; }
html[data-palette='pastel-crystal'] #mha-familienkarte .mha-title { font-size: clamp(26px, 4vw, 36px); }
html[data-palette='pastel-crystal'] #mha-familienkarte .mha-dialog h2 { font-size: 25px; }
html[data-palette='pastel-crystal'] #mha-familienkarte :is(.mha-shelf h2, .building-room-title) { font-size: 21px; }
html[data-palette='pastel-crystal'] #mha-familienkarte .mha-heading-row { background: transparent; border: 0; padding-inline: 0; box-shadow: none; }
html[data-palette='pastel-crystal'] #mha-familienkarte .mha-shopping-category { font: 600 13px/1.6 var(--mha-font-body); color: var(--ui-accent); border-color: var(--ui-line); }
html[data-palette='pastel-crystal'] #mha-familienkarte :is(.mha-shelf, .mha-note, .mha-recipe, .mha-calendar, .building-room, .building-interior) { backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-palette='pastel-crystal'] #mha-familienkarte .mha-mobile-map { background: transparent; }
html[data-palette='pastel-crystal'] #mha-familienkarte :is(.mha-brand-logo, .sf-cover-mark, .sf-mobile-crystal img, .sf-theme-settings > img) { filter: hue-rotate(var(--crystal-art-hue)) saturate(.7); }
html[data-palette='pastel-crystal'] #mha-familienkarte .mha-toast { color: var(--ui-on-primary); }
html[data-palette='pastel-crystal'] #mha-familienkarte .mha-focus { background-blend-mode: normal, luminosity; }
html[data-palette='pastel-crystal'] #mha-familienkarte .sf-mobile-crystal img { width: 78px; height: 78px; inset: 50% auto auto 50%; transform: translate(-50%, -50%); }
/* Small, still glints around the emblem. No moving wallpaper behind the content. */
html[data-palette='pastel-crystal'] #mha-familienkarte :is(.sf-intro-crystal, .sf-mobile-crystal)::after {
  content: '✧'; position: absolute; right: 0; top: 10%; color: var(--crystal-primary-ink); font: 24px/1 Georgia, serif;
  text-shadow: -65px 42px var(--crystal-secondary-ink), -22px 68px var(--crystal-primary); pointer-events: none;
}
html[data-palette='pastel-crystal'] #mha-familienkarte .sf-intro-crystal::after { right: 2%; top: 4%; font-size: 28px; text-shadow: -4.5em 2.7em var(--crystal-secondary-ink), -.4em 4.2em var(--crystal-primary); }
html[data-palette='pastel-crystal'] #mha-familienkarte[data-motion='on'][data-cover='open']:not([data-background-paused='true']) .mha-mobile-map:is(:hover, :focus-visible) .sf-mobile-crystal::after { animation: sf-crystal-twinkle .8s ease-in-out; }
/* Replace the atlas smoke on hover with a small sweep of glitter. */
html[data-palette='pastel-crystal'] #mha-familienkarte :is(.mha-button, .mha-library-text-button, .sf-quick-paths button, .mha-nav button, .mha-more-grid button, .mha-mobile-nav button)::before {
  background: radial-gradient(circle at 18% 30%, #fff 0 1px, transparent 2px), radial-gradient(circle at 65% 65%, var(--crystal-secondary) 0 2px, transparent 3px), radial-gradient(circle at 82% 28%, var(--crystal-primary) 0 1px, transparent 2px);
  filter: none; mix-blend-mode: normal;
}
#mha-familienkarte .sf-page-glitter { display: none; position: absolute; inset: 0; }
html[data-entry-mode='intro'] #mha-familienkarte[data-transition='glitter'] .sf-page-transition { --passage-time: .95s; }
html[data-entry-mode='intro'] #mha-familienkarte[data-transition='glitter'] .sf-page-glitter { display: block; }
#mha-familienkarte .sf-glitter-spark { position: absolute; left: var(--spark-x); top: var(--spark-y); width: var(--spark-size); height: var(--spark-size); background: var(--spark-color); opacity: 0; border-radius: 50%; box-shadow: 0 0 7px var(--crystal-primary); }
#mha-familienkarte .sf-glitter-spark:nth-child(3n) { border-radius: 0; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
html[data-entry-mode='intro'] #mha-familienkarte[data-motion='on'][data-transition='glitter'][data-turning='true']:not([data-background-paused='true']) .sf-glitter-spark { animation: sf-glitter-fall .76s var(--spark-delay) ease-out both; }
@keyframes sf-glitter-fall { 0% { opacity: 0; transform: translate3d(calc(var(--spark-drift) * -.5), -45px, 0) scale(.25) rotate(-40deg); } 25% { opacity: 1; transform: translate3d(0, 0, 0) scale(1.25); } 55% { opacity: .9; } 100% { opacity: 0; transform: translate3d(var(--spark-drift), 100px, 0) scale(.3) rotate(100deg); } }
@keyframes sf-crystal-twinkle { 0%, 100% { opacity: .6; } 50% { opacity: 1; transform: scale(1.15); } }
@media (max-width: 850px) { html[data-palette='pastel-crystal'] #mha-familienkarte .mha-frame { border-radius: 0; } }
@media (orientation: portrait) { html[data-palette='pastel-crystal'], html[data-palette='pastel-crystal'] #mha-familienkarte { --crystal-background: url('/assets/images/design-kristallglanz/pastel-portrait-v1.webp'); } }
@media (prefers-reduced-motion: reduce) {
  html[data-palette='pastel-crystal'] #mha-familienkarte .sf-mobile-crystal::after { animation: none !important; }
  html[data-palette='pastel-crystal'] #mha-familienkarte .sf-page-transition { display: none; }
}