/* Arne's setup.css + inapp-hero.css, scoped to the real Setup page.
   Original artwork and Lucide paths; existing setting actions stay connected.
   Current workspace rules require the setup choices to fit on one page. */
#dashboard-shell[data-active-page="setup"] .workspace-content {
  max-width: none; margin: 0; padding: 0; overflow: auto; background: #082329;
  scrollbar-color: #358b8b #082329;
}
#dashboard-shell[data-active-page="setup"] .workspace-content::before { display: none; }
#dashboard-shell #page-setup {
  height: auto; min-height: 100%; padding: 0 0 30px; overflow: visible;
  background: #082329; color: #ecf2f1;
}
#dashboard-shell #page-setup:not([hidden]) { display: block; }
#dashboard-shell #page-setup .setup-hero {
  min-height: clamp(18rem, 28dvh, 24rem); position: relative; isolation: isolate; overflow: hidden;
  background: #082329;
}
#dashboard-shell #page-setup .setup-hero-background,
#dashboard-shell #page-setup .setup-hero-foreground {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: right top;
  filter: none;
  mask-image: none; pointer-events: none;
}
#dashboard-shell #page-setup .setup-hero-background { z-index: -2; }
#dashboard-shell #page-setup .setup-hero-foreground { z-index: -1; }
#dashboard-shell #page-setup .setup-hero-foreground {
  inset: auto 0 auto auto;
  top: 68%;
  width: min(48%, 32rem);
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: right center;
  transform: translateY(-50%);
}
#dashboard-shell #page-setup .setup-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: rgba(12, 42, 48, .35);
}
#dashboard-shell #page-setup .setup-hero > div { position: relative; z-index: 1; padding: 0 3.2% 32px; }
#dashboard-shell #page-setup #setup-heading {
  font-size: 2.5rem; font-weight: 600; line-height: 1.2;
  margin: 0 0 10px; color: #f1f5f4; letter-spacing: -.5px;
}
#dashboard-shell #page-setup .setup-hero i { display: block; width: 58px; height: 2px; background: #cfb479; margin-bottom: 15px; }
#dashboard-shell #page-setup .setup-hero p { font-size: 18px; margin: 0; line-height: 1.5; color: #e1ebea; max-width: 640px; }
#dashboard-shell #page-setup .setup-tile-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none;
  gap: 12px 18px; padding: 0 26px; margin: 0; width: 100%; height: auto;
  overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
#dashboard-shell #page-setup .setup-tile {
  display: flex; align-items: flex-start; gap: 24px; width: 100%; min-width: 0; min-height: 157px;
  text-align: left; padding: 22px 20px; border: 1px solid #176068; border-radius: 12px;
  background: linear-gradient(110deg, #0b3035, #06262c); color: #ecf2f1;
  box-shadow: none; transform: none; font-family: inherit;
  transition: background .15s, border-color .15s;
}
#dashboard-shell #page-setup .setup-tile:hover { background: #123b40; border-color: #358b8b; box-shadow: none; transform: none; }
#dashboard-shell #page-setup .setup-tile:focus-visible { outline: 2px solid #e2c275; outline-offset: 3px; }
#dashboard-shell #page-setup .setup-tile .module-icon {
  display: grid; place-items: center; width: 72px; height: 74px; flex: 0 0 72px;
  border: 0; border-radius: 17px; background: #086051; color: #e6c365; box-shadow: none;
}
#dashboard-shell #page-setup .setup-tile .module-icon svg { width: 36px; height: 36px; stroke-width: 1.6; }
#dashboard-shell #page-setup .setup-tile .module-copy { display: grid; gap: 8px; flex: 1; min-width: 0; }
#dashboard-shell #page-setup .setup-tile .module-copy strong {
  margin: 0; color: #ecf2f1; font-size: 20px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere;
}
#dashboard-shell #page-setup .setup-tile .module-copy > span { font-size: 14px; line-height: 1.5; color: #d1e0de; overflow-wrap: anywhere; }
#dashboard-shell #page-setup .setup-tile .module-copy small {
  font-size: 12px; line-height: 1.6; color: #9dbfbd; margin-top: 11px;
  font-weight: 400; letter-spacing: normal; text-transform: none; overflow-wrap: anywhere;
}
#dashboard-shell #page-setup .setup-tile .module-copy small > span { font: inherit; color: inherit; }
#dashboard-shell #page-setup .setup-illustration { align-self: center; color: #168491; opacity: .55; flex: 0 0 74px; }
#dashboard-shell #page-setup .setup-illustration svg { width: 74px; height: 74px; stroke-width: 1; }
#dashboard-shell :is(#page-setup, #page-measure) .setup-more {
  align-self: flex-end; display: grid; place-items: center; width: 31px; height: 31px;
  border-radius: 50%; border: 1px solid #dbb456; color: #dbb456; flex-shrink: 0;
}
#dashboard-shell :is(#page-setup, #page-measure) .setup-more svg { display: block; width: 65%; height: 65%; fill: currentColor; }
@media (max-width: 1450px) {
  #dashboard-shell #page-setup .setup-illustration { display: none; }
  #dashboard-shell #page-setup .setup-tile { gap: 18px; }
}
@media (max-width: 950px) {
  #dashboard-shell #page-setup .setup-tile-grid { grid-template-columns: minmax(0, 1fr); padding: 0 20px; }
  #dashboard-shell #page-setup .setup-illustration { display: block; }
  #dashboard-shell #page-setup .setup-hero { min-height: 16rem; }
  #dashboard-shell #page-setup .setup-hero > div { padding: 0 22px 30px; }
  #dashboard-shell #page-setup #setup-heading { font-size: 2.5rem; }
  #dashboard-shell #page-setup .setup-hero p { max-width: 440px; }
}
@media (max-width: 600px) {
  #dashboard-shell #page-setup .setup-tile-grid { padding: 0 12px; gap: 12px; }
  #dashboard-shell #page-setup .setup-tile { padding: 19px 15px; gap: 14px; }
  #dashboard-shell #page-setup .setup-tile .module-icon { width: 45px; height: 49px; flex-basis: 45px; border-radius: 12px; }
  #dashboard-shell #page-setup .setup-tile .module-icon svg { width: 28px; height: 28px; }
  #dashboard-shell #page-setup .setup-illustration { display: none; }
  #dashboard-shell #page-setup .setup-tile .module-copy strong { font-size: 17px; }
  #dashboard-shell #page-setup .setup-tile .module-copy > span { font-size: 13px; }
  #dashboard-shell #page-setup .setup-tile .module-copy small { font-size: 11px; }
  #dashboard-shell :is(#page-setup, #page-measure) .setup-more { width: 25px; height: 25px; }
  #dashboard-shell #page-setup .setup-hero { min-height: 16rem; }
  #dashboard-shell #page-setup #setup-heading { font-size: 2.5rem; max-width: 320px; }
  #dashboard-shell #page-setup .setup-hero p { font-size: 15px; max-width: 265px; }
}
@media (prefers-reduced-motion: reduce) {
  #dashboard-shell #page-setup { animation: none; }
  #dashboard-shell #page-setup .setup-tile { transition: none; }
}

/* Versandstatus der Kommunikations-E-Mail im Stil der kleinen Setupdialoge. */
.modal.communication-email-sending-dialog {
  width: min(27rem, calc(var(--dialog-viewport-width, 100vw) - 1.75rem));
}
.modal.communication-email-sending-dialog::backdrop {
  background: rgba(0, 18, 23, .66);
  backdrop-filter: blur(6px);
}
.modal.communication-email-sending-dialog .communication-email-sending-content {
  display: grid;
  justify-items: center;
  gap: .65rem;
  text-align: center;
}
.communication-email-sending-art {
  position: relative;
  width: 9.5rem;
  height: 5rem;
  margin: .25rem 0 .5rem;
  color: #e2c275;
}
.communication-email-sending-art svg {
  position: absolute;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.communication-email-sending-envelope {
  left: .4rem;
  bottom: 0;
  width: 4.5rem;
  height: 3.5rem;
}
.communication-email-sending-plane {
  left: 3.5rem;
  top: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  color: #51cbbf;
  animation: communication-email-flight 1.7s ease-in-out infinite;
}
@keyframes communication-email-flight {
  0%, 12% { opacity: 0; transform: translate(-.4rem, 1rem) scale(.8); }
  28% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(3.6rem, -1.5rem) scale(1); }
}
.communication-email-sending-content h2 {
  margin: 0;
  color: #f1f4f0;
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  line-height: 1.3;
}
.communication-email-sending-content p {
  margin: 0;
  color: #c7dcdd;
  line-height: 1.5;
}
@media (prefers-reduced-motion: reduce) {
  .communication-email-sending-plane { animation: none; transform: translate(2rem, -.7rem); }
}

/* Setup uses the results card's frame, title and action placement. Keep the
   delivered setup artwork and all existing menu cards and action targets. */
#dashboard-shell[data-setup-header-actions="true"] > .workspace > .topbar { display: none; }
#dashboard-shell[data-active-page="setup"] .workspace-content {
  overflow: visible; height: 100%; background: #071f25;
}
#dashboard-shell #page-setup:not([hidden]) {
  display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px;
  height: 100%; min-height: 0; padding: 0; background: #071f25;
  font: 16px/1.4 system-ui, sans-serif;
}
#dashboard-shell #page-setup .setup-hero {
  display: flex; align-items: center; min-height: clamp(100px, 22dvh, 180px);
  margin: 0; border: 1px solid #285057; border-radius: 10px;
  background: #0c2a30; container: setup-hero / inline-size;
}
#dashboard-shell #page-setup .setup-hero > .setup-hero-copy {
  width: 100%; min-width: 0; padding: 22px 26px;
}
#dashboard-shell #page-setup .setup-hero-title {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 20px;
}
#dashboard-shell #page-setup #setup-heading {
  margin: 0; color: #e4bf74; font: 650 28px/1.4 system-ui, sans-serif; letter-spacing: -.5px;
}
#dashboard-shell #page-setup .setup-hero p { color: #afc4c7; font-size: 16px; line-height: 1.4; }
#dashboard-shell #page-setup .setup-hero-background {
  inset: 0 0 0 auto; width: 65%; object-position: right center;
  mask-image: linear-gradient(90deg, transparent, #000 40%);
}
#dashboard-shell #page-setup .setup-hero-foreground {
  top: 50%; width: min(35%, 22rem); max-height: 100%;
}
#dashboard-shell #page-setup .setup-tile-grid {
  min-height: 0; height: 100%; padding: 0; gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr);
}
#dashboard-shell #page-setup .setup-tile-wrapper { display: flex; min-height: 0; }
#dashboard-shell #page-setup #open-family-management-setup { order: 1; grid-column: 1; }
#dashboard-shell #page-setup #open-hardware-setup { order: 0; }
#dashboard-shell #page-setup #release-notice-link { order: 8; }
#dashboard-shell #page-setup .setup-tile {
  min-height: 0; height: 100%; align-items: center; gap: 12px; padding: 12px 14px;
  border-color: #285057; border-radius: 10px; background: #0c2a30;
}
#dashboard-shell #page-setup .setup-tile .module-icon { width: 48px; height: 48px; flex-basis: 48px; border-radius: 10px; }
#dashboard-shell #page-setup .setup-tile .module-icon svg { width: 28px; height: 28px; }
#dashboard-shell #page-setup .setup-illustration { display: none; }
#dashboard-shell #page-setup .setup-tile .module-copy { gap: 4px; }
#dashboard-shell #page-setup .setup-tile .module-copy strong { font-size: 18px; line-height: 1.25; hyphens: auto; }
#dashboard-shell #page-setup .setup-tile .module-copy > span { font-size: 14px; line-height: 1.3; }
#dashboard-shell #page-setup .setup-tile .module-copy small { margin: 0; font-size: 12px; line-height: 1.3; }
#dashboard-shell #page-setup .setup-more { width: 26px; height: 26px; flex-basis: 26px; align-self: center; }
@media (max-width: 560px) {
  #dashboard-shell #page-setup .setup-tile-grid { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  #dashboard-shell #page-setup .setup-tile { padding: 6px 10px; }
  #dashboard-shell #page-setup .setup-tile .module-icon { width: 32px; height: 32px; flex-basis: 32px; }
  #dashboard-shell #page-setup .setup-tile .module-copy > span,
  #dashboard-shell #page-setup .setup-tile .module-copy small { display: none; }
}
@media (max-height: 720px) {
  #dashboard-shell #page-setup .setup-tile .module-copy small { display: none; }
}
@media (max-width: 560px) and (max-height: 720px) {
  #dashboard-shell #page-setup .setup-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #dashboard-shell #page-setup .setup-tile .module-icon,
  #dashboard-shell #page-setup .setup-more { display: none; }
  #dashboard-shell #page-setup .setup-tile .module-copy strong { font-size: 14px; }
}
@media (max-height: 600px) {
  #dashboard-shell #page-setup .setup-tile .module-copy > span { display: none; }
}
@media (max-height: 480px) {
  #dashboard-shell #page-setup { gap: 6px; }
  #dashboard-shell #page-setup .setup-hero > .setup-hero-copy { padding: 10px 16px; }
  #dashboard-shell #page-setup .setup-hero-title { margin-bottom: 6px; }
  #dashboard-shell #page-setup .setup-hero p { display: none; }
  #dashboard-shell #page-setup .setup-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  #dashboard-shell #page-setup .setup-tile { padding: 4px 8px; gap: 6px; }
  #dashboard-shell #page-setup .setup-tile .module-icon,
  #dashboard-shell #page-setup .setup-more { display: none; }
  #dashboard-shell #page-setup .setup-tile .module-copy strong { font-size: 14px; }
}
@container setup-hero (max-width: 560px) {
  #dashboard-shell #page-setup .setup-hero > .setup-hero-copy { padding: 16px 20px; }
  #dashboard-shell #page-setup .atr-header-actions { flex-basis: 100%; margin-left: 0; }
}